/* ==========================================================================
   CINEMA-CORE.CSS — Ted.Talks.DZ Cinema Mode Design System
   Extracted from Reading_Academic_Masterclass.html reference implementation
   Pure CSS · No build step · Mobile-first
   ========================================================================== */

/* ==========================================================================
   §1 — DESIGN TOKENS
   ========================================================================== */
:root {
  /* ── Surfaces ── */
  --cinema-bg:       #0E0C09;
  --cinema-bg-2:     #100E0B;
  --cinema-bg-3:     #1A1814;
  --cinema-cream:    #F8F6F0;
  --cinema-parchment:#F2EFE8;
  --cinema-paper:    #FDFCFA;

  /* ── Stone scale (warm grey hierarchy) ── */
  --stone-100: #EDEAE2;
  --stone-200: #D8D3C8;
  --stone-300: #BDB7A8;
  --stone-400: #9E9587;
  --stone-500: #726A5C;
  --stone-600: #524C40;
  --stone-700: #3A3530;
  --stone-800: #2A2520;

  /* ── Gold accent spectrum ── */
  --gold:      #C8A45A;
  --gold-light:#DFC07E;
  --gold-dim:  rgba(200,164,90,.10);
  --gold-glow: rgba(200,164,90,.35);

  /* ── Skill colours ── */
  --spk: #3b82f6;   /* Speaking — blue */
  --lst: #a855f7;   /* Listening — purple */
  --rdg: #22c55e;   /* Reading — green */
  --wt1: #eab308;   /* Writing T1 — amber */
  --wt2: #ef4444;   /* Writing T2 — red */
  --voc: #14b8a6;   /* Vocabulary — teal */

  /* ── Typography ── */
  --fs: 'Cormorant Garamond', 'New York', 'Noto Serif', Georgia, serif;
  --fn: 'DM Sans', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --fm: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  --fa: 'Amiri', 'Noto Naskh Arabic', serif;
  --ff: 'Source Sans 3', 'DM Sans', sans-serif;
  --fh: 'Caveat', cursive;

  /* ── Motion & Easing ── */
  --ec: cubic-bezier(.16, 1, .3, 1);   /* smooth — reveals, slides */
  --es: cubic-bezier(.34, 1.56, .64, 1); /* spring — scale, pop */
  --el: linear;                          /* tracers, progress */

  /* ── Z-index scale ── */
  --z-loader:  9999;
  --z-overlay: 9997;
  --z-tracer:  10001;
  --z-nav:     9995;
  --z-toast:   9990;
  --z-brand:   10000;

  /* ── Skill colour (page-level override) ── */
  --skill: var(--gold);
}


/* ==========================================================================
   §2 — RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--fn);
  background: var(--cinema-bg);
  color: #fff;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 48px; /* brand bar */
}
body::-webkit-scrollbar { width: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--gold); color: var(--cinema-bg); }

/* ── SVG Noise overlay ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.026'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}


/* ==========================================================================
   §3 — PERSISTENT BRAND BAR
   ========================================================================== */
#brand-bar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-brand);
  height: 48px;
  background: rgba(14,12,9,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(200,164,90,.15);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--fs);
  font-size: clamp(.7rem, 1.5vw, .95rem);
  font-weight: 600;
  letter-spacing: .25em;
  color: var(--cinema-cream);
  text-transform: uppercase;
  user-select: none;
}
#brand-bar em { font-style: normal; color: var(--gold); }
#brand-bar .bar-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .5;
}


/* ==========================================================================
   §4 — LOADER
   ========================================================================== */
#loader {
  position: fixed; inset: 0;
  z-index: var(--z-loader);
  background: var(--cinema-bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  transition: opacity .5s ease, visibility .5s ease;
}
#loader.done { opacity: 0; visibility: hidden; pointer-events: none; }

.ldr-mono {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--cinema-bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fs);
  font-size: 38px; font-weight: 700; font-style: italic;
  border: 2px solid var(--gold);
  animation: pulseMono 1.6s ease-in-out infinite;
}
@keyframes pulseMono {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.ldr-wm {
  font-family: var(--fs);
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 300;
  letter-spacing: .25em;
  color: #fff;
  text-transform: uppercase;
}
.ldr-wm em { color: var(--gold); font-style: normal; }
.ldr-label {
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--stone-400);
  text-transform: uppercase;
}
.ldr-trk {
  width: min(260px, 60vw); height: 2px;
  background: var(--stone-700);
  border-radius: 2px;
  overflow: hidden;
}
.ldr-fil {
  height: 100%; width: 0;
  background: var(--gold);
  border-radius: 2px;
  animation: ldrFill 1.4s var(--ec) forwards;
}
@keyframes ldrFill { to { width: 100%; } }


/* ==========================================================================
   §5 — SCROLL TRACER
   ========================================================================== */
#tracer {
  position: fixed; left: 0; top: 0;
  width: 3px; height: 0;
  background: linear-gradient(to bottom, var(--skill), var(--gold), var(--lst));
  z-index: var(--z-tracer);
  transition: height .05s linear;
}


/* ==========================================================================
   §6 — BOTTOM NAV PILL
   ========================================================================== */
#nav {
  position: fixed; bottom: 24px;
  left: 50%; transform: translateX(-50%) translateY(80px);
  z-index: var(--z-nav);
  background: rgba(14,12,9,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--skill) 20%, transparent);
  border-radius: 100px;
  padding: 8px 20px;
  display: flex; align-items: center; gap: 14px;
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone-400);
  transition: transform .6s var(--ec), opacity .6s ease;
  opacity: 0;
  white-space: nowrap;
}
#nav.on { transform: translateX(-50%) translateY(0); opacity: 1; }
#nch { color: var(--gold); font-weight: 600; font-family: var(--fs); font-style: italic; }
.n-sep { color: var(--stone-700); }
#nsec { color: #fff; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
#npct { color: var(--stone-600); margin-left: 4px; }


/* ==========================================================================
   §7 — REVEAL ENGINE
   ========================================================================== */
.rv {
  opacity: 0; transform: translateY(30px);
  transition: opacity .9s var(--ec), transform .9s var(--ec);
}
.rv-l {
  opacity: 0; transform: translateX(-28px);
  transition: opacity .8s var(--ec), transform .8s var(--ec);
}
.rv-r {
  opacity: 0; transform: translateX(28px);
  transition: opacity .8s var(--ec), transform .8s var(--ec);
}
.rv-s {
  opacity: 0; transform: scale(.93);
  transition: opacity 1s var(--es), transform 1s var(--es);
}
.rv-line {
  transform: scaleX(0); transform-origin: left;
  transition: transform .85s var(--ec);
}
.rv.in, .rv-l.in, .rv-r.in, .rv-s.in { opacity: 1; transform: none; }
.rv-line.in { transform: scaleX(1); }

