/* ═══════════════════════════════════════════════════════════════
   EUPHORIA — Season 3 · neon-noir landing experience
   Mobile-first · touch-first · reduced-motion aware
   ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#07030f;
  --bg-2:#0d0620;
  --ink:#f3edff;
  --ink-dim:rgba(222,210,255,.62);
  --ink-faint:rgba(222,210,255,.38);
  --violet:#8b3dff;
  --violet-deep:#2b1055;
  --pink:#ff3ea5;
  --cyan:#37e2ff;
  --gold:#ffc46b;
  --line:rgba(160,110,255,.18);
  --font-display:'Italiana', 'Didot', 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --font-hand:'Caveat', 'Comic Sans MS', cursive;
  --pad: clamp(1.25rem, 5vw, 6rem);
  --rad: 18px;
  --ease-lux: cubic-bezier(.19,1,.22,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--pink); color:#12041c; }
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }
body{ scrollbar-color: var(--violet) var(--bg); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--violet),var(--pink)); border-radius:8px; }

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face{ font-family:'Italiana'; src:url('../assets/fonts/italiana.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../assets/fonts/inter-var.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Caveat'; src:url('../assets/fonts/caveat-var.woff2') format('woff2'); font-weight:400 700; font-style:normal; font-display:swap; }

/* ── Atmosphere layers ─────────────────────────────────────── */
#glitter{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:2;
}
.grain{
  position:fixed; inset:-100px; z-index:3; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%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");
  animation:grainShift 1.1s steps(4) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0); } 25%{ transform:translate(-38px,22px); }
  50%{ transform:translate(24px,-30px); } 75%{ transform:translate(-14px,-18px); }
  100%{ transform:translate(0,0); }
}
.cursor-glow{
  position:fixed; z-index:4; pointer-events:none;
  width:340px; height:340px; left:0; top:0;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,62,165,.16), rgba(139,61,255,.08) 42%, transparent 68%);
  mix-blend-mode:screen; opacity:0; transition:opacity .6s;
  display:none;
}
@media (pointer:fine){ .cursor-glow{ display:block; } }
.progress-bar{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:rgba(160,110,255,.12);
}
.progress-bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--violet), var(--pink), var(--cyan));
  box-shadow:0 0 12px rgba(255,62,165,.8);
}

/* ── Preloader ─────────────────────────────────────────────── */
.preloader{
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:var(--bg);
  transition:opacity .8s var(--ease-lux), visibility .8s;
}
.preloader.done{ opacity:0; visibility:hidden; }
.preloader-inner{ text-align:center; }
.pre-word{
  display:block; font-family:var(--font-display); font-size:clamp(2.4rem,9vw,4.6rem);
  letter-spacing:.08em; color:var(--ink);
  opacity:0; transform:translateY(24px); filter:blur(8px);
  animation:preIn .9s var(--ease-lux) forwards;
}
.pre-word:nth-child(2){ animation-delay:.28s; }
.pre-dot{ color:var(--pink); }
@keyframes preIn{ to{ opacity:1; transform:none; filter:blur(0); } }

