/* ==========================================================================
   Loopstack shared theme — monochrome + neon-green reskin, layered on top
   of style.css's component classes, plus the elevation-pass effects
   (reveal-on-scroll, hover glow/tilt, grain, scroll progress, dividers).
   Used by every subject page (math.html, physics.html, ...). index.html
   keeps its own copy inline because it also needs the video-hero rules.
   ========================================================================== */

:root{
  --ink:#000000;
  --panel:#0d0d0d;
  --panel-2:#161616;
  --panel-3:#212121;
  --line:rgba(255,255,255,.14);
  --text:#ffffff;
  --text-dim:rgba(255,255,255,.65);
  --text-faint:rgba(255,255,255,.4);
  --amber:#39FF14; --amber-soft:rgba(57,255,20,.14);
  --blue:rgba(255,255,255,.78); --blue-soft:rgba(255,255,255,.08);
  --mauve:rgba(255,255,255,.55); --mauve-soft:rgba(255,255,255,.06);
  --green:#39FF14; --green-soft:rgba(57,255,20,.14); --green-dark:#2ecc0f;
  --red:#ff5c5c; --red-soft:rgba(255,92,92,.12);
}
body{ overflow-x:hidden; position:relative; }
nav{ background:#000000cc; }

/* replace style.css's dot-grid texture with a quiet film-grain layer */
body::before{
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ambient glow field + faint grid — keeps the black from reading flat,
   same treatment as index.html's below-the-hero background. Fixed so it
   sits as a quiet backdrop behind all page content (z-index:1 via .wrap). */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(700px 520px at 8% -6%, rgba(57,255,20,.16), transparent 60%),
    radial-gradient(760px 600px at 94% 12%, rgba(57,255,20,.1), transparent 58%),
    radial-gradient(680px 560px at 4% 46%, rgba(255,255,255,.05), transparent 58%),
    radial-gradient(820px 620px at 98% 78%, rgba(57,255,20,.12), transparent 58%),
    radial-gradient(700px 560px at 10% 104%, rgba(255,255,255,.045), transparent 58%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:auto,auto,auto,auto,auto,56px 56px,56px 56px;
}

/* scroll progress bar */
#scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%; z-index:100000;
  background:linear-gradient(90deg, transparent, #39FF14, #fff);
  box-shadow:0 0 12px 1px rgba(57,255,20,.7);
  transition:width .08s linear; pointer-events:none;
}

/* reveal-on-scroll: fade + rise, staggered via inline transition-delay */
.reveal{ opacity:0; transform:translateY(28px); filter:blur(6px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s cubic-bezier(.16,1,.3,1); }
.reveal.in-view{ opacity:1; transform:translateY(0); filter:blur(0); }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1!important; transform:none!important; filter:none!important; transition:none!important; } }

/* sharper section dividers — faint glow-line instead of flat 1px */
section{ border-top-color:transparent!important; background-image:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent); background-repeat:no-repeat; background-size:100% 1px; background-position:top; }
section::before{
  content:""; position:absolute; top:-1px; left:50%; width:120px; height:1px; transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, #39FF14, transparent); opacity:.6; filter:blur(.5px);
}
.cta-section{ background-image:none; }
.cta-section::before{ content:none; }

/* hover glow/tilt for cards */
.hiw-card, .subject-card, .spotlight, .demo-card-win{ transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s, background .3s, box-shadow .3s; will-change:transform; }
.hiw-card:hover, .spotlight:hover{ box-shadow:0 0 0 1px rgba(57,255,20,.25), 0 22px 50px -24px rgba(57,255,20,.35); }
.subject-card:hover{ box-shadow:0 0 0 1px color-mix(in srgb, var(--sc,#39FF14) 45%, transparent), 0 22px 50px -24px rgba(0,0,0,.6); }

/* magnetic glow pulse on primary buttons */
.hero-btn, .btn{ position:relative; overflow:hidden; }
.hero-btn::after, .btn::after{
  content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; pointer-events:none;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%), rgba(57,255,20,.35), transparent 70%);
  transition:opacity .3s ease;
}
.hero-btn:hover::after, .btn:hover::after{ opacity:1; }

/* demo-pick / level-tab / topic-chip active or hover glow */
.demo-pick button.active{ box-shadow:0 0 0 1px #39FF14, 0 0 22px -4px rgba(57,255,20,.7); }
.topic-chip:hover{ box-shadow:0 0 16px -6px rgba(57,255,20,.6); }

/* ---------- subject curriculum (Foundations -> Core -> Advanced -> Frontiers) ---------- */
.curriculum-nav{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.curriculum-nav a{
  font-family:var(--mono); font-size:12.5px; color:var(--text-dim); text-decoration:none;
  padding:8px 14px; border:1px solid var(--line); border-radius:20px; background:var(--panel); transition:.2s;
}
.curriculum-nav a:hover{ color:var(--text); border-color:var(--panel-3); background:var(--panel-2); box-shadow:0 0 16px -6px rgba(57,255,20,.6); }
.stage-block{ margin-top:56px; scroll-margin-top:90px; }
.stage-block:first-of-type{ margin-top:36px; }
.stage-head{ display:flex; align-items:baseline; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.stage-num{
  font-family:var(--disp); font-weight:700; font-size:14px; color:var(--ink);
  background:var(--sc,var(--amber)); width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.stage-head h3{ font-family:var(--disp); font-weight:600; font-size:clamp(21px,3vw,26px); letter-spacing:-.3px; }
.stage-tag{ font-family:var(--mono); font-size:12px; color:var(--text-faint); width:100%; margin-top:-14px; margin-left:44px; }

/* ---------- expandable lessons (replace the old one-paragraph spotlight cards) ---------- */
.lesson-list{ display:flex; flex-direction:column; gap:14px; }
.lesson{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--sc,var(--amber));
  border-radius:14px; overflow:hidden; transition:border-color .25s, box-shadow .25s, background .25s;
}
.lesson:hover{ background:var(--panel-2); box-shadow:0 16px 34px -26px #000c; }
.lesson summary{ list-style:none; cursor:pointer; padding:22px 24px; }
.lesson summary::-webkit-details-marker{ display:none; }
.lesson summary .lh-row{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lesson summary h4{ font-family:var(--disp); font-size:18px; font-weight:600; color:var(--text); letter-spacing:-.2px; }
.lesson summary .lh-toggle{
  font-family:var(--mono); font-size:18px; line-height:1; color:var(--sc,var(--amber)); flex-shrink:0;
  width:26px; height:26px; border-radius:7px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.lesson[open] summary .lh-toggle{ transform:rotate(45deg); }
.lesson .lh-teaser{ color:var(--text-dim); font-size:14px; margin-top:6px; }
.lesson[open] .lh-teaser{ display:none; }
.lesson-body{ padding:0 24px 26px; display:flex; flex-direction:column; gap:14px; border-top:1px solid var(--line); margin-top:2px; padding-top:18px; }
.lesson-body h5{ font-family:var(--mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--sc,var(--amber)); margin-bottom:-6px; }
.lesson-body p{ color:var(--text-dim); font-size:14.5px; line-height:1.7; }
.lesson-body p strong{ color:var(--text); font-weight:600; }

/* marquee: stronger edge fade so it reads as fading into black, not clipping */
.lang-marquee{ -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); }