/* Stagger group */
.rvg > .rv:nth-child(1) { transition-delay: .00s; }
.rvg > .rv:nth-child(2) { transition-delay: .13s; }
.rvg > .rv:nth-child(3) { transition-delay: .26s; }
.rvg > .rv:nth-child(4) { transition-delay: .39s; }
.rvg > .rv:nth-child(5) { transition-delay: .52s; }
.rvg > .rv:nth-child(6) { transition-delay: .65s; }


/* ==========================================================================
   §8 — HERO SECTION
   ========================================================================== */
#hero {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--cinema-bg);
  position: relative;
}
.h-amb {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}
.h-amb::before {
  content: '';
  position: absolute;
  width: 80vmax; height: 80vmax;
  border-radius: 50%;
  top: -30%; left: -20%;
  background: radial-gradient(circle, color-mix(in srgb, var(--skill) 7%, transparent) 0%, transparent 60%);
  animation: amb 9s ease-in-out infinite alternate;
}
.h-amb::after {
  content: '';
  position: absolute;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  bottom: -10%; right: -10%;
  background: radial-gradient(circle, rgba(200,164,90,.05) 0%, transparent 60%);
  animation: amb 13s ease-in-out infinite alternate-reverse;
}
@keyframes amb {
  from { transform: scale(1); }
  to { transform: scale(1.08) translate(3%, 2%); }
}

/* Ghost title — massive serif behind hero */
.h-ghost {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  font-family: var(--fs);
  font-size: clamp(5rem, 20vw, 18rem);
  font-weight: 700;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.022);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* Top bar inside hero */
.h-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(20px, 4vw, 36px) clamp(24px, 5vw, 60px);
  position: relative; z-index: 1;
}
.h-brand {
  font-size: .7rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--stone-400);
  text-decoration: none;
}
.h-brand strong { color: var(--gold); }
.h-pill {
  font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase;
  background: rgba(200,164,90,.12);
  border: 1px solid rgba(200,164,90,.3);
  color: var(--gold);
  padding: 5px 14px;
  border-radius: 100px;
  text-decoration: none;
  transition: background .3s ease;
}
.h-pill:hover { background: rgba(200,164,90,.22); }

/* Hero body */
.h-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(20px, 5vw, 60px) clamp(24px, 5vw, 60px);
  position: relative; z-index: 1;
  gap: clamp(16px, 3vw, 26px);
}
.h-eye { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.h-dash { width: 24px; height: 2px; background: var(--gold); }
.h-cat {
  font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--stone-500);
}
.h-cat span { color: var(--skill); }

/* Hero title */
.h-title {
  font-family: var(--fs);
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  font-weight: 300;
  line-height: 1.0;
  color: #fff;
}
.h-title em { color: var(--gold); font-style: italic; }
.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ec), transform .5s var(--ec);
}
.word.in { opacity: 1; transform: none; }

/* Hero subtitle */
.h-sub {
  font-size: clamp(.88rem, 2vw, 1.05rem);
  color: var(--stone-400);
  max-width: 600px;
  line-height: 1.75;
}
.h-sub strong { color: #fff; }

/* Hero stats grid */
.h-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 14px;
  overflow: hidden;
  max-width: 580px;
}
.h-stat {
  padding: 18px 14px;
  background: rgba(14,12,9,.6);
  text-align: center;
}
.h-stat-n {
  font-family: var(--fs);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 600;
  color: var(--gold);
  display: block;
}
.h-stat-l {
  font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone-600);
}
@media (max-width: 600px) {
  .h-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Scroll cue */
.h-cue {
  display: flex; align-items: center; gap: 10px;
  font-size: .68rem; letter-spacing: .1em;
  color: var(--stone-700);
  text-transform: uppercase;
}
.h-cue::before { content: ''; width: 20px; height: 1px; background: var(--stone-700); }
.h-cue::after { content: '↓'; font-size: 1rem; animation: bob .8s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(4px); } }

/* Hero strip — metadata row at bottom of hero */
.h-strip {
  background: rgba(200,164,90,.06);
  border-top: 1px solid rgba(200,164,90,.15);
  padding: 14px clamp(24px, 5vw, 60px);
  display: flex; gap: clamp(16px, 4vw, 40px);
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.h-strip-item {
  font-size: .65rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--stone-600);
}
.h-strip-item strong { color: var(--stone-300); }


/* ==========================================================================
   §9 — TED'S NOTE (Pull-quote)
   ========================================================================== */
.tn-wrap {
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative;
  background: var(--cinema-bg);
}
.tn-deco {
  position: absolute;
  top: -40px; left: clamp(20px, 5vw, 60px);
  font-family: var(--fs);
  font-size: clamp(8rem, 22vw, 20rem);
  line-height: 1;
  color: rgba(200,164,90,.05);
  pointer-events: none;
  user-select: none;
}
.tn-inner {
  position: relative; z-index: 1;
  max-width: 780px;
}
.tn-badge {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
}
.tn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.tn-tag {
  font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--stone-500);
}
.tn-text {
  font-family: var(--fs);
  font-size: clamp(1.3rem, 3.5vw, 2.2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: #fff;
  margin-bottom: 20px;
}
.tn-attr {
  font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--stone-500);
}
/* Arabic quote */
.tn-ar {
  margin-top: 20px;
  font-family: var(--fa);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--stone-500);
  direction: rtl;
  text-align: right;
  line-height: 1.8;
}


/* ==========================================================================
   §10 — CHAPTER BREAK
   ========================================================================== */
.chap {
  padding: clamp(60px, 8vw, 100px) 0;
  position: relative; overflow: hidden;
  background: var(--cinema-bg-2);
  border-top: 1px solid rgba(255,255,255,.04);
}
.chap-ghost {
  position: absolute;
  top: 50%; left: clamp(20px, 5vw, 60px);
  transform: translateY(-50%);
  font-family: var(--fs);
  font-size: clamp(5rem, 18vw, 14rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(255,255,255,.022);
  pointer-events: none;
  user-select: none;
}
.chap-body {
  position: relative; z-index: 1;
  padding: 0 clamp(24px, 5vw, 60px);
}
.chap-lbl {
  display: block;
  font-size: .63rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--stone-600);
  margin-bottom: 10px;
}
.chap-num {
  display: block;
  font-family: var(--fn);
  font-size: .9rem; font-weight: 800;
  color: var(--gold);
  letter-spacing: .05em;
  margin-bottom: 14px;
}
.chap-rule {
  display: block;
  height: 1px;
  background: rgba(200,164,90,.3);
  width: 60px;
  margin-bottom: 20px;
}
.chap-title {
  font-family: var(--fs);
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
}
.chap-title em { color: var(--gold); font-style: italic; }
.chap-desc {
  font-size: .88rem; color: var(--stone-500);
  margin-top: 14px; max-width: 500px; line-height: 1.6;
}
/* Ted's signature */
.chap-sig {
  margin-top: 24px;
  font-family: var(--fh);
  font-size: 1.6rem;
  color: var(--gold);
  opacity: 0;
  transition: opacity 1.2s ease .6s;
}
.chap-sig.in { opacity: 1; }