/* ── Nav ───────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:1.5rem;
  padding:.85rem var(--pad);
  transition:background .5s, backdrop-filter .5s, box-shadow .5s, transform .5s var(--ease-lux);
}
.nav.scrolled{
  background:rgba(7,3,15,.72);
  -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 var(--line), 0 12px 40px rgba(0,0,0,.45);
}
.nav-logo{
  font-family:var(--font-display); font-size:1.55rem; letter-spacing:.14em;
  background:linear-gradient(120deg,#fff 20%, var(--pink) 55%, var(--violet) 90%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-right:auto; min-height:44px; display:flex; align-items:center;
}
.nav-links{ display:none; gap:1.6rem; }
.nav-links a{
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-dim);
  padding:.6rem 0; position:relative; transition:color .3s; min-height:44px; display:inline-flex; align-items:center;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:6px; height:1px; width:100%;
  background:linear-gradient(90deg,var(--pink),var(--cyan));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease-lux);
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }
.nav-right{ display:flex; align-items:center; gap:.9rem; }
.nav-burger{
  min-width:48px; height:48px; padding:0 12px; display:grid; place-items:center; gap:0;
  position:relative; z-index:70;
}
.nav-burger span{
  display:block; width:24px; height:1.5px; background:var(--ink);
  transition:transform .45s var(--ease-lux), opacity .3s;
  margin:3px 0;
}
.nav-burger[aria-expanded="true"] span:first-child{ transform:translateY(4.7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child{ transform:translateY(-4.7px) rotate(-45deg); }

.mobilemenu{
  position:fixed; inset:0; z-index:65; background:rgba(7,3,15,.9);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease-lux), visibility .5s;
}
.mobilemenu.open{ opacity:1; visibility:visible; }
.mobilemenu nav{ display:flex; flex-direction:column; gap:.35rem; }
.mobilemenu a{
  font-family:var(--font-display); font-size:clamp(2.2rem,9vw,3.6rem); letter-spacing:.05em;
  padding:.35rem 0; min-height:52px; color:var(--ink);
  opacity:0; transform:translateY(30px); filter:blur(6px);
  transition:opacity .6s var(--ease-lux), transform .6s var(--ease-lux), filter .6s, color .3s;
  transition-delay:calc(var(--i) * 60ms);
}
.mobilemenu.open a{ opacity:1; transform:none; filter:blur(0); }
.mobilemenu a:hover, .mobilemenu a:active{ color:var(--pink); }
.mobilemenu-tag{
  margin-top:2.5rem; font-family:var(--font-hand); font-size:1.6rem; color:var(--pink);
  transform:rotate(-2deg);
}

/* ── Buttons / pills ───────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:.8rem 1.7rem; border-radius:999px;
  font-size:.82rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  position:relative; overflow:hidden; transition:transform .35s var(--ease-lux), box-shadow .35s, background .35s, border-color .35s;
  will-change:transform;
}
.btn span{ position:relative; z-index:1; }
.btn-small{ min-height:44px; padding:.55rem 1.2rem; font-size:.7rem; }
.btn-big{ min-height:56px; padding:1rem 2.4rem; font-size:.9rem; }
.btn-solid{
  background:linear-gradient(120deg, var(--violet), var(--pink));
  color:#fff; box-shadow:0 6px 30px rgba(255,62,165,.35);
}
.btn-solid::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg, var(--pink), var(--cyan));
  opacity:0; transition:opacity .4s;
}
.btn-solid:hover::before{ opacity:1; }
.btn-solid:hover{ box-shadow:0 8px 42px rgba(255,62,165,.55); transform:translateY(-2px); }
.btn-ghost{
  border:1px solid rgba(200,160,255,.4); color:var(--ink);
  background:rgba(139,61,255,.06);
}
.btn-ghost:hover{ border-color:var(--cyan); background:rgba(55,226,255,.08); box-shadow:0 0 24px rgba(55,226,255,.18); }
.btn:active{ transform:scale(.96); }
.pill{
  display:inline-flex; align-items:center; min-height:30px;
  padding:.32rem .95rem; border-radius:999px; font-size:.68rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--ink-dim); background:rgba(20,10,40,.5);
}
.pill-hot{ border-color:rgba(255,62,165,.55); color:#ffb9dd; box-shadow:0 0 18px rgba(255,62,165,.22); }

/* ── Shared section furniture ──────────────────────────────── */
.section{ position:relative; z-index:5; padding:clamp(4.5rem,12vh,9rem) var(--pad); }
.section-head{ max-width:1200px; margin:0 auto clamp(2.2rem,6vh,4rem); }
.eyebrow{
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:var(--pink);
  margin-bottom:1.1rem; font-weight:500;
}
.section-title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.8rem, 9vw, 6.2rem); line-height:.98; letter-spacing:.02em;
  text-shadow:0 0 60px rgba(139,61,255,.35);
}
.section-sub{ margin-top:1.2rem; max-width:44ch; color:var(--ink-dim); font-size:clamp(.95rem,2.4vw,1.08rem); }
.caveat{ font-family:var(--font-hand); font-weight:500; color:var(--pink); }
.hint-touch{ display:inline; }
.hint-desk{ display:none; }
@media (pointer:fine){ .hint-touch{ display:none; } .hint-desk{ display:inline; } }

