/* ============ tokens ============ */
:root{
  --ink:#07071A; --ink2:#0C0C2A;
  --flare:#FF2E7E; --volt:#FFD166; --vio:#7B3CFF; --cyan:#2EE6FF; --mint:#4DF0C8;
  --peach:#F7D9CB; --cream:#F2ECDD;
  --paper:#F7F5EF; --mute:#CFCBE0;

  --ff-disp:'Bungee', system-ui, sans-serif;
  --ff-body:'Space Grotesk', system-ui, sans-serif;
  --ff-mono:'JetBrains Mono', ui-monospace, monospace;
  --pad: clamp(20px, 5vw, 72px);
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-font-smoothing:antialiased }
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--ff-body); font-size:clamp(15px,1.1vw,17px); line-height:1.55;
  overflow-x:hidden;
}
::selection{ background:var(--volt); color:var(--ink) }
a{ color:inherit; text-decoration:none }

/* ============ type ============ */
.disp{
  font-family:var(--ff-disp); font-weight:400; line-height:.92;
  letter-spacing:-.01em; margin:0; text-transform:uppercase;
  font-size:clamp(32px,5.6vw,80px);
  text-shadow:0 2px 18px rgba(7,7,26,.6);
}
.disp--xl{ font-size:clamp(40px,8.4vw,124px) }
.disp--center{ text-align:center }
.kicker{
  font-family:var(--ff-mono); font-size:clamp(11px,1vw,13px); font-weight:700;
  letter-spacing:.22em; text-transform:uppercase; color:var(--volt); margin:0 0 18px;
  text-shadow:0 1px 8px rgba(7,7,26,.8);
}
.lead{
  font-size:clamp(15.5px,1.32vw,19px); line-height:1.62; color:var(--mute);
  max-width:54ch; margin:20px 0 0;
  text-shadow:0 1px 10px rgba(7,7,26,.85), 0 0 2px rgba(7,7,26,.7);
}
.lead--center{ margin-left:auto; margin-right:auto; text-align:center }
.fine{ font-family:var(--ff-mono); font-size:13px; color:#CFCBE0; margin-top:22px; letter-spacing:.06em }

.btn{
  display:inline-block; font-family:var(--ff-mono); font-weight:700;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  padding:16px 30px; border-radius:999px;
  background:var(--volt); color:var(--ink); border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .18s, box-shadow .18s, background .2s;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink); background:var(--flare); color:var(--paper) }
.btn--ghost{ background:var(--cyan); color:var(--ink) }
.btn--ghost:hover{ background:var(--mint); color:var(--ink) }
.btn--big{ font-size:15px; padding:22px 46px; margin-top:34px }
.btn--sm{ font-size:12px; padding:13px 24px }
.row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:34px }

/* ============ nav ============ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--pad);
}
.nav__mark{
  font-family:var(--ff-disp); font-size:15px; letter-spacing:.04em;
  background:var(--flare); color:var(--paper);
  padding:8px 14px; border-radius:10px; border:3px solid var(--ink);
}
.nav__links{ display:flex; gap:10px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase }
.nav__links a{ background:var(--ink); color:var(--paper); padding:8px 14px; border-radius:999px; border:2px solid #ffffff26 }
.nav__links a:hover{ background:var(--volt); color:var(--ink); border-color:var(--ink) }
.nav__stat{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em;
  background:var(--volt); color:var(--ink);
  padding:8px 14px; border-radius:999px; border:3px solid var(--ink);
}
@media (max-width:820px){ .nav__links{ display:none } }

/* ============ art layer ============ */
.sc, .lineup{ position:relative; overflow:hidden }
.sc{ min-height:100svh; padding:0 var(--pad) }
.art{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  transform:translateZ(0); will-change:transform;
  backface-visibility:hidden;
}
.art::after{ content:''; position:absolute; inset:0 }