/* ==========================================================================
   §11 — CONTENT LAYOUT
   ========================================================================== */
.cw { max-width: 1200px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 60px); }

/* Section typography */
.s-over {
  display: block;
  font-size: .63rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--stone-600);
  margin-bottom: 10px;
}
.s-ttl {
  font-family: var(--fs);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 300;
  color: #fff; line-height: 1.1;
  margin-bottom: 14px;
}
.s-ttl em { color: var(--gold); font-style: italic; }
.s-body {
  font-size: .88rem; color: var(--stone-500);
  max-width: 580px; line-height: 1.7;
}

/* Lesson content blocks */
.lesson-content {
  background: rgba(255,255,255,.02);
  border-radius: 14px;
  padding: 24px;
  margin: 20px 0;
}
.lesson-content h3 {
  font-family: var(--fs);
  font-size: 1.4rem; font-weight: 600;
  color: #fff;
  margin: 20px 0 12px;
}
.lesson-content h4 {
  font-family: var(--fn);
  font-size: 1rem; font-weight: 700;
  color: var(--gold);
  margin: 18px 0 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lesson-content p {
  font-size: .9rem; color: var(--stone-300);
  margin-bottom: 14px; line-height: 1.7;
}
.lesson-content ul { margin: 12px 0 12px 20px; }
.lesson-content li {
  font-size: .88rem; color: var(--stone-400);
  margin-bottom: 8px; line-height: 1.6;
}
.lesson-content strong { color: var(--gold); }
.lesson-content ol { margin: 12px 0 12px 20px; }
.lesson-content ol li { color: var(--stone-400); margin-bottom: 8px; font-size: .88rem; }

/* Pro tip callout */
.pro-tip {
  background: rgba(200,164,90,.08);
  border-left: 3px solid var(--gold);
  padding: 16px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
}
.pro-tip em {
  font-family: var(--fs);
  font-size: 1.1rem;
  font-style: italic;
  color: #fff;
}

/* Practice box */
.practice-box {
  background: color-mix(in srgb, var(--skill) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--skill) 20%, transparent);
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
}
.practice-box h4 { color: var(--skill); margin-bottom: 12px; }
.practice-box p {
  font-size: .9rem; color: var(--stone-300);
  font-style: italic; margin-bottom: 12px;
}

/* Resource card grid */
.res-wrap { padding: clamp(50px, 6vw, 80px) 0; }
.res-intro { margin-bottom: 36px; }
.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
.rc {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .3s var(--es), border-color .3s ease, background .3s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.rc:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,.055);
  border-color: rgba(200,164,90,.25);
}
.rc-bar { height: 3px; }
.rc-body { padding: 22px; }
.rc-top {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
}
.rc-n {
  font-family: var(--fs);
  font-size: 2.2rem; font-weight: 600;
  line-height: 1;
  color: rgba(200,164,90,.15);
}
.rc-badge {
  font-size: .55rem; letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  font-weight: 700;
}
/* Skill badge variants */
.rc-badge.rdg { background: rgba(34,197,94,.15); color: var(--rdg); border: 1px solid rgba(34,197,94,.3); }
.rc-badge.spk { background: rgba(59,130,246,.15); color: var(--spk); border: 1px solid rgba(59,130,246,.3); }
.rc-badge.lst { background: rgba(168,85,247,.15); color: var(--lst); border: 1px solid rgba(168,85,247,.3); }
.rc-badge.wt1 { background: rgba(234,179,8,.15); color: var(--wt1); border: 1px solid rgba(234,179,8,.3); }
.rc-badge.wt2 { background: rgba(239,68,68,.15); color: var(--wt2); border: 1px solid rgba(239,68,68,.3); }
.rc-badge.voc { background: rgba(20,184,166,.15); color: var(--voc); border: 1px solid rgba(20,184,166,.3); }

.rc-name {
  font-family: var(--fs);
  font-size: 1.1rem; font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.25;
}
.rc-desc {
  font-size: .75rem; color: var(--stone-500);
  line-height: 1.65;
  margin-bottom: 14px;
}
.rc-meta {
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.rc-time {
  font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--stone-600);
  display: flex; align-items: center; gap: 6px;
}
.rc-time::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%; background: var(--gold);
}
.rc-lessons {
  font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--stone-600);
  margin-left: auto;
}
.rc-lessons strong { color: var(--stone-300); }


/* ==========================================================================
   §12 — INTERACTIVE COMPONENTS
   ========================================================================== */