/* Reveal choreography */
.reveal, .reveal-line{
  opacity:0; transform:translateY(46px); filter:blur(10px);
  transition:opacity 1s var(--ease-lux), transform 1s var(--ease-lux), filter 1s var(--ease-lux);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.reveal.in, .reveal-line.in{ opacity:1; transform:none; filter:blur(0); }

/* ── Hero ──────────────────────────────────────────────────── */
.hero{
  position:relative; z-index:5; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:6.5rem var(--pad) 5rem; overflow:hidden;
}
.hero-bg{ position:absolute; inset:-12% 0; z-index:-1; }
.hero-bg picture, .hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-bg img{ transform:scale(1.08); }
.hero-grade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,3,15,.62) 0%, rgba(7,3,15,.28) 34%, rgba(13,6,32,.55) 68%, var(--bg) 100%),
    radial-gradient(90% 60% at 50% 42%, rgba(139,61,255,.28), transparent 70%),
    linear-gradient(120deg, rgba(255,62,165,.16), transparent 40%, rgba(55,226,255,.10));
}
.haze{
  position:absolute; border-radius:50%; filter:blur(70px); mix-blend-mode:screen; opacity:.55;
  will-change:transform;
}
.haze-a{ width:55vw; height:55vw; left:-12vw; top:6vh; background:radial-gradient(circle, rgba(139,61,255,.5), transparent 65%); animation:hazeFloat 16s ease-in-out infinite alternate; }
.haze-b{ width:44vw; height:44vw; right:-10vw; top:30vh; background:radial-gradient(circle, rgba(255,62,165,.34), transparent 65%); animation:hazeFloat 21s ease-in-out infinite alternate-reverse; }
.haze-c{ width:36vw; height:36vw; left:24vw; bottom:-6vh; background:radial-gradient(circle, rgba(55,226,255,.2), transparent 65%); animation:hazeFloat 26s ease-in-out infinite alternate; }
@keyframes hazeFloat{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(6vw,-5vh) scale(1.16); }
}
.hero-content{ position:relative; max-width:1000px; }
.hero-kicker{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:clamp(1.2rem,3vh,2rem); }
.wordmark{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(4.2rem, 17vw, 12.5rem); line-height:.9; letter-spacing:.045em;
  display:inline-block;
}
.wl{
  display:inline-block;
  background:linear-gradient(160deg, #fff 8%, #e6ccff 32%, var(--pink) 62%, var(--violet) 95%);
  background-size:220% 220%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,62,165,.35));
  opacity:0; transform:translateY(60px) rotate(4deg);
  transition:opacity 1.1s var(--ease-lux), transform 1.1s var(--ease-lux);
  animation:sheen 9s ease-in-out infinite alternate;
}
@keyframes sheen{
  from{ background-position:0% 20%; }
  to{ background-position:90% 80%; }
}
.wordmark.on .wl{ opacity:1; transform:none; }
.wordmark.on .wl:nth-child(1){ transition-delay:.05s } .wordmark.on .wl:nth-child(2){ transition-delay:.13s }
.wordmark.on .wl:nth-child(3){ transition-delay:.21s } .wordmark.on .wl:nth-child(4){ transition-delay:.29s }
.wordmark.on .wl:nth-child(5){ transition-delay:.37s } .wordmark.on .wl:nth-child(6){ transition-delay:.45s }
.wordmark.on .wl:nth-child(7){ transition-delay:.53s } .wordmark.on .wl:nth-child(8){ transition-delay:.61s }
.hero-tag{
  font-family:var(--font-hand); font-weight:600;
  font-size:clamp(1.7rem, 5.4vw, 2.9rem); color:var(--pink);
  margin-top:clamp(.6rem,1.6vh,1.2rem); transform:rotate(-1.6deg);
  text-shadow:0 0 24px rgba(255,62,165,.5);
}
.tag-dot{ color:var(--cyan); }
.hero-sub{
  margin:clamp(1.1rem,3vh,1.8rem) auto 0; max-width:56ch;
  color:var(--ink-dim); font-size:clamp(.95rem,2.6vw,1.12rem);
}
.br-desk{ display:none; }
.hero-ctas{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; margin-top:clamp(1.6rem,4vh,2.6rem); }
.hero-meta{ margin-top:clamp(1.2rem,3vh,1.8rem); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint); }
.scroll-cue{
  position:absolute; bottom:max(1.6rem, env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem; min-height:44px; justify-content:flex-end;
}
.cue-text{ font-size:.68rem; letter-spacing:.4em; text-transform:uppercase; color:var(--ink-faint); }
.cue-line{ width:1px; height:44px; background:linear-gradient(var(--pink), transparent); position:relative; overflow:hidden; }
.cue-line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:linear-gradient(var(--cyan), transparent); animation:cueDrop 2.2s var(--ease-lux) infinite;
}
@keyframes cueDrop{ 0%{ top:-100% } 60%,100%{ top:110% } }

