/* ============================================================
 * Motion + Interaction Design — premium micro-effects layer
 * ============================================================ */

/* ---------- Smooth scrolling baseline ---------- */
html { scroll-behavior: smooth; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Page entrance animation ---------- */
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes page-fade-in-soft {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.md-content__inner {
  animation: page-fade-in 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.md-sidebar--primary .md-nav, .md-sidebar--secondary .md-nav {
  animation: page-fade-in-soft 0.4s ease-out 0.05s both;
}

/* Header shimmer disabled — header is now white (no longer indigo gradient) */

/* ---------- Sidebar items — slide-arrow on hover ---------- */
.md-nav__link {
  transition:
    background 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.18s cubic-bezier(0.4, 0, 0.2, 1),
    padding-left 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 76.25em) {
  .md-nav__link:hover {
    padding-left: 1.05rem !important;
  }
}

/* Animated indigo capsule appearance on active state */
.md-nav__item .md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  animation: nav-active-pop 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes nav-active-pop {
  0%   { background: transparent; transform: scale(0.96); }
  100% { background: var(--color-indigo-50); transform: scale(1); }
}

/* ---------- Topic cards — pronounced 3D tilt + lift ---------- */

/* The grid container provides perspective so children can rotate in 3D */
.gfg-grid {
  perspective: 1200px;
}

.gfg-card {
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s ease;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
}

.gfg-card:hover {
  transform:
    translateY(-12px)
    scale(1.025)
    rotateX(4deg)
    rotateY(-2deg);
  border-color: var(--color-indigo-600);
  box-shadow:
    0 32px 64px -16px rgba(79, 70, 229, 0.35),
    0 16px 32px -8px rgba(15, 23, 42, 0.18),
    0 0 0 1px rgba(79, 70, 229, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Card icon — bounces forward in 3D */
.gfg-card .gfg-icon {
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.3s ease;
  transform: translateZ(0);
}
.gfg-card:hover .gfg-icon {
  transform: translateZ(40px) translateY(-4px) scale(1.15) rotate(-6deg);
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  color: #FFFFFF;
  box-shadow:
    0 12px 24px -6px rgba(79, 70, 229, 0.45),
    0 0 0 4px rgba(79, 70, 229, 0.12);
}

/* Pull title forward in 3D too */
.gfg-card h3 {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gfg-card:hover h3 {
  transform: translateZ(20px);
}

/* CTA pops forward */
.gfg-card .gfg-cta {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.gfg-card:hover .gfg-cta {
  transform: translateZ(15px);
}

/* Card sheen — subtle moving highlight on hover */
.gfg-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(99, 102, 241, 0.04) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.gfg-card:hover::before { transform: translateX(100%); }

/* ---------- Status chip — pulsing dot ---------- */
.gfg-chip::before {
  animation: chip-pulse 2.2s ease-in-out infinite;
}
@keyframes chip-pulse {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50%      { transform: scale(1.15); opacity: 0.85; box-shadow: 0 0 0 3px transparent; }
}

/* ---------- Hero — floating gradient blob ---------- */
.gfg-hero::before {
  animation: hero-float 14s ease-in-out infinite;
}
@keyframes hero-float {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  33%      { transform: translate(-45%, -10px) scale(1.08); }
  66%      { transform: translate(-55%,  10px) scale(0.95); }
}

/* Hero H1 — animated underline (purely decorative) */
.gfg-hero h1 {
  position: relative;
}

/* ---------- Headings — animated underline appear on hover ---------- */
.md-typeset h2 {
  position: relative;
}
.md-typeset h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-indigo-600), var(--color-violet-500));
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.md-typeset h2:hover::after { width: 60px; }

/* ---------- TL;DR callout — subtle lift on hover ---------- */
.md-typeset blockquote {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.md-typeset blockquote:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -6px rgba(139, 92, 246, 0.15);
}

/* ---------- Code blocks — soft indigo glow on hover ---------- */
.md-typeset .highlight {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.md-typeset .highlight:hover {
  box-shadow:
    0 12px 24px -8px rgba(15, 23, 42, 0.25),
    0 0 0 1px rgba(99, 102, 241, 0.25);
}

/* Copy button — fade in on code-block hover */
.md-typeset .highlight .md-clipboard {
  opacity: 0;
  transition: opacity 0.2s ease, color 0.15s ease;
}
.md-typeset .highlight:hover .md-clipboard { opacity: 1; }

/* ---------- Mermaid diagram — gentle hover lift ---------- */
.md-typeset .mermaid {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.md-typeset .mermaid:hover {
  box-shadow: 0 12px 28px -8px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
}

/* ---------- Tables — row highlight transition ---------- */
.md-typeset table:not([class]) td {
  transition: background 0.15s ease;
}

/* ---------- Buttons & CTAs — pressable feel ---------- */
.md-typeset .md-button,
.pyodide-run-btn,
.pyodide-reset-btn {
  transition:
    transform 0.12s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.md-typeset .md-button:active,
.pyodide-run-btn:active,
.pyodide-reset-btn:active {
  transform: scale(0.97);
}

/* Run button extra: soft glow */
.pyodide-run-btn {
  position: relative;
}
.pyodide-run-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: var(--color-indigo-600);
  opacity: 0;
  filter: blur(8px);
  z-index: -1;
  transition: opacity 0.3s ease;
}
.pyodide-run-btn:hover::before { opacity: 0.4; }

/* ---------- TOC links — subtle slide on hover ---------- */
.md-nav--secondary .md-nav__link {
  transition:
    color 0.15s ease,
    border-left-color 0.18s ease,
    transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.md-nav--secondary .md-nav__link:hover {
  transform: translateX(2px);
}

/* Tabs row now uses pill background for active/hover (set in gfg-theme.css).
   Animated underline disabled — pill background is the new active indicator. */

/* ---------- Search input — subtle focus ring on focus ---------- */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.20);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

/* ---------- Footer prev / next cards — slide arrow effect ---------- */
.md-footer__link {
  position: relative;
  overflow: hidden;
}
.md-footer__link::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(99, 102, 241, 0.08),
    transparent
  );
  transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.md-footer__link:hover::after { left: 100%; }

/* ---------- "Run" indicator — animated dot while waiting ---------- */
.pyodide-status:not(:empty) {
  position: relative;
  padding-left: 14px;
}
.pyodide-status:not(:empty)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-indigo-500);
  transform: translateY(-50%);
  animation: status-blink 1.2s ease-in-out infinite;
}
@keyframes status-blink {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

/* ---------- Smooth scroll-spy effect on right TOC ---------- */
.md-nav--secondary .md-nav__link--active {
  position: relative;
}
.md-nav--secondary .md-nav__link--active::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-indigo-600);
  box-shadow: 0 0 0 0 var(--color-indigo-600);
  animation: toc-dot-pulse 2s ease-in-out infinite;
}
@keyframes toc-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0); }
}