/* ── 12.1 Timed Drill ── */
.drill-timer {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 16px;
  display: inline-flex; align-items: center; gap: 14px;
  margin: 10px 0;
}
.dt-disp {
  font-family: var(--fm);
  font-size: 1.8rem; font-weight: 700;
  color: var(--gold);
  min-width: 80px; text-align: center;
}
.dt-disp.running { color: var(--spk); }
.dt-disp.urgent { color: var(--wt2); animation: pulse .5s ease-in-out infinite; }
.dt-disp.done { color: var(--rdg); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.dt-btn {
  background: rgba(200,164,90,.15);
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 8px 18px;
  border-radius: 8px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
  min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
.dt-btn:hover { background: rgba(200,164,90,.25); }
.dt-btn.running { background: var(--spk); border-color: var(--spk); color: #fff; }
.dt-btn.done { background: var(--rdg); border-color: var(--rdg); color: #fff; }

/* ── 12.2 Tap-to-Reveal ── */
.tap-reveal {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 20px;
  margin: 14px 0;
  cursor: pointer;
  transition: all .3s var(--ec);
}
.tap-reveal:hover { border-color: rgba(200,164,90,.2); }
.tap-reveal-q {
  font-family: var(--fs);
  font-size: 1.1rem; font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}
.tap-reveal-hint {
  font-size: .65rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone-600);
}
.tap-reveal-a {
  max-height: 0; overflow: hidden;
  transition: max-height .5s var(--ec), opacity .5s ease;
  opacity: 0;
}
.tap-reveal.open .tap-reveal-a { max-height: 500px; opacity: 1; }
.tap-reveal-a-inner {
  padding-top: 16px; margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  font-size: .88rem; color: var(--stone-300);
  line-height: 1.65;
}
.tap-reveal-a-inner strong { color: var(--gold); }
.tap-reveal-exp {
  max-height: 0; overflow: hidden;
  transition: max-height .5s var(--ec), opacity .5s ease;
  opacity: 0;
}
.tap-reveal.explain .tap-reveal-exp { max-height: 500px; opacity: 1; }
.tap-reveal-exp-inner {
  padding-top: 12px; margin-top: 12px;
  border-top: 1px dashed rgba(200,164,90,.2);
  font-size: .82rem; color: var(--stone-500);
  line-height: 1.6;
  font-style: italic;
}

/* ── 12.3 Checklist with Ring ── */
.cl-wrap {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 22px;
  margin: 20px 0;
}
.cl-h { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.cl-r { position: relative; width: 80px; height: 80px; }
.cl-r svg { transform: rotate(-90deg); }
.cl-r circle { fill: none; stroke-width: 6; }
.cl-r .cl-b { stroke: var(--stone-700); }
.cl-r .cl-p {
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-dashoffset: 226;
  transition: stroke-dashoffset .6s var(--ec);
}
.cl-ct {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.cl-ct-n {
  font-family: var(--fs);
  font-size: 1.8rem; font-weight: 700;
  color: var(--gold);
}
.cl-ls { flex: 1; }
.cl-ls-tl {
  font-family: var(--fs);
  font-size: 1.3rem; font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}
.cl-ls-d { font-size: .8rem; color: var(--stone-500); line-height: 1.6; }
.cl-items { display: grid; gap: 12px; margin-top: 16px; }
.cl-it {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,.02);
  border-radius: 8px;
}
.cl-cb { width: 20px; height: 20px; accent-color: var(--gold); cursor: pointer; }
.cl-lb { font-size: .85rem; color: var(--stone-300); }
.cl-cb:checked + .cl-lb { text-decoration: line-through; color: var(--stone-600); }
#next-cta {
  margin-top: 18px;
  padding: 14px 24px;
  background: rgba(200,164,90,.1);
  border: 1px solid var(--gold);
  border-radius: 10px;
  color: var(--gold);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  cursor: not-allowed;
  transition: all .4s;
}
#next-cta.unlocked { background: var(--gold); color: var(--cinema-bg); cursor: pointer; }

/* ── 12.4 Before/After Slider ── */
.ba-slider {
  position: relative;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
  margin: 20px 0;
}
.ba-pane {
  padding: 24px;
  font-size: .9rem; line-height: 1.7; color: var(--stone-300);
}
.ba-pane h4 { color: var(--gold); margin-bottom: 12px; }
.ba-pane.before { border-bottom: 2px solid rgba(239,68,68,.3); }
.ba-pane.after { border-bottom: 2px solid rgba(34,197,94,.3); }
.ba-divider {
  height: 3px;
  background: linear-gradient(90deg, var(--wt2) 50%, var(--rdg) 50%);
}

/* ── 12.5 Band Score Calculator ── */
.band-calc {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 24px;
  margin: 20px 0;
}
.band-calc-title {
  font-family: var(--fs);
  font-size: 1.3rem; font-weight: 600;
  color: #fff;
  margin-bottom: 20px;
}
.band-row {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px;
}
.band-label {
  font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--stone-500);
  min-width: 130px;
}
.band-slider {
  flex: 1; height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--stone-700);
  border-radius: 2px;
  outline: none;
}
.band-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  border: 2px solid var(--cinema-bg);
  border: 1px solid var(--gold);
}
.band-val {
  font-family: var(--fm);
  font-size: 1rem; font-weight: 700;
  color: var(--gold);
  min-width: 36px;
  text-align: center;
}
.band-result {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center;
}
.band-overall {
  font-family: var(--fs);
  font-size: 3rem; font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.band-desc {
  font-size: .72rem; color: var(--stone-500);
  letter-spacing: .1em; text-transform: uppercase;
  margin-top: 8px;
}

/* ── 12.6 Flashcard Deck ── */
.fc-deck {
  perspective: 800px;
  margin: 20px 0;
}
.fc-card {
  position: relative;
  width: 100%; min-height: 200px;
  transition: transform .6s var(--ec);
  transform-style: preserve-3d;
  cursor: pointer;
}
.fc-card.flipped { transform: rotateY(180deg); }
.fc-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 28px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.fc-front { z-index: 2; }
.fc-back { transform: rotateY(180deg); }
.fc-front h3 {
  font-family: var(--fs);
  font-size: 1.6rem; font-weight: 600;
  color: #fff;
}
.fc-back p { font-size: .9rem; color: var(--stone-300); line-height: 1.65; }
.fc-controls {
  display: flex; gap: 10px;
  margin-top: 14px;
  justify-content: center;
}
.fc-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
  min-height: 44px;
}
.fc-btn.easy { background: rgba(34,197,94,.15); border: 1px solid var(--rdg); color: var(--rdg); }
.fc-btn.hard { background: rgba(234,179,8,.15); border: 1px solid var(--wt1); color: var(--wt1); }
.fc-btn.again { background: rgba(239,68,68,.15); border: 1px solid var(--wt2); color: var(--wt2); }
.fc-progress {
  margin-top: 12px;
  height: 4px;
  background: var(--stone-700);
  border-radius: 2px;
  overflow: hidden;
}
.fc-progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width .4s var(--ec);
}


/* ==========================================================================
   §13 — TIMING DIAGRAM
   ========================================================================== */
.td-wrap { padding: clamp(40px, 5vw, 60px) 0; }
.td-row {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 14px;
  opacity: .3;
  transition: opacity .6s;
}
.td-row.in-view { opacity: 1; }
.td-lbl {
  font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--stone-500);
  min-width: 120px;
}
.td-bar {
  flex: 1; height: 8px;
  background: rgba(255,255,255,.05);
  border-radius: 4px;
  overflow: hidden;
}
.td-fil {
  height: 100%;
  background: linear-gradient(90deg, var(--skill), var(--gold));
  border-radius: 4px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ec);
}
.td-row.in-view .td-fil { transform: scaleX(1); }
.td-val {
  font-family: var(--fm);
  font-size: .85rem; color: var(--gold);
  min-width: 60px; text-align: right;
}


/* ==========================================================================
   §14 — CLOSING & FOOTER
   ========================================================================== */
.cls {
  padding: clamp(60px, 8vw, 100px) 0;
  text-align: center;
  background: var(--cinema-bg);
}
.cls-mono {
  font-family: var(--fm);
  font-size: .6rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--stone-600);
  margin-bottom: 20px;
}
.cls-q {
  font-family: var(--fs);
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  font-style: italic;
  color: var(--stone-400);
  max-width: 600px;
  margin: 0 auto 16px;
  line-height: 1.6;
}
.cls-attr {
  font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--stone-600);
}
.tw-cur {
  display: inline-block;
  width: 2px; height: 1.2em;
  background: var(--gold);
  vertical-align: middle;
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

footer {
  padding: 40px clamp(24px, 5vw, 60px);
  border-top: 1px solid rgba(255,255,255,.05);
  text-align: center;
  background: var(--cinema-bg);
}
.f-brand {
  font-family: var(--fs);
  font-size: 1.1rem;
  color: var(--stone-400);
  margin-bottom: 8px;
}
.f-brand strong, .f-brand em { color: var(--gold); font-style: normal; }
.f-copy { font-size: .72rem; color: var(--stone-600); }
.f-ar {
  font-family: var(--fa);
  font-size: .9rem;
  color: var(--stone-600);
  direction: rtl;
  margin-top: 8px;
}

/* Back link */
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--stone-500);
  text-decoration: none;
  margin-bottom: 20px;
  transition: color .3s;
}
.back-link:hover { color: var(--gold); }
.back-link::before { content: '←'; font-size: 1rem; }