/* ── Marquee ───────────────────────────────────────────────── */
.marquee{
  position:relative; z-index:5; overflow:hidden; padding:1.1rem 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(90deg, rgba(43,16,85,.35), rgba(255,62,165,.08), rgba(43,16,85,.35));
}
.marquee-track{
  display:flex; gap:2.6rem; width:max-content; align-items:center;
  animation:marquee 30s linear infinite;
}
.marquee-track span{
  font-family:var(--font-display); font-size:1.25rem; letter-spacing:.18em;
  text-transform:lowercase; white-space:nowrap; color:var(--ink-dim);
}
.marquee-track i{ color:var(--pink); font-style:normal; text-shadow:0 0 12px var(--pink); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ── Chapter ───────────────────────────────────────────────── */
.chapter{
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:clamp(2.5rem,6vw,5rem);
}
.chapter-sticky{ align-self:start; }
.chapter-poster{
  position:relative; border-radius:var(--rad); overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px var(--line), 0 0 60px rgba(139,61,255,.22);
  transform-style:preserve-3d; max-width:420px;
}
.chapter-poster img{ width:100%; }
.chapter-poster figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2rem 1.2rem .9rem;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-dim);
  background:linear-gradient(transparent, rgba(7,3,15,.88));
}
.chapter-note{ margin-top:1rem; font-size:1.5rem; transform:rotate(-2deg); }
.beat{ padding:clamp(1.6rem,4vh,2.6rem) 0; border-bottom:1px solid var(--line); }
.beat:first-of-type{ border-top:0; }
.beat-line{
  font-family:var(--font-display); font-size:clamp(1.7rem,4.6vw,2.6rem); line-height:1.15;
  margin-bottom:.8rem;
  background:linear-gradient(110deg, #fff, #d9baff 55%, var(--pink));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.beat-body{ color:var(--ink-dim); max-width:58ch; }
.beat-note{ margin-top:.7rem; font-size:1.35rem; opacity:.9; transform:rotate(-1deg); }

/* ── Rails (characters) ────────────────────────────────────── */
.rail{
  display:flex; gap:clamp(1rem,2.5vw,1.6rem);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:.5rem var(--pad) 1.6rem; margin:0 calc(var(--pad) * -1);
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail:focus-visible{ outline-offset:-2px; }
.ccard{
  scroll-snap-align:center; flex:0 0 min(78vw, 300px);
  background:linear-gradient(160deg, rgba(43,16,85,.5), rgba(13,6,32,.85));
  border:1px solid var(--line); border-radius:var(--rad); overflow:hidden;
  transform-style:preserve-3d; position:relative;
  transition:border-color .4s, box-shadow .4s;
}
.ccard::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  background:linear-gradient(140deg, rgba(255,62,165,.14), transparent 40%, rgba(55,226,255,.1));
  opacity:0; transition:opacity .45s;
}
.ccard:hover, .ccard:focus-within{ border-color:rgba(255,62,165,.5); box-shadow:0 18px 60px rgba(255,62,165,.18); }
.ccard:hover::before, .ccard:active::before{ opacity:1; }
.ccard:active{ border-color:var(--cyan); }
.ccard-img{ aspect-ratio:4/4.6; overflow:hidden; }
.ccard-img img{
  width:100%; height:100%; object-fit:cover; object-position:center 18%;
  filter:saturate(.85) contrast(1.05); transition:transform .8s var(--ease-lux), filter .5s;
}
.ccard:hover .ccard-img img, .ccard:active .ccard-img img{ transform:scale(1.06); filter:saturate(1.15) contrast(1.08); }
.ccard-body{ padding:1.15rem 1.15rem 1.3rem; }
.ccard-body h3{
  font-family:var(--font-display); font-weight:400; font-size:1.7rem; letter-spacing:.03em; line-height:1.05;
}
.ccard-body h3 span{ display:block; font-size:1.02em; color:var(--pink); }
.ccard-actor{ font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--cyan); margin:.55rem 0 .7rem; }
.memoriam{ color:var(--gold); }
.ccard-status{ font-size:.88rem; color:var(--ink-dim); line-height:1.6; }
.ccard-note{ margin-top:.75rem; font-size:1.25rem; }
.rail-progress{
  height:2px; background:rgba(160,110,255,.14); border-radius:2px;
  max-width:1200px; margin:0 auto; overflow:hidden;
}
.rail-progress span{
  display:block; height:100%; width:12%;
  background:linear-gradient(90deg,var(--violet),var(--pink)); border-radius:2px;
  transition:width .15s linear;
}

/* ── Ensemble (duotone grid) ───────────────────────────────── */
.ensemble-grid{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.9rem,2.5vw,1.6rem);
}
.duo{ position:relative; border-radius:var(--rad); overflow:hidden; aspect-ratio:4/5; border:1px solid var(--line); }
.duo img{
  width:100%; height:100%; object-fit:cover; object-position:center 16%;
  filter:grayscale(1) contrast(1.08) brightness(.9);
  transition:filter .6s var(--ease-lux), transform .8s var(--ease-lux);
}
.duo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(139,61,255,.34), rgba(7,3,15,.05) 45%, rgba(255,62,165,.3));
  mix-blend-mode:color; transition:opacity .6s;
}
.duo:hover img, .duo:active img{ filter:none; transform:scale(1.05); }
.duo:hover::after, .duo:active::after{ opacity:.35; }
.duo figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.8rem 1rem .85rem;
  background:linear-gradient(transparent, rgba(7,3,15,.92));
}
.duo b{ display:block; font-family:var(--font-display); font-weight:400; font-size:1.3rem; letter-spacing:.04em; }
.duo span{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); }
.newcomers{ max-width:1200px; margin:clamp(2rem,5vh,3rem) auto 0; text-align:center; }
.newcomers-label{ font-size:.68rem; letter-spacing:.34em; text-transform:uppercase; color:var(--pink); margin-bottom:.9rem; }
.newcomers-list{ font-family:var(--font-display); font-size:clamp(1.05rem,3vw,1.5rem); letter-spacing:.06em; color:var(--ink-dim); line-height:2; }
.newcomers-list i{ color:var(--pink); font-style:normal; font-size:.7em; vertical-align:middle; padding:0 .5rem; text-shadow:0 0 10px var(--pink); }

