/* ============================================================
   SHADOW STEP — Website base layer
   Tokens lifted verbatim from shadow-step-ds-v3 (Midnight Court).
   ============================================================ */
:root{
  /* VOID */
  --black-true:#060608; --black-warm:#0A0A0C; --black-surface:#0E0E12;
  --black-2:#080808; --black-3:#0E0E0E; --black-4:#161616; --black-5:#1E1E1E;
  /* RED — the pulse */
  --red-shadow:#3D0000; --red-deep:#6B0A0A; --red-primary:#9B1515;
  --red-hot:#C41E1E; --red-flare:#E02222; --red-glow:rgba(196,30,30,0.25);
  /* CHALK */
  --chalk-primary:#F2EDE4; --chalk-mid:#B8B0A0; --chalk-muted:#5C574F; --chalk-dim:#2A2820;
  /* GOLD */
  --gold-bright:#D4AF37; --gold-dim:#6B5818;
  /* BORDERS */
  --border-void:rgba(255,255,255,0.04); --border-subtle:rgba(255,255,255,0.07);
  --border-default:rgba(255,255,255,0.11); --border-strong:rgba(255,255,255,0.18);
  --border-red:rgba(196,30,30,0.35);
  /* TYPE */
  --font-display:'Hiyuga','Bebas Neue',sans-serif;
  --font-ui:'GC Vensca Mono','Oswald',sans-serif;
  --font-data:'Koltav','IBM Plex Mono',monospace;
  /* MOTION */
  --ease-snap:cubic-bezier(0.16,1,0.3,1);
  --ease-in-hard:cubic-bezier(0.55,0,1,0.45);
  --dur-flash:80ms; --dur-snap:200ms; --dur-slide:380ms; --dur-reveal:600ms;
  /* SPACE */
  --radius-sm:2px; --radius-md:4px; --radius-lg:6px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

body{
  background:var(--black-true);
  color:var(--chalk-primary);
  font-family:var(--font-ui);
  font-size:15px; line-height:1.5;
  overflow-x:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--black-true)}
::-webkit-scrollbar-thumb{background:var(--red-primary);border-radius:2px}
::selection{background:var(--red-hot);color:#fff}

/* ── Shared type ───────────────────────────────── */
.kicker{
  font-family:var(--font-data); font-size:11px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--red-primary);
  display:inline-flex; align-items:center; gap:12px;
}
.kicker::before{content:'';width:28px;height:1px;background:var(--red-primary)}
.mono{font-family:var(--font-data)}
.disp{font-family:var(--font-display)}
.dim{color:var(--chalk-muted)}

/* ── Court grid backdrop (parallax layer) ─────────── */
.court-grid{
  position:absolute; inset:-10%;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.045) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 40%,#000 25%,transparent 78%);
  mask-image:radial-gradient(120% 100% at 50% 40%,#000 25%,transparent 78%);
  will-change:transform; pointer-events:none;
}
.court-grid.fine{ background-size:32px 32px; opacity:.5 }

/* center half-court arcs, drawn faint */
.court-lines{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  will-change:transform;
}

/* ── Live pulse dot (DS: Live Pulse) ─────────────── */
.pulse-dot{
  width:9px;height:9px;border-radius:50%;background:var(--red-flare);
  box-shadow:0 0 0 0 rgba(224,34,34,.7);
  animation:livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(224,34,34,.7)}
  50%{box-shadow:0 0 0 10px rgba(224,34,34,0)}
}

/* ── Tape stripe (DS) ─────────────────────────────── */
.tape-stripe{
  height:26px;
  background:repeating-linear-gradient(135deg,
    var(--red-primary) 0 2px, transparent 2px 9px);
  opacity:.5;
}