/* ==========================================================================
   §15 — TOOLBAR CONTROLS (B1 / RTL / THEME)
   ========================================================================== */
.tb {
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  color: var(--stone-400);
  padding: 6px 14px;
  font-family: var(--fm);
  font-size: .6rem; font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 100px;
  transition: all .25s ease;
  min-height: 36px;
}
.tb:hover { border-color: var(--gold); color: var(--gold); }
.tb.active {
  background: var(--gold);
  color: var(--cinema-bg);
  border-color: var(--gold);
  border-color: var(--gold);
}
.tb.tb-rtl { font-family: var(--fa); font-size: .85rem; letter-spacing: 0; }
.ctrl-bar {
  position: fixed; top: 48px; right: 0;
  z-index: 9990;
  padding: 10px 16px;
  display: flex; gap: 6px;
  flex-direction: column;
  align-items: flex-end;
}
@media (min-width: 769px) {
  .ctrl-bar { flex-direction: row; top: 0; padding: 7px 16px; }
}

/* RTL mode */
body.rtl-mode .ar-content { display: block; font-family: var(--fa); }
body.rtl-mode .en-content { display: none; }
.ar-content { display: none; }

/* B1 mode */
body.b1-mode .b1-hide { display: none; }
body.b1-mode .b1-show { display: block; }
.b1-show { display: none; }


/* ==========================================================================
   §16 — BACKGROUND HELPERS
   ========================================================================== */
.bg-ink  { background: var(--cinema-bg); }
.bg-mid  { background: var(--cinema-bg-3); }
.bg-dark { background: var(--cinema-bg-2); }


/* ==========================================================================
   §16b — ADDITIONAL SEMANTIC COLOURS
   ========================================================================== */
:root {
  --tr: #ef4444;   /* Trap / wrong / danger */
}


/* ==========================================================================
   §16c — PROCESS FLOW (pf-*) — Used in Listening S1/S2 pages
   ========================================================================== */
.pf-wrap {
  display: flex; flex-direction: column; gap: 0;
  position: relative;
}
.pf-step {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 24px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  transition: border-color .3s;
}
.pf-step:hover { border-color: rgba(200,164,90,.25); }
.pf-n {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--cinema-bg);
  font-family: var(--fs);
  font-size: 1.3rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border-left: 2px solid var(--gold);
}
.pf-body { flex: 1; }
.pf-ttl {
  font-family: var(--fs);
  font-size: 1.15rem; font-weight: 600;
  color: #fff; margin-bottom: 8px;
}
.pf-desc {
  font-size: .85rem; color: var(--stone-400); line-height: 1.7;
}
.pf-conn {
  width: 2px; height: 28px; margin: 0 auto;
  background: linear-gradient(to bottom, rgba(200,164,90,.3), transparent);
}


/* ==========================================================================
   §16d — COMPARISON TABLE (cmp-*) — Used in lesson pages
   ========================================================================== */
.cmp-wrap {
  padding: clamp(40px, 6vw, 70px) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cmp {
  width: 100%; border-collapse: collapse;
  font-size: .82rem; margin-top: 20px;
  min-width: 500px;
}
.cmp th {
  font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--stone-600);
  padding: 12px 16px; text-align: left;
  border-bottom: 2px solid rgba(255,255,255,.08);
}
.cmp td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--stone-400); line-height: 1.55; vertical-align: top;
}
.cmp tr:nth-child(even) td { background: rgba(255,255,255,.015); }
.cmp td:first-child { color: var(--stone-200); font-weight: 600; }
.cmp td:nth-child(2) { color: var(--tr); }
.cmp td:nth-child(3) { color: var(--rdg); }


/* ==========================================================================
   §16e — ANIMATED STAT COUNTER (sv class)
   ========================================================================== */
.h-stat-n.gold { color: var(--gold); }
.sv { color: var(--gold); }


/* ==========================================================================
   §16f — MULTI-PANE BA SLIDER (Vocabulary page variant)
   ========================================================================== */
.ba-slider > .ba-pane {
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ba-slider > .ba-pane:last-child { border-bottom: none; }


/* ==========================================================================
   §17 — ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
*:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  #brand-bar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  #nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
}


/* ==========================================================================
   §18 — RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .ctrl-bar { top: 48px; right: 8px; padding: 8px; }
  .chap-ghost { font-size: clamp(4rem, 16vw, 8rem); }
  .h-stats { grid-template-columns: repeat(2, 1fr); }
  .h-strip { flex-direction: column; gap: 8px; }
  .td-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .td-lbl { min-width: 0; }
  .td-val { text-align: left; }
  .band-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .band-label { min-width: 0; }
}


/* ==========================================================================
   §19 — SCROLL-PINNED SEQUENCES
   The "set piece" teaching moment: section pins, content builds step-by-step
   ========================================================================== */

/* Outer scroll container — provides scroll distance */
.pin-outer {
  position: relative;
  height: 300svh; /* 3× viewport = scroll time */
}

/* Inner sticky viewport */
.pin-inner {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 60px);
}

/* Overline above pinned sequence */
.pin-over {
  font-size: .63rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stone-600);
  margin-bottom: 20px;
  text-align: center;
}

/* Individual step in a pinned sequence */
.pin-step {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 60px);
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .6s var(--ec), transform .6s var(--ec);
  pointer-events: none;
  text-align: center;
}
.pin-step.ps-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.pin-step.ps-exit {
  opacity: 0;
  transform: translateY(-30px);
}

/* Step number badge */
.pin-step-n {
  font-family: var(--fm);
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Step content */
.pin-step-title {
  font-family: var(--fs);
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 16px;
}
.pin-step-title em { color: var(--gold); font-style: italic; }

.pin-step-body {
  font-size: clamp(.88rem, 2vw, 1.05rem);
  color: var(--stone-400);
  max-width: 560px;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Step example block */
.pin-step-ex {
  background: rgba(200,164,90,.06);
  border: 1px solid rgba(200,164,90,.18);
  border-radius: 14px;
  padding: 20px 28px;
  font-family: var(--fs);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-style: italic;
  color: #fff;
  max-width: 620px;
  line-height: 1.6;
}

/* Scroll progress dots */
.pin-dots {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
}
.pin-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--stone-700);
  transition: background .3s, transform .3s;
}
.pin-dot.active {
  background: var(--gold);
  transform: scale(1.5);
}

/* Skip button */
.pin-skip {
  position: absolute;
  bottom: 28px;
  right: 28px;
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone-600);
  cursor: pointer;
  transition: color .3s;
  background: none; border: none;
  font-family: var(--fn);
  padding: 8px;
}
.pin-skip:hover { color: var(--gold); }
.pin-skip::after { content: ' ↓'; }