/* ── Episodes ──────────────────────────────────────────────── */
.season-switch{ display:flex; gap:.6rem; margin-top:1.6rem; flex-wrap:wrap; }
.chip{
  min-height:44px; min-width:44px; padding:.6rem 1.15rem; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-dim);
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  transition:all .35s var(--ease-lux);
}
.chip span{ opacity:.55; font-size:.85em; margin-left:.3em; }
.chip:hover{ border-color:var(--pink); color:var(--ink); }
.chip:active{ transform:scale(.94); }
.chip.is-active{
  background:linear-gradient(120deg, rgba(139,61,255,.35), rgba(255,62,165,.3));
  border-color:var(--pink); color:#fff; box-shadow:0 0 22px rgba(255,62,165,.25);
}
.season-panel{
  max-width:1200px; margin:0 auto clamp(2.5rem,6vh,4rem);
  display:grid; grid-template-columns:1fr; gap:clamp(1.4rem,4vw,3rem); align-items:center;
  transition:opacity .45s var(--ease-lux), transform .45s var(--ease-lux);
}
.season-panel.switching{ opacity:0; transform:translateY(14px); }
.season-poster{
  border-radius:var(--rad); overflow:hidden; max-width:300px;
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px var(--line), 0 0 50px rgba(255,62,165,.14);
  transform-style:preserve-3d;
}
.season-info h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(2rem,5vw,3rem); }
.season-meta{ font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:var(--cyan); margin:.6rem 0 1rem; }
.season-blurb{ color:var(--ink-dim); max-width:56ch; }
.season-note{ margin-top:.8rem; font-size:1.35rem; transform:rotate(-1.4deg); }