.art--hero{ background-image:url('./assets/web/01-hero-city.jpg'); background-position:center bottom }
.art--hero::after{ background:linear-gradient(to bottom,#07071AE6 0%,#07071AC4 45%,#07071AF7 100%) }
.art--eyes{ background-image:url('./assets/web/02-eyes.jpg'); background-position:center 30% }
.art--eyes::after{ background:linear-gradient(to right,#F7D9CBF7 0%,#F7D9CBCC 42%,#F7D9CB33 70%,transparent 100%) }
.art--thermal{ background-image:url('./assets/web/03-thermal.jpg') }
.art--thermal::after{ background:linear-gradient(to bottom,#07071AE6 0%,#07071AB8 45%,#07071AF7 100%) }
.art--format{ background-image:url('./assets/web/04-format.jpg') }
.art--format::after{ background:linear-gradient(to right,#F2ECDDF7 0%,#F2ECDDD9 46%,#F2ECDD40 74%,transparent 100%) }
.art--topics{ background-image:url('./assets/web/05-topics.jpg') }
.art--topics::after{ background:linear-gradient(to bottom,#07071AE6 0%,#07071AC4 45%,#07071AF7 100%) }
.art--tunnel{ background-image:url('./assets/web/06-tunnel.jpg') }
.art--tunnel::after{ background:radial-gradient(66% 66% at 50% 50%,#07071AF7 0%,#07071AE0 45%,#07071A8C 100%) }
.art--launch{ background-image:url('./assets/web/07-launch.jpg') }
.art--launch::after{ background:linear-gradient(to right,#07071AF7 0%,#07071AE0 46%,#07071A80 76%,transparent 100%) }
.art--arcade{ background-image:url('./assets/web/08-arcade.jpg'); background-position:center 70% }
.art--arcade::after{ background:linear-gradient(to bottom,#07071AE6 0%,#07071AC4 42%,#07071AF7 100%) }
.art--lineup{ background-image:url('./assets/web/09-lineup.jpg') }
.art--lineup::after{ background:linear-gradient(to bottom,#07071AE6 0%,#07071AD9 50%,#07071AF7 100%) }

/* everything above the art */
.hero__inner,.eyes__copy,.thermal__copy,.format__card,.tunnel__copy,.launch__copy,
.arcade__inner,.lineup__head,.lineup__grid,.scrollcue,.pills,.sc-topics h2{
  position:relative; z-index:2;
}

/* ============ 01 hero ============ */
.sc-hero{ display:grid; place-items:center }
.curtain__panel{
  position:absolute; top:0; bottom:0; width:50.3%; z-index:6;
  background-size:cover; background-repeat:no-repeat;
  will-change:transform;
}
/* halves are split at the exact black seam of the drape, so the red and
   yellow bands stay pinned to the inner edge as the panels pull apart */
.curtain__panel--l{ left:0;  background-image:url('./assets/web/curtain-l.jpg'); background-position:right center }
.curtain__panel--r{ right:0; background-image:url('./assets/web/curtain-r.jpg'); background-position:left center }
.hero__inner{ max-width:1100px; width:100%; opacity:0 }
.ln{ display:block; overflow:hidden }
.ln > span{ display:block }
.scrollcue{ text-shadow:0 1px 10px rgba(7,7,26,.9);
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper); display:flex; align-items:center; gap:10px;
}
.scrollcue span{ width:34px; height:2px; background:var(--volt) }

/* ============ 02 eyes ============ */
.sc-eyes{ display:grid; align-content:center; background:var(--peach) }
.sc-eyes .kicker{ color:#9B1F55; text-shadow:none }
.eyes__copy{ max-width:600px }
.eyes__copy .disp{ color:#140B26; text-shadow:none }
.eyes__copy .lead{ color:#2E2038; text-shadow:0 1px 6px rgba(247,217,203,.9) }

/* ============ 03 thermal ============ */
.sc-thermal{ display:grid; place-items:center }
.thermal__copy{ max-width:900px; text-align:center }
.stats{ display:flex; gap:clamp(22px,5vw,70px); justify-content:center; flex-wrap:wrap; margin:44px 0 0 }
.stats b{ display:block; font-family:var(--ff-disp); font-size:clamp(32px,5vw,68px); line-height:1; color:var(--volt) }
.stats em{ display:block; font-family:var(--ff-mono); font-style:normal; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#CFCBE0; margin-top:10px }

/* ============ 04 format ============ */
.sc-format{ display:grid; align-content:center; background:var(--cream) }
.format__card{ max-width:620px }
.format__card .kicker{ color:#9B1F55; text-shadow:none }
.format__card .disp{ color:#140B26; text-shadow:none }
.format__card .lead{ color:#2E2038; text-shadow:0 1px 6px rgba(242,236,221,.9) }
.steps{ list-style:none; padding:0; margin:30px 0 0; display:grid; gap:10px; max-width:520px }
.steps li{
  display:flex; align-items:center; gap:14px;
  background:#1B1033; color:var(--paper); border:3px solid #1B1033;
  border-radius:999px; padding:11px 20px; font-size:14px;
}
.steps span{ font-family:var(--ff-mono); font-size:11px; color:var(--volt); letter-spacing:.1em }

/* ============ 05 topics ============ */
.sc-topics{ display:grid; align-content:center; justify-items:center; gap:clamp(30px,5vh,56px); padding-block:clamp(80px,12vh,140px) }
.pills{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:980px }
.pill{
  font-family:var(--ff-mono); font-size:clamp(12px,1.05vw,14px); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:12px 22px; border-radius:999px;
  border:3px solid var(--ink); color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}

/* ============ 06 tunnel ============ */
.sc-tunnel{ display:grid; place-items:center }
.tunnel__copy{ max-width:780px; text-align:center }

/* ============ 07 launch ============ */
.sc-launch{ display:grid; align-content:center }
.launch__copy{ max-width:640px }

/* ============ 08 lineup ============ */
.lineup{ padding:clamp(90px,14vh,170px) var(--pad) }
.lineup__head{ margin-bottom:clamp(36px,6vh,64px) }
.lineup__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:clamp(14px,1.6vw,20px) }
.act{
  position:relative; border-radius:18px; padding:24px; min-height:215px;
  background:var(--ink2); border:3px solid var(--ink); overflow:hidden;
  box-shadow:5px 5px 0 var(--ink);
  display:flex; flex-direction:column; gap:9px;
}
.act__i{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; color:#CFCBE0 }
.act__t{ font-family:var(--ff-disp); font-size:clamp(16px,1.6vw,21px); text-transform:uppercase; line-height:1.05; margin:0 }
.act__d{ margin:0; font-size:14px; color:var(--mute) }
.act__m{ margin-top:auto; font-family:var(--ff-mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase }

/* ============ 09 arcade ============ */
.sc-arcade{ display:grid; place-items:center }
.arcade__inner{ text-align:center; max-width:860px }

/* ============ footer ============ */
.foot{ padding:clamp(46px,8vh,84px) var(--pad) 38px; border-top:3px solid #ffffff14 }
.foot__big{ font-family:var(--ff-disp); font-size:clamp(42px,12.5vw,184px); line-height:.9; color:#ffffff10 }
.foot__meta{ display:flex; gap:24px; flex-wrap:wrap; margin-top:24px; font-family:var(--ff-mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:#CFCBE0 }
.foot__meta a:hover{ color:var(--volt) }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .hero__inner{ opacity:1 }
  .curtain__panel{ display:none }
}

/* ============ social icon buttons ============ */
.social{ display:flex; gap:12px; margin-top:26px; position:relative; z-index:2 }
.social--center{ justify-content:center }
.social__btn{
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  border:2px solid currentColor; color:#E4E1F0;
  transition:color .2s, background .2s, transform .2s;
}
.social__btn svg{ width:19px; height:19px; fill:currentColor }
.social__btn:hover{ color:var(--ink); background:var(--volt); transform:translateY(-3px) }
.sc-eyes .social__btn, .sc-format .social__btn{ color:#1B103366 }
.sc-eyes .social__btn:hover, .sc-format .social__btn:hover{ color:var(--ink) }

/* ============ stacking project cards ============ */
.stack{ position:relative; padding:clamp(80px,12vh,150px) var(--pad) clamp(60px,10vh,120px); overflow:visible }
.stack__head{ position:relative; z-index:2; margin-bottom:clamp(30px,5vh,56px) }
.stack__list{ position:relative; z-index:2; display:flex; flex-direction:column; gap:26px }

.stack__card{
  position:sticky;
  top:calc(104px + var(--i) * 16px);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,3vw,44px);
  align-items:start;
  border:3px solid var(--ink); border-radius:22px;
  background:var(--ink2); box-shadow:0 -6px 0 rgba(0,0,0,.4), 7px 7px 0 var(--ink);
  padding:clamp(26px,3.2vw,46px);
  will-change:transform;
  transform:translateZ(0);
  isolation:isolate;
}
.stack__scrim{
  position:absolute; inset:0; border-radius:19px;
  background:var(--ink); opacity:0; pointer-events:none;
  will-change:opacity;
}
.stack__num{
  font-family:var(--ff-disp); font-size:clamp(30px,4.6vw,66px); line-height:.9;
  color:#ffffff2e; letter-spacing:-.02em;
}
.stack__body{ display:flex; flex-direction:column; gap:11px; min-width:0 }
.stack__label{
  align-self:flex-start; font-family:var(--ff-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; padding:7px 13px; border-radius:999px; border:2px solid currentColor;
}
.stack__name{ font-family:var(--ff-disp); font-size:clamp(22px,3.1vw,44px); text-transform:uppercase; line-height:1; margin:2px 0 0 }
.stack__desc{ margin:0; color:#DAD7E8; font-size:16px; line-height:1.62; max-width:60ch }
.stack__links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px }
.stack__link{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:11px 19px; border-radius:999px; border:2px solid currentColor;
  transition:background .2s, transform .2s;
}
.stack__link:hover{ background:currentColor; transform:translateY(-2px) }
.stack__link:hover span{ color:var(--ink) }

@media (max-width:860px){
  .stack__card{ grid-template-columns:1fr; gap:10px }
  .stack__num{ font-size:26px }
}

/* ============ method: channel tuner + CRT ============ */
.format__card{ max-width:none }
.tuner{ display:grid; grid-template-columns:minmax(200px,260px) minmax(0,1fr); gap:clamp(18px,2.6vw,34px); margin-top:30px; align-items:start }

.tuner__dial{ display:grid; gap:9px }
.tuner__ch{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  font-family:var(--ff-body); font-size:14.5px; font-weight:500;
  background:#FFFFFF; color:#140B26;
  border:3px solid #140B26; border-radius:999px;
  padding:12px 18px; cursor:pointer;
  box-shadow:3px 3px 0 #140B26;
  transition:transform .16s, box-shadow .16s, background .16s, color .16s;
}
.tuner__ch span{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; opacity:.55 }
.tuner__ch:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 #140B26 }
.tuner__ch.is-on{ background:#140B26; color:#F7F5EF; box-shadow:5px 5px 0 var(--flare) }
.tuner__ch.is-on span{ color:var(--volt); opacity:1 }
.tuner__ch:focus-visible{ outline:3px solid var(--flare); outline-offset:3px }

.crt{ position:relative }
.crt__bezel{
  background:linear-gradient(#5A6480,#3C4459);
  border:3px solid #140B26; border-radius:26px;
  padding:clamp(14px,1.6vw,22px);
  box-shadow:7px 7px 0 #140B26;
}
.crt__screen{
  position:relative; border-radius:16px; overflow:hidden;
  background:radial-gradient(120% 120% at 50% 40%, #16123A 0%, #07071A 70%);
  border:3px solid #0B0A1E; min-height:clamp(210px,24vw,270px);
  display:grid; align-items:center;
}
.crt__inner{ position:relative; z-index:3; padding:clamp(20px,2.2vw,32px) }
.crt__ch{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.22em; color:var(--volt); margin:0 0 12px }
.crt__ch b{ color:var(--volt) }
.crt__title{ font-family:var(--ff-disp); font-size:clamp(17px,1.9vw,26px); text-transform:uppercase; line-height:1.05; margin:0 0 12px; color:#F7F5EF }
.crt__body{ margin:0; font-size:15.5px; line-height:1.6; color:#DAD7E8; max-width:46ch }
.crt__scan{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
}
.crt__static{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background-image:repeating-linear-gradient(to bottom, rgba(255,255,255,.16) 0 2px, rgba(0,0,0,.16) 2px 4px);
  mix-blend-mode:screen;
}
.crt__knobs{ display:flex; gap:14px; justify-content:flex-end; margin-top:12px; padding-right:6px }
.crt__knobs i{
  width:26px; height:26px; border-radius:50%;
  background:linear-gradient(#DDE3F0,#96A0BC); border:3px solid #140B26;
  box-shadow:2px 2px 0 #140B26;
}
@media (max-width:820px){ .tuner{ grid-template-columns:1fr } }

/* ============ panel rail ============ */
.rail{
  position:fixed; right:clamp(12px,1.6vw,26px); top:50%; transform:translateY(-50%);
  z-index:880; display:flex; flex-direction:column; gap:12px; align-items:flex-end;
}
.rail__dot{
  position:relative; width:12px; height:12px; border-radius:50%;
  border:2px solid #ffffff59; background:transparent; cursor:pointer; padding:0;
  transition:transform .2s, border-color .2s, background .2s;
}
.rail__dot::after{
  content:attr(data-name);
  position:absolute; right:22px; top:50%; transform:translateY(-50%) translateX(6px);
  font-family:var(--ff-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); background:var(--volt); padding:5px 9px; border-radius:999px;
  border:2px solid var(--ink); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
}
.rail__dot:hover::after{ opacity:1; transform:translateY(-50%) translateX(0) }
.rail__dot:hover{ transform:scale(1.25); border-color:var(--volt) }
.rail__dot.is-on{ background:var(--volt); border-color:var(--volt); transform:scale(1.3) }
.rail__dot:focus-visible{ outline:2px solid var(--flare); outline-offset:4px }
@media (max-width:720px){ .rail{ display:none } }

/* ============ cursor glow ============ */
.glow{
  position:fixed; top:0; left:0; width:420px; height:420px; border-radius:50%;
  pointer-events:none; z-index:1; opacity:0; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(255,46,126,.20) 0%, rgba(123,60,255,.10) 40%, transparent 70%);
  transform:translate(-50%,-50%);
}
@media (hover:none){ .glow{ display:none } }

/* magnetic + tilt targets get their own layer */
.btn, .social__btn, .tuner__ch{ will-change:transform }
.stack__card{ transform-style:preserve-3d }

/* ============ progress + transition ============ */
.prog{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:950; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--flare),var(--volt),var(--cyan)); }
.warp{ position:fixed; inset:0; z-index:940; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,209,102,.28) 0%, rgba(255,46,126,.18) 35%, transparent 70%); }

/* kinetic headings */
.disp .ch{ display:inline-block; will-change:transform,opacity }

/* ============ scene transition ============ */
.wipe{
  position:fixed; inset:0; z-index:945; pointer-events:none;
  transform:scaleY(0); transform-origin:top center;
  background:linear-gradient(180deg,var(--flare) 0%,var(--vio) 55%,var(--ink) 100%);
}
.wipe__mark{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--ff-disp); font-size:clamp(28px,6vw,86px); text-transform:uppercase;
  color:#ffffff1f; letter-spacing:-.02em; opacity:0;
}