/* Progress arc around pinned section */
.pin-progress-arc {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pin-arc-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--stone-700);
  transition: all .4s var(--ec);
}
.pin-arc-dot.done {
  background: var(--gold);
  border: 1px solid var(--gold);
}


/* ==========================================================================
   §20 — SPOTLIGHT CURSOR EFFECT
   Radial glow follows mouse within cards
   ========================================================================== */

.spot-zone {
  position: relative;
  overflow: hidden;
}

/* The spotlight overlay — driven by JS CSS vars --mx --my */
.spot-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    600px circle at var(--mx, -200px) var(--my, -200px),
    rgba(200,164,90,.06) 0%,
    transparent 40%
  );
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
.spot-zone:hover::before { opacity: 1; }

/* Individual spotlight card — used on .rc cards etc. */
.rc.spot-zone {
  will-change: transform;
}


/* ==========================================================================
   §21 — ANIMATED GRADIENT BORDER (Border Beam)
   A gradient light travels around important element borders
   ========================================================================== */

.border-beam {
  position: relative;
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 1px; /* contains the beam */
  overflow: hidden;
}

/* The beam layer */
.border-beam::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 60%,
    color-mix(in srgb, var(--skill) 90%, var(--gold)) 75%,
    var(--gold) 80%,
    color-mix(in srgb, var(--skill) 90%, var(--gold)) 85%,
    transparent 95%
  );
  animation: beamSpin 4s linear infinite;
  pointer-events: none;
}

/* Inner content surface */
.border-beam > * {
  position: relative;
  z-index: 1;
}

/* Solid background inside beam wrapper */
.border-beam-inner {
  background: var(--cinema-bg-3);
  border-radius: 13px;
  overflow: hidden;
}

@keyframes beamSpin {
  to { --beam-angle: 360deg; }
}

/* Register custom property for smooth animation */
@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Subtle variant — thinner, dimmer */
.border-beam.beam-subtle::before {
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 70%,
    rgba(200,164,90,.4) 82%,
    transparent 92%
  );
  animation-duration: 6s;
}


/* ==========================================================================
   §22 — PARTICLE HERO CANVAS
   Canvas element for floating gold dust particles
   ========================================================================== */

#hero-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
}


/* ==========================================================================
   §23 — TEXT SHIMMER & HIGHLIGHT
   Two variants: traveling shimmer on gold text, sequential word highlight
   ========================================================================== */

/* ── Shimmer (gold gradient sweeps left→right) ── */
.shimmer-text {
  background: linear-gradient(
    105deg,
    var(--gold) 0%,
    var(--gold-light) 25%,
    #fff 40%,
    var(--gold-light) 55%,
    var(--gold) 100%
  );
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmerMove 4s ease-in-out infinite;
}

@keyframes shimmerMove {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── Highlight Read (words light up sequentially) ── */
.highlight-read span.hl-word {
  display: inline;
  transition: background-color .35s ease, color .35s ease;
  border-radius: 3px;
  padding: 0 2px;
}
.highlight-read span.hl-word.hl-lit {
  background-color: rgba(200,164,90,.22);
  color: #fff;
}


/* ==========================================================================
   §24 — 3D CARD TILT
   Cards rotate in 3D following mouse position
   ========================================================================== */

.tilt-wrap {
  perspective: 900px;
}

.tilt-card {
  transform-style: preserve-3d;
  transition: transform .15s ease;
  will-change: transform;
  position: relative;
  overflow: hidden;
}

/* Shine overlay moves with tilt */
.tilt-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 40%,
    rgba(255,255,255,.03) 50%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 10;
}
.tilt-card:hover::after { opacity: 1; }

/* When tilting, subtle shadow lifts */
.tilt-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}


/* ==========================================================================
   §25 — BENTO GRID LAYOUT
   Mixed-size card grid for visual hierarchy
   ========================================================================== */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}

/* Wide card takes 2 columns */
.bento-wide {
  grid-column: span 2;
}

/* Tall card takes 2 rows */
.bento-tall {
  grid-row: span 2;
}

/* Featured card (wide) gets gradient hero treatment */
.bento-hero {
  grid-column: span 2;
  background: linear-gradient(
    135deg,
    rgba(200,164,90,.12) 0%,
    rgba(200,164,90,.04) 100%
  );
  border: 1px solid rgba(200,164,90,.25);
}

/* Responsive: collapse spans on mobile */
@media (max-width: 600px) {
  .bento-wide, .bento-hero { grid-column: span 1; }
  .bento-tall { grid-row: span 1; }
}

/* Keep rc card styles intact within bento */
.bento-grid .rc { height: 100%; }


/* ==========================================================================
   §26 — ANIMATED TAB SWITCHER
   Tabs with sliding indicator + content crossfade
   ========================================================================== */

.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 0;
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }

.tab-btn {
  position: relative;
  flex-shrink: 0;
  padding: 12px 20px;
  font-family: var(--fn);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone-500);
  cursor: pointer;
  background: none;
  border: none;
  transition: color .3s ease;
  white-space: nowrap;
}
.tab-btn:hover { color: var(--stone-200); }
.tab-btn.active { color: var(--gold); }

/* Sliding indicator */
.tab-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--gold);
  border-radius: 2px 2px 0 0;
  transition: left .35s var(--ec), width .35s var(--ec);
  pointer-events: none;
}

/* Tab panels */
.tab-panels {
  position: relative;
  overflow: hidden;
}

.tab-panel {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ec), transform .4s var(--ec);
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.tab-panel.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  position: relative;
}

/* Tab wrapper */
.tab-wrap {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
  margin: 20px 0;
}

.tab-content-pad {
  padding: clamp(20px, 4vw, 32px);
}


/* ==========================================================================
   §27 — SVG DRAW-ON-SCROLL
   SVG paths animate stroke-dashoffset when section enters view
   ========================================================================== */

/* JS sets stroke-dasharray & stroke-dashoffset via getTotalLength() */
.svg-draw path,
.svg-draw circle,
.svg-draw line,
.svg-draw polyline,
.svg-draw rect {
  transition: stroke-dashoffset 1.4s var(--ec);
}

/* Stagger for multi-element SVG diagrams */
.svg-draw .d1 { transition-delay: .0s; }
.svg-draw .d2 { transition-delay: .2s; }
.svg-draw .d3 { transition-delay: .4s; }
.svg-draw .d4 { transition-delay: .6s; }
.svg-draw .d5 { transition-delay: .8s; }
.svg-draw .d6 { transition-delay: 1.0s; }