.eplist{ max-width:1200px; margin:0 auto; list-style:none; }
.ep{
  display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.1rem;
  padding:clamp(1.4rem,3.5vh,2.2rem) 0; border-bottom:1px solid var(--line);
  position:relative;
}
.ep-num{
  grid-row:1/3; font-family:var(--font-display); font-size:clamp(2rem,7vw,3.6rem);
  color:transparent; -webkit-text-stroke:1px rgba(200,150,255,.5);
  line-height:1; min-width:1.6em;
  transition:color .5s, text-shadow .5s;
}
.ep:hover .ep-num{ color:var(--pink); -webkit-text-stroke:1px transparent; text-shadow:0 0 26px rgba(255,62,165,.6); }
.ep-still{
  border-radius:12px; overflow:hidden; aspect-ratio:16/9;
  border:1px solid var(--line); position:relative;
}
.ep-still img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9); transition:transform .8s var(--ease-lux), filter .5s; }
.ep:hover .ep-still img{ transform:scale(1.05); filter:saturate(1.2); }
.ep-body h4{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.4rem,4vw,2rem); letter-spacing:.03em; }
.ep-date{ font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--pink); margin:.45rem 0 .6rem; }
.ep-ov{ font-size:.92rem; color:var(--ink-dim); max-width:64ch; }