/* ── Buttons ──────────────────────────────────────── */
.btn{
  font-family:var(--font-ui); font-size:13px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--chalk-primary);
  background:transparent; border:1px solid var(--border-strong);
  padding:16px 30px; border-radius:var(--radius-md); cursor:pointer;
  position:relative; overflow:hidden; transition:color var(--dur-snap),border-color var(--dur-snap);
  display:inline-flex; align-items:center; gap:14px;
}
.btn::before{
  content:''; position:absolute; inset:0; background:var(--red-hot);
  transform:translateX(-101%); transition:transform var(--dur-slide) var(--ease-snap); z-index:-1;
}
.btn:hover{border-color:var(--red-hot); color:#fff}
.btn:hover::before{transform:translateX(0)}
.btn.solid{ border-color:var(--red-hot); background:var(--red-hot); color:#fff }
.btn.solid::before{background:var(--red-flare)}
.btn .arrow{font-family:var(--font-data); transition:transform var(--dur-snap)}
.btn:hover .arrow{transform:translateX(4px)}

/* ── Reveal primitives (GSAP toggles these) ───────── */
.reveal{opacity:0}
.line-mask{ overflow:hidden; display:block }
.line-mask>*{ display:block; transform:translateY(110%) }

/* ── Section frame ────────────────────────────────── */
.section{position:relative; width:100%}
.wrap{max-width:1280px; margin:0 auto; padding:0 48px}

/* ── Hero variation switcher ──────────────────────── */
.switcher{
  position:fixed; top:18px; right:18px; z-index:140;
  display:flex; align-items:center; gap:0;
  background:rgba(10,10,12,.72); backdrop-filter:blur(14px);
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  padding:4px; font-family:var(--font-data); font-size:10px; letter-spacing:.18em;
}
.switcher .lab{padding:0 10px; color:var(--chalk-muted); text-transform:uppercase}
.switcher button{
  appearance:none; border:0; background:transparent; cursor:pointer;
  color:var(--chalk-mid); font-family:var(--font-data); font-size:10px; letter-spacing:.14em;
  padding:7px 11px; border-radius:3px; text-transform:uppercase; transition:all var(--dur-snap);
}
.switcher button:hover{color:var(--chalk-primary)}
.switcher button.on{background:var(--red-hot); color:#fff}

/* ── Fixed HUD top bar ────────────────────────────── */
.hud{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 48px; pointer-events:none;
  mix-blend-mode:difference;
}
.hud .mark{font-family:var(--font-display); font-size:20px; letter-spacing:.14em; color:#fff}
.hud .mark b{color:var(--red-flare); font-weight:400}
.hud .sys{font-family:var(--font-data); font-size:10px; letter-spacing:.22em; color:#fff; opacity:.7}

/* ── Scroll cue ───────────────────────────────────── */
.scrollcue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  font-family:var(--font-data); font-size:10px; letter-spacing:.3em; color:var(--chalk-muted);
  text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px;
  z-index:30;
}
.scrollcue .ar{animation:cueBob 1.8s ease-in-out infinite; color:var(--red-flare)}
@keyframes cueBob{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(6px);opacity:1}}

/* ── Boot overlay ─────────────────────────────────── */
#boot{
  position:fixed; inset:0; z-index:200; background:#000;
  display:flex; align-items:center; justify-content:center;
}
#boot .bootline{
  font-family:var(--font-data); font-size:11px; letter-spacing:.3em;
  color:var(--chalk-muted); text-transform:uppercase; opacity:0;
}
#boot .bootline .cur{color:var(--red-flare)}

@media(max-width:760px){
  .wrap{padding:0 24px}
  .hud{padding:16px 24px}
  .hud .mark{font-size:17px}
  .switcher{top:auto; bottom:14px; right:14px; max-width:calc(100vw - 28px); flex-wrap:wrap; justify-content:flex-end}
  .btn{padding:15px 26px}
}
@media(max-width:430px){
  .hud .sys{display:none}
  .kicker{font-size:10px; letter-spacing:.26em}
  .kicker::before{width:18px}
}