/* Common SVG styles for diagrams */
.diagram-svg {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  display: block;
  overflow: visible;
}
.diagram-svg text {
  font-family: var(--fn);
  fill: var(--stone-400);
}
.diagram-svg .d-gold { stroke: var(--gold); }
.diagram-svg .d-skill { stroke: var(--skill); }
.diagram-svg .d-stone { stroke: var(--stone-600); }
.diagram-svg .d-label {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  fill: var(--stone-500);
}
.diagram-svg .d-accent { fill: var(--gold); font-style: italic; }


/* ==========================================================================
   §28 — DRAGGABLE BEFORE/AFTER SLIDER
   Draggable vertical divider reveals before/after content
   ========================================================================== */

.ba-drag-wrap {
  position: relative;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  cursor: col-resize;
  margin: 20px 0;
  background: var(--cinema-bg-3);
}

/* Before panel (underneath clip) */
.ba-drag-before,
.ba-drag-after {
  padding: 28px;
  font-size: .88rem;
  line-height: 1.75;
  color: var(--stone-300);
  overflow: hidden;
  word-break: break-word;
}

.ba-drag-before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: var(--cinema-bg-3);
  z-index: 1;
}

/* Labels sit above before panel */
.ba-drag-labels { position: relative; z-index: 3; }

/* After wrap overlay sits above before */
.ba-drag-after-wrap {
  position: relative;
  z-index: 2;
  clip-path: inset(0 0 0 var(--ba-split, 50%));
  transition: none;
}

/* Handle sits above everything */
.ba-drag-handle { z-index: 10; }

/* Before label */
.ba-drag-before-label,
.ba-drag-after-label {
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
  display: block;
}
.ba-drag-before-label { color: var(--wt2); }
.ba-drag-after-label { color: var(--rdg); }

/* After panel inner */
.ba-drag-after {
  background: rgba(255,255,255,.03);
  min-height: 200px;
}

/* Divider handle */
.ba-drag-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-split, 50%);
  transform: translateX(-50%);
  width: 2px;
  background: var(--gold);
  z-index: 10;
  transition: left 0s; /* updated live by JS, no transition */
}

.ba-drag-handle::before {
  content: '↔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--cinema-bg);
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  cursor: col-resize;
}

/* Hint animation on first load */
@keyframes baHint {
  0%   { --ba-split: 50%; }
  30%  { --ba-split: 30%; }
  70%  { --ba-split: 70%; }
  100% { --ba-split: 50%; }
}
.ba-drag-wrap.ba-hint {
  animation: baHint 1.8s var(--ec) forwards;
}

/* Labels container */
.ba-drag-labels {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ba-drag-labels > div {
  flex: 1;
  padding: 10px 18px;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}
.ba-drag-labels .ba-lbl-before { color: var(--wt2); border-right: 1px solid rgba(255,255,255,.06); }
.ba-drag-labels .ba-lbl-after { color: var(--rdg); }


/* ==========================================================================
   §29 — MAGNETIC BUTTONS
   Buttons subtly follow the mouse cursor when nearby
   ========================================================================== */

.mag-btn {
  will-change: transform;
  transition: transform .4s var(--es);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Magnetic pull active state */
.mag-btn.mag-active {
  transition: transform .08s ease; /* fast while dragging */
}


/* ==========================================================================
   §30 — VERTICAL PROGRESS TIMELINE
   Left-side chapter timeline that fills with gold as user scrolls
   ========================================================================== */

.timeline-wrap {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-nav);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  opacity: 0;
  transition: opacity .6s ease;
}
.timeline-wrap.on { opacity: 1; }

/* Track (grey) */
.tl-track {
  width: 2px;
  height: 120px;
  background: var(--stone-700);
  border-radius: 2px;
  position: relative;
  overflow: visible;
}

/* Fill (gold) */
.tl-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(to bottom, var(--skill), var(--gold));
  border-radius: 2px;
  transition: height .15s var(--el);
}

/* Chapter nodes */
.tl-node {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--stone-700);
  border: 2px solid var(--stone-600);
  transition: background .3s, border-color .3s, transform .3s var(--es);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.tl-node.done {
  background: var(--gold);
  border-color: var(--gold);
  border: 1px solid var(--gold);
}
.tl-node.current {
  background: var(--skill);
  border-color: var(--skill);
  transform: scale(1.4);
  border: 1px solid var(--gold);
}

/* Node tooltip */
.tl-node::after {
  content: attr(data-chapter);
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--fm);
  font-size: .55rem;
  letter-spacing: .1em;
  color: var(--stone-500);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.tl-node:hover::after { opacity: 1; }

/* Connector between nodes */
.tl-conn {
  width: 2px;
  height: 24px;
  background: var(--stone-700);
  transition: background .3s;
}
.tl-conn.done { background: var(--gold); }

/* Hide on mobile — too narrow */
@media (max-width: 900px) {
  .timeline-wrap { display: none; }
}


/* ==========================================================================
   §31 — UTILITY ADDITIONS
   Small helpers used by the new systems
   ========================================================================== */

/* Golden highlight text (for inline emphasis) */
.hl-gold {
  color: var(--gold);
  font-style: italic;
}

/* Animated counter with glow */
.glow-num {
  color: var(--gold);

  font-family: var(--fs);
  font-weight: 600;
}

/* Full-width section divider with label */
.sec-divide {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(40px, 6vw, 70px) 0;
  padding: 0 clamp(24px, 5vw, 60px);
}
.sec-divide-line { flex: 1; height: 1px; background: rgba(255,255,255,.06); }
.sec-divide-label {
  font-size: .6rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--stone-600);
  white-space: nowrap;
}

/* Interactive pill badge (clickable filter) */
.pill-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 100px;
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--stone-500);
  transition: all .25s ease;
  background: rgba(255,255,255,.03);
}
.pill-filter:hover,
.pill-filter.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(200,164,90,.08);
}

/* Morphing word display (used in scroll-pinned word upgrade) */
.morph-word {
  display: inline-block;
  font-family: var(--fs);
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 300;
  font-style: italic;
  color: var(--stone-600);
  transition: opacity .5s ease, transform .5s var(--ec), color .5s ease;
}
.morph-word.morph-out {
  opacity: 0;
  transform: translateY(-20px);
}
.morph-word.morph-in {
  opacity: 1;
  transform: none;
  color: var(--gold);
}

/* Arrow connector for process flows */
.flow-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  color: var(--gold);
  opacity: .4;
  font-size: 1.4rem;
}

/* Horizontal scroll section for exam room */
.h-scroll-wrap {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 clamp(24px, 5vw, 60px);
  scrollbar-width: none;
}
.h-scroll-wrap::-webkit-scrollbar { display: none; }

.h-scroll-card {
  flex: 0 0 min(80vw, 480px);
  scroll-snap-align: start;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 28px;
  transition: border-color .3s;
}
.h-scroll-card:hover { border-color: rgba(200,164,90,.2); }

/* Horizontal scroll indicator */
.h-scroll-ind {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
}
.h-scroll-pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--stone-700);
  transition: all .3s;
}
.h-scroll-pip.active {
  background: var(--gold);
  width: 18px;
  border-radius: 3px;
}