/* ── Watch / screening room ────────────────────────────────── */
.screen{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr; gap:1.4rem; align-items:end;
}
.screen-frame{
  position:relative; border-radius:var(--rad); overflow:hidden;
  border:1px solid rgba(255,62,165,.35);
  box-shadow:0 0 0 1px rgba(139,61,255,.2), 0 30px 90px rgba(0,0,0,.6), 0 0 80px rgba(255,62,165,.16);
  aspect-ratio:16/9; background:var(--bg-2);
}
.screen-facade{
  position:absolute; inset:0; width:100%; height:100%; display:block; text-align:left;
}
.screen-facade img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.85) brightness(.72); transition:transform 1.2s var(--ease-lux), filter .6s; }
.screen-facade:hover img, .screen-facade:focus-visible img{ transform:scale(1.04); filter:saturate(1.1) brightness(.85); }
.screen-vignette{ position:absolute; inset:0; background:radial-gradient(80% 80% at 50% 50%, transparent 40%, rgba(7,3,15,.75)); }
.play-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(72px,14vw,96px); height:clamp(72px,14vw,96px); border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(140deg, rgba(255,62,165,.85), rgba(139,61,255,.85));
  box-shadow:0 0 50px rgba(255,62,165,.65);
  transition:transform .4s var(--ease-lux), box-shadow .4s;
}
.play-btn svg{ margin-left:4px; }
.screen-facade:hover .play-btn{ transform:translate(-50%,-50%) scale(1.12); box-shadow:0 0 80px rgba(255,62,165,.9); }
.screen-facade:active .play-btn{ transform:translate(-50%,-50%) scale(.95); }
.play-btn::after{
  content:''; position:absolute; inset:-14px; border-radius:50%;
  border:1px solid rgba(255,62,165,.5); animation:playPulse 2.4s ease-out infinite;
}
@keyframes playPulse{ 0%{ transform:scale(.8); opacity:1 } 100%{ transform:scale(1.25); opacity:0 } }
.screen-label{
  position:absolute; left:1rem; bottom:.9rem; font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--ink-dim);
}
.screen-live{ position:absolute; inset:0; }
.screen-live iframe{ width:100%; height:100%; border:0; display:block; }
.screen-side{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.screen-note{ font-size:1.4rem; transform:rotate(-2deg); }

.sound{
  max-width:1200px; margin:clamp(3rem,8vh,5rem) auto 0;
  display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap;
  padding:clamp(1.4rem,4vw,2.4rem); border-radius:var(--rad);
  border:1px solid var(--line);
  background:linear-gradient(120deg, rgba(43,16,85,.45), rgba(255,62,165,.07));
}
.sound-title{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.9rem,5vw,2.8rem); margin:.4rem 0 .6rem;
  background:linear-gradient(110deg,#fff,var(--cyan)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sound-body{ color:var(--ink-dim); max-width:52ch; font-size:.95rem; }
.sound-toggle{
  display:flex; align-items:center; gap:1rem; min-height:56px;
  padding:.9rem 1.6rem; border-radius:999px; border:1px solid rgba(55,226,255,.4);
  transition:all .4s var(--ease-lux);
}
.sound-toggle:hover{ box-shadow:0 0 30px rgba(55,226,255,.25); }
.sound-toggle:active{ transform:scale(.96); }
.sound-toggle[aria-pressed="true"]{ background:rgba(55,226,255,.1); border-color:var(--cyan); box-shadow:0 0 34px rgba(55,226,255,.3); }
.eq{ display:flex; align-items:flex-end; gap:3px; height:20px; }
.eq i{ width:3px; height:5px; border-radius:2px; background:var(--cyan); transition:height .3s; }
.sound-toggle[aria-pressed="true"] .eq i{ animation:eqBounce .9s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .eq i:nth-child(2){ animation-delay:.12s } .sound-toggle[aria-pressed="true"] .eq i:nth-child(3){ animation-delay:.24s }
.sound-toggle[aria-pressed="true"] .eq i:nth-child(4){ animation-delay:.06s } .sound-toggle[aria-pressed="true"] .eq i:nth-child(5){ animation-delay:.3s }
@keyframes eqBounce{ from{ height:4px } to{ height:19px } }
.sound-toggle-label{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; }

/* ── Impact ────────────────────────────────────────────────── */
.impact{ overflow:hidden; }
.impact-bg{
  position:absolute; inset:-8% 0; z-index:-1;
  background:url('../assets/img/bg-grain-2.webp') center/cover no-repeat;
  opacity:.24;
  -webkit-mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.impact::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, var(--bg), rgba(43,16,85,.4) 50%, var(--bg));
}
.stats{
  max-width:1200px; margin:0 auto clamp(2.5rem,6vh,4rem);
  display:grid; grid-template-columns:1fr; gap:1.1rem;
}
.stat{
  padding:clamp(1.3rem,3.5vw,2rem); border-radius:var(--rad);
  border:1px solid var(--line);
  background:linear-gradient(150deg, rgba(43,16,85,.42), rgba(13,6,32,.7));
  transition:border-color .4s, box-shadow .4s, transform .4s var(--ease-lux);
}
.stat:hover{ border-color:rgba(255,62,165,.45); box-shadow:0 0 40px rgba(255,62,165,.12); transform:translateY(-3px); }
.stat-num{
  display:block; font-family:var(--font-display); font-size:clamp(2.8rem,8vw,4.6rem); line-height:1;
  background:linear-gradient(120deg,#fff 25%, var(--pink)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:none; margin-bottom:.55rem;
}
.stat-label{ font-size:.86rem; color:var(--ink-dim); max-width:40ch; display:block; }
.imprint-rows{ max-width:1200px; margin:0 auto; }
.irow{
  display:grid; grid-template-columns:1fr; gap:.5rem;
  padding:clamp(1.4rem,3.5vh,2.1rem) 0; border-top:1px solid var(--line);
}
.irow-key{
  font-family:var(--font-display); font-size:clamp(1.4rem,3.6vw,1.9rem); letter-spacing:.06em;
  color:var(--pink); text-shadow:0 0 22px rgba(255,62,165,.4);
}
.irow p{ color:var(--ink-dim); max-width:70ch; font-size:.95rem; }

/* ── Stream ────────────────────────────────────────────────── */
.stream{ text-align:center; }
.stream-inner{
  max-width:900px; margin:0 auto;
  padding:clamp(2.4rem,7vw,4.5rem) clamp(1.4rem,5vw,3.5rem);
  border-radius:calc(var(--rad) * 1.4);
  border:1px solid rgba(255,62,165,.3);
  background:
    radial-gradient(90% 120% at 50% -20%, rgba(139,61,255,.34), transparent 60%),
    linear-gradient(160deg, rgba(43,16,85,.55), rgba(13,6,32,.9));
  box-shadow:0 40px 120px rgba(0,0,0,.55), 0 0 90px rgba(255,62,165,.12);
  position:relative; overflow:hidden;
}
.stream-inner::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url('../assets/img/hero-sm.webp') center/cover; opacity:.12; mix-blend-mode:screen;
}
.stream-inner > *{ position:relative; }
.stream-title{
  font-family:var(--font-display); font-weight:400; font-size:clamp(2.6rem,8vw,5.4rem); line-height:1;
  margin:.6rem 0 1.2rem;
  background:linear-gradient(140deg,#fff 15%, #e6ccff 45%, var(--pink) 85%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.stream-body{ color:var(--ink-dim); max-width:52ch; margin:0 auto; }
.stream-badges{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin:1.5rem 0 2rem; }
.stream-ctas{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }
.stream-note{ margin-top:1.6rem; font-size:1.35rem; transform:rotate(-1.5deg); }

/* ── Footer ────────────────────────────────────────────────── */
.footer{
  position:relative; z-index:5; text-align:center;
  padding:clamp(3rem,8vh,5rem) var(--pad) calc(clamp(2rem,5vh,3rem) + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, transparent, rgba(43,16,85,.25));
}
.footer-mark{
  font-family:var(--font-display); font-size:clamp(2rem,6vw,3rem); letter-spacing:.14em;
  background:linear-gradient(120deg,#fff 20%, var(--violet) 70%, var(--pink));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  margin-bottom:1.2rem;
}
.footer-legal{ font-size:.72rem; color:var(--ink-faint); max-width:72ch; margin:0 auto; line-height:1.8; }
.footer-hint{ margin-top:1.4rem; font-size:.74rem; color:var(--ink-faint); letter-spacing:.1em; }
.footer-hint kbd{
  border:1px solid var(--line); border-radius:5px; padding:.1em .5em;
  font-family:var(--font-body); color:var(--cyan);
}

/* ── Tilt base ─────────────────────────────────────────────── */
.tilt{ will-change:transform; }

/* ═══ Breakpoints ═══════════════════════════════════════════ */
@media (min-width:640px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .ensemble-grid{ grid-template-columns:repeat(2,1fr); }
  .br-desk{ display:inline; }
}
@media (min-width:768px){
  .ep{ grid-template-columns:auto minmax(220px,300px) 1fr; align-items:center; gap:0 1.8rem; }
  .irow{ grid-template-columns:220px 1fr; gap:2rem; align-items:baseline; }
  .season-panel{ grid-template-columns:auto 1fr; }
  .screen{ grid-template-columns:1fr auto; }
  .screen-side{ flex-direction:column; align-items:flex-start; }
}
@media (min-width:900px){
  .nav-links{ display:flex; }
  .ensemble-grid{ grid-template-columns:repeat(4,1fr); }
  .stats{ grid-template-columns:repeat(4,1fr); }
  .ccard{ flex-basis:320px; }
}
@media (min-width:1024px){
  .chapter{ grid-template-columns:minmax(320px,420px) 1fr; }
  .chapter-sticky{ position:sticky; top:110px; }
}

/* ═══ Reduced motion ════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal, .reveal-line, .wl{ opacity:1 !important; transform:none !important; filter:none !important; }
  .marquee-track{ animation:none; flex-wrap:wrap; width:auto; }
  .grain{ animation:none; }
  .haze{ animation:none; }
}