/* ============================================================
 * INTERACTIVE CHAPTER ENHANCEMENTS
 * ============================================================ */

/* ---------- 1. Q&A FLASHCARDS ---------- */
.qa-card {
  list-style: none !important;
  margin: 0.85em 0 !important;
  padding: 0 !important;
}
.qa-card::before { display: none !important; }

.qa-details {
  background: var(--color-bg-content);
  border: 1px solid var(--color-border-subtle);
  border-radius: 10px;
  padding: 0;
  transition:
    border-color 0.18s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.qa-details[open] {
  border-color: var(--color-indigo-600);
  box-shadow:
    0 8px 24px -8px rgba(79, 70, 229, 0.22),
    0 2px 6px -2px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.qa-question {
  list-style: none;
  cursor: pointer;
  padding: 0.85em 3em 0.85em 2.6em;
  font-weight: 500;
  color: var(--color-text-primary);
  position: relative;
  transition: background 0.15s ease;
  user-select: none;
}
.qa-question::-webkit-details-marker { display: none; }
.qa-question:hover { background: var(--color-bg-elevated); }

.qa-question::before {
  content: "Q";
  position: absolute;
  left: 0.85em;
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-indigo-50);
  color: var(--color-indigo-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0;
  font-family: var(--font-sans);
}

.qa-question::after {
  content: "+";
  position: absolute;
  right: 1.1em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  font-size: 1.3em;
  font-weight: 300;
  width: 22px; height: 22px;
  border: 1px solid var(--color-border-default);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.15s ease, color 0.15s ease;
}
.qa-details[open] .qa-question::after {
  content: "−";
  transform: translateY(-50%) rotate(180deg);
  background: var(--color-indigo-600);
  color: #FFFFFF;
  border-color: var(--color-indigo-600);
}
.qa-question strong:first-child { display: none; } /* hide the literal "Q:" */

.qa-answer {
  padding: 0 1.4em 1em 2.6em;
  color: var(--color-text-secondary);
  position: relative;
  border-top: 1px solid var(--color-border-subtle);
  animation: qa-slide-down 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.qa-answer::before {
  content: "A";
  position: absolute;
  left: 0.85em;
  top: 1.1em;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-violet-50);
  color: var(--color-violet-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72em;
  font-weight: 800;
  font-family: var(--font-sans);
}
.qa-answer strong:first-child { display: none; } /* hide the literal "A:" */
.qa-answer p { padding-top: 1em; margin: 0; }

@keyframes qa-slide-down {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 2. OUTPUT CODE BLOCKS ---------- */
.md-typeset .highlight.is-output {
  background: linear-gradient(180deg, #0B1120 0%, #050810 100%) !important;
  border-left: 3px solid #10B981 !important;
}
.md-typeset .highlight.is-output::before {
  content: "OUTPUT";
  position: absolute;
  top: 0.6em;
  right: 0.85em;
  color: rgba(16, 185, 129, 0.95);
  background: rgba(16, 185, 129, 0.12);
  padding: 0.15em 0.6em;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 4px;
  border: 1px solid rgba(16, 185, 129, 0.3);
  z-index: 2;
}
.md-typeset .highlight.is-output pre code { color: #B5E8C6 !important; }

/* ---------- 3. CODE LANGUAGE BADGE ---------- */
.md-typeset .highlight[data-lang]::after {
  content: attr(data-lang);
  position: absolute;
  top: 0.6em;
  right: 0.85em;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.15em 0.6em;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1;
  pointer-events: none;
  text-transform: uppercase;
}
/* When output badge is present, language badge moves up a bit or is hidden */
.md-typeset .highlight.is-output[data-lang]::after { display: none; }

/* Make sure copy button sits clearly */
.md-typeset .highlight .md-clipboard {
  right: 0.55em !important;
  top: 0.4em !important;
}

/* When showing a language badge, push copy button to the left of it */
.md-typeset .highlight[data-lang] .md-clipboard {
  right: 5.5em !important;
}

/* ---------- 4. MERMAID ZOOM MODAL ---------- */
.md-typeset .mermaid.is-zoomable { cursor: zoom-in; }
.md-typeset .mermaid.is-zoomable::after {
  content: "⤢ Click to expand";
  position: absolute;
  bottom: 0.6em;
  right: 0.85em;
  color: var(--color-text-tertiary);
  background: var(--color-bg-content);
  border: 1px solid var(--color-border-subtle);
  padding: 0.2em 0.6em;
  font-size: 0.68rem;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.md-typeset .mermaid.is-zoomable { position: relative; }
.md-typeset .mermaid.is-zoomable:hover::after { opacity: 1; }

.edu-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.edu-modal.is-open { display: flex; animation: modal-fade 0.2s ease-out; }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }

.edu-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(6px);
}

.edu-modal__panel {
  position: relative;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 1.5rem 1.8rem;
  max-width: 92vw;
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.4);
  animation: modal-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.edu-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  background: transparent;
  border: 0;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--color-text-secondary);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.edu-modal__close:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }

.edu-modal__body svg {
  display: block;
  max-width: 86vw;
  max-height: 78vh;
  width: auto;
  height: auto;
}

/* ---------- 5. READING PROGRESS BAR ---------- */
.edu-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 999;
  pointer-events: none;
}
.edu-progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #4F46E5, #8B5CF6);
  transition: width 0.08s ease-out;
  box-shadow: 0 0 8px rgba(79, 70, 229, 0.4);
}

/* ---------- 6. BACK-TO-TOP BUTTON ---------- */
.edu-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: var(--color-indigo-600);
  color: #FFFFFF;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 99;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 0.2s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.15s ease,
    box-shadow 0.2s ease;
  box-shadow:
    0 10px 24px -6px rgba(79, 70, 229, 0.45),
    0 4px 8px -2px rgba(15, 23, 42, 0.15);
}
.edu-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.edu-to-top:hover {
  background: var(--color-indigo-700);
  transform: translateY(-3px);
  box-shadow:
    0 16px 32px -6px rgba(79, 70, 229, 0.55),
    0 6px 12px -2px rgba(15, 23, 42, 0.2);
}

/* ---------- 7. SCROLL-REVEAL ---------- */
.edu-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.edu-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 8. COPY TOAST ---------- */
.edu-toast {
  position: fixed;
  bottom: 5rem;
  right: 2rem;
  background: var(--color-text-primary);
  color: #FFFFFF;
  padding: 0.6em 1em;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  z-index: 999;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.22s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  box-shadow:
    0 12px 24px -6px rgba(15, 23, 42, 0.3),
    0 4px 8px -2px rgba(15, 23, 42, 0.15);
}
.edu-toast::before {
  content: "✓ ";
  color: #10B981;
  font-weight: 700;
  margin-right: 4px;
}
.edu-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}