/* ══════════════════════════════════════════════════════════════
   §29  TAP-TO-REVEAL CARDS
   ══════════════════════════════════════════════════════════════ */
.tap-reveal {
  background: var(--cinema-bg-2);
  border: 1px solid var(--cinema-border);
  border-radius: 12px;
  margin-bottom: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .25s;
}
.tap-reveal:hover { border-color: var(--gold); }
.tap-reveal-q {
  padding: 18px 20px;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--stone-200);
}
.tap-reveal-hint {
  padding: 0 20px 14px;
  font-size: .75rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .06em;
  color: var(--gold);
  text-transform: uppercase;
}
.tap-reveal-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4,0,.2,1);
}
.tap-reveal.open .tap-reveal-a { max-height: 600px; }
.tap-reveal.open .tap-reveal-hint { display: none; }
.tap-reveal-a-inner {
  padding: 16px 20px 20px;
  font-size: .88rem;
  line-height: 1.75;
  color: var(--stone-300);
  border-top: 1px solid var(--cinema-border);
}

/* ══════════════════════════════════════════════════════════════
   §30  TIMING DIAGRAM (animated bar chart)
   ══════════════════════════════════════════════════════════════ */
.td-wrap {
  background: var(--cinema-bg-2);
  border: 1px solid var(--cinema-border);
  border-radius: 12px;
  padding: 22px;
}
.td-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.td-row:last-child { border-bottom: none; }
.td-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--stone-500);
  text-transform: uppercase;
  min-width: 90px;
  flex-shrink: 0;
}
.td-bar {
  flex: 1;
  height: 6px;
  background: var(--cinema-bg-3);
  border-radius: 3px;
  overflow: hidden;
}
.td-fil {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-dim, #a08030));
  border-radius: 3px;
  width: 0;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.td-wrap.visible .td-fil,
.rv.visible .td-fil { width: var(--tw, 50%); }
.td-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--gold);
  min-width: 52px;
  text-align: right;
  flex-shrink: 0;
}

/* ==========================================================================
   §P2 — CONSOLIDATED TYPE SCALE (5 utility classes)
   Additive layer — existing classes preserved for backwards compatibility.
   Hero → Section → Card → Sub → Label
   ========================================================================== */
.cm-h1 { font-family: var(--fs); font-size: clamp(3rem, 8vw, 8rem); font-weight: 300; line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.cm-h2 { font-family: var(--fs); font-size: clamp(2rem, 5vw, 4rem); font-weight: 300; line-height: 1.1; color: #fff; }
.cm-h3 { font-family: var(--fn); font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 700; line-height: 1.25; color: #fff; }
.cm-h4 { font-family: var(--fn); font-size: 1.1rem; font-weight: 700; line-height: 1.4; color: #fff; }
.cm-label { font-family: var(--fn); font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

/* ==========================================================================
   §P2 — SPACING NORMALIZATION (8px grid corrections)
   ========================================================================== */
.ctrl-bar { gap: 8px; padding: 8px 16px; }

/* ==========================================================================
   §P3 — DESKTOP BREAKPOINTS
   1024px — tablet landscape / small desktop
   1280px — standard desktop
   ========================================================================== */
@media (min-width: 1024px) {
  /* Content well max-width steps up for tablet landscape */
  .cw { max-width: 960px; }

  /* Hero title scales up */
  .h-title { font-size: clamp(3.5rem, 6vw, 7rem); }

  /* Chapter ghost text gets more dramatic */
  .chap-ghost { font-size: clamp(8rem, 20vw, 18rem); }

  /* Lesson cards shift to 2-column grid */
  .res-grid { grid-template-columns: repeat(2, 1fr); }

  /* Section overlines and descriptors breathe more */
  .s-body { max-width: 640px; font-size: 1rem; }

  /* Scroll-pinned sequences take full viewport height */
  .pin-outer { min-height: 300vh; }
  .pin-inner { min-height: 100vh; }

  /* Nav sidebar shows chapter labels at wider widths */
  .tl-node::after { opacity: 1; }

  /* Prose content max-width */
  .lesson-content { max-width: 680px; }

  /* Hero stat row gets horizontal layout */
  .h-stats { gap: 48px; }
  .h-stat-n { font-size: clamp(2rem, 3vw, 3.5rem); }
}

@media (min-width: 1280px) {
  /* Full desktop content well */
  .cw { max-width: 1100px; }

  /* Three-column lesson grids on large screens */
  .res-grid { grid-template-columns: repeat(3, 1fr); }

  /* Before-after slider gets fixed wider frame */
  .ba-wrap { max-width: 900px; }

  /* Tilt cards in a 3-up row */
  .tilt-row { grid-template-columns: repeat(3, 1fr); }

  /* ctrl-bar fixed right with more breathing room */
  .ctrl-bar { right: 24px; gap: 8px; }

  /* Timeline nav extended on large viewports */
  .timeline-wrap { left: clamp(16px, 2vw, 32px); }

  /* Hero layout: title + stat side by side */
  .h-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 64px;
  }

  /* Section intros get 50% max on widescreen */
  .res-intro { max-width: 50%; }

  /* Practice boxes in 2-up on widescreen */
  .practice-grid { grid-template-columns: repeat(2, 1fr); }

  /* Vocab table wider on large screens */
  .voc-table { font-size: .95rem; }
}

/* ==========================================================================
   §32 — PEDAGOGICAL ANIMATIONS (PEDAGOGY ELEVATION)
   ========================================================================== */
@keyframes slideDownReveal {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Concept Check Feedback smooth reveal */
.cc-fb.show {
  display: block !important;
  animation: slideDownReveal 0.35s var(--ec) forwards !important;
}

/* Concept Check Options interactive transitions */
.cc-opt {
  transition: border-color 0.15s var(--ec),
              background 0.15s var(--ec),
              color 0.15s var(--ec),
              transform 0.15s var(--ec),
              box-shadow 0.15s var(--ec) !important;
}
.cc-opt:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.01);
  box-shadow: 0 4px 12px rgba(200, 164, 90, 0.08);
}
.cc-opt:active:not(:disabled) {
  transform: translateY(0) scale(0.99);
}

/* Toolbar Controls interactive micro-interactions */
.tb {
  transition: border-color 0.25s var(--ec),
              background-color 0.25s var(--ec),
              color 0.25s var(--ec),
              transform 0.2s var(--ec),
              box-shadow 0.2s var(--ec) !important;
}
.tb:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 4px 12px rgba(200, 164, 90, 0.15);
}
.tb:active {
  transform: translateY(0) scale(0.98);
}

/* Smooth Language & Simplicity Swaps */
@keyframes contentFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
body.b1-mode .b1-show {
  display: block;
  animation: contentFadeIn 0.3s ease-out forwards;
}
body.rtl-mode .ar-content {
  display: block;
  animation: contentFadeIn 0.3s ease-out forwards;
}