/* Steal The Crowd — motion layer (home page) */

/* ---------- preloader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--night);display:grid;place-content:center;justify-items:center;gap:18px;
  clip-path:inset(0 0 0 0);transition:clip-path .9s cubic-bezier(.77,0,.18,1)}
.loader.done{clip-path:inset(0 0 100% 0)}
.loader-eq{display:flex;gap:10px;align-items:flex-end;height:64px}
.loader-eq i{width:14px;border-radius:4px;animation:eq .47s ease-in-out infinite alternate}
.loader-eq i:nth-child(1){background:var(--pink);animation-delay:-.1s}
.loader-eq i:nth-child(2){background:var(--gold);animation-delay:-.3s}
.loader-eq i:nth-child(3){background:var(--lime);animation-delay:-.2s}
.loader-eq i:nth-child(4){background:var(--cyan);animation-delay:-.4s}
@keyframes eq{from{height:12px}to{height:64px}}
.loader-word{font-family:var(--display);text-transform:uppercase;font-size:clamp(40px,8vw,96px);line-height:.9;letter-spacing:.02em}
.loader-count{font-family:var(--display);font-size:22px;color:var(--gold)}
html.is-loading body{overflow:hidden}
html.is-loading .hero-bg,html.is-loading .head-wrap .head,html.is-loading .hero-cta{animation-play-state:paused}

/* ---------- custom cursor (fine pointers only) ---------- */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block;position:fixed;inset:0;pointer-events:none;z-index:90}
  .cursor-dot,.cursor-ring{position:fixed;left:0;top:0;border-radius:50%;transform:translate(-100px,-100px);will-change:transform}
  .cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--gold)}
  .cursor-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border:2px solid rgba(255,255,255,.6);display:grid;place-items:center;
    transition:width .25s ease,height .25s ease,margin .25s ease,background .25s ease,border-color .25s ease}
  .cursor-ring span{font:700 12px var(--body);color:#1a0f00;opacity:0;transition:opacity .2s;text-transform:none}
  .cursor.big .cursor-ring{width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--gold);border-color:var(--gold)}
  .cursor.big .cursor-ring span{opacity:1}
  .cursor.big .cursor-dot{opacity:0}
}

/* ---------- hero extras ---------- */
.hero-gl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.head-wrap{z-index:2}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:.12em;color:rgba(255,255,255,.75)}
.scroll-cue span{width:2px;height:38px;background:linear-gradient(var(--gold),transparent);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){.scroll-cue{display:none}}

/* ---------- marquees ---------- */
.marquees{position:relative;padding:clamp(30px,6vw,80px) 0;overflow:hidden}
.marquee{white-space:nowrap;overflow:hidden;font-family:var(--display);text-transform:uppercase;line-height:1;padding:.18em 0}
.marquee .track{display:inline-block;will-change:transform}
.marquee b{font-weight:400;padding:0 .3em}
.m1{background:var(--pink);color:#fff;font-size:clamp(44px,8vw,120px);transform:rotate(-3deg) scale(1.04);box-shadow:0 20px 60px rgba(255,47,179,.35)}
.m1 b{color:var(--gold)}
.m2{background:var(--lime);color:#102000;font-size:clamp(32px,5.4vw,80px);transform:rotate(2deg) scale(1.04);margin-top:-6px}
.m2 b{color:var(--pink)}

/* ---------- trailer ---------- */
.trailer{padding:clamp(60px,8vw,120px) 0 clamp(40px,6vw,80px)}
.trailer-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(24px,4vw,48px)}
.trailer-head .lead{margin:0}
.trailer-frame{position:relative;width:min(92vw,1400px);margin:0 auto;aspect-ratio:16/9;border-radius:clamp(16px,2vw,32px);overflow:hidden;background:#000;
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);will-change:transform}
.trailer-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.trailer-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.trailer-cover{position:absolute;inset:0;cursor:pointer}
.trailer-cover img{width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(1.15);transition:transform 1.2s ease}
.trailer-frame:hover .trailer-cover img{transform:scale(1.04)}
.trailer-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(86px,10vw,140px);height:clamp(86px,10vw,140px);border-radius:50%;border:0;cursor:pointer;
  background:var(--gold);display:grid;place-items:center;box-shadow:0 0 0 14px rgba(255,201,60,.18),0 0 0 30px rgba(255,201,60,.08),0 20px 60px rgba(0,0,0,.5);transition:transform .2s ease}
.trailer-play:hover{transform:translate(-50%,-50%) scale(1.07)}
.trailer-play svg{width:40%;height:40%;fill:#1a0f00;margin-left:8%}
.trailer-soon{position:absolute;left:50%;bottom:clamp(16px,3vw,36px);transform:translateX(-50%);background:rgba(0,0,0,.75);
  padding:8px 16px;border-radius:999px;font-weight:600;font-size:14px;white-space:nowrap}

/* ---------- stages: horizontal pinned ---------- */
.stages-h{position:relative;overflow:hidden}
.stages-pin{display:flex;height:100svh;width:max-content;align-items:stretch}
.stages-intro{box-sizing:content-box;width:clamp(460px,38vw,640px);flex:none;position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter) 0 max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)))}
.stages-intro h2{font-size:clamp(56px,7vw,120px);white-space:nowrap}
.stages-intro .lead{margin-top:22px}
.stage-panel{width:min(88vw,1100px);flex:none;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(24px,4vw,64px);padding:0 clamp(24px,4vw,64px);position:relative}
.stage-panel::before{content:"";position:absolute;inset:0;opacity:.35;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,currentColor,transparent 70%)!important}
.stage-panel img{height:min(70svh,720px);width:auto;aspect-ratio:68/86;object-fit:cover;border-radius:28px;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.stage-panel h3.display{font-size:clamp(64px,10vw,170px);line-height:.86;margin:10px 0 18px}
.stage-panel p{font-size:clamp(17px,1.5vw,22px);color:var(--muted);max-width:30ch;margin:0}
.stage-no{font-weight:700;font-size:15px;padding:6px 14px;border-radius:999px;color:#000}
.s-pink::before{color:var(--pink)} .s-pink h3{color:var(--pink);text-shadow:0 0 40px rgba(255,47,179,.45)} .s-pink .stage-no{background:var(--pink);color:#fff} .s-pink img{box-shadow:0 0 0 3px var(--pink),0 30px 90px rgba(255,47,179,.35)}
.s-main::before{color:var(--lime)} .s-main h3{color:var(--lime);text-shadow:0 0 40px rgba(166,255,46,.4)} .s-main .stage-no{background:var(--lime)} .s-main img{box-shadow:0 0 0 3px var(--lime),0 30px 90px rgba(166,255,46,.3)}
.s-blue::before{color:var(--cyan)} .s-blue h3{color:var(--cyan);text-shadow:0 0 40px rgba(46,230,255,.4)} .s-blue .stage-no{background:var(--cyan)} .s-blue img{box-shadow:0 0 0 3px var(--cyan),0 30px 90px rgba(46,230,255,.3)}
@media (max-width:900px){
  .stages-intro{box-sizing:border-box;width:auto}
  .stages-intro h2{white-space:normal}
  .stages-pin{flex-direction:column;height:auto;width:auto;gap:56px;padding:72px 0}
  .stages-intro,.stage-panel{width:auto;padding:0 var(--gutter)}
  .stage-panel{grid-template-columns:1fr}
  .stage-panel img{height:auto;width:100%;max-height:70svh}
}

/* ---------- demo ---------- */
.demo-sec{background:linear-gradient(180deg,var(--night),var(--night-2) 50%,var(--night))}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.demo{position:relative;aspect-ratio:4/5;max-height:80svh;width:100%;border-radius:28px;overflow:hidden;background:#0b0620;
  box-shadow:0 0 0 2px rgba(255,47,179,.5),0 40px 100px rgba(0,0,0,.6),0 0 80px rgba(255,47,179,.18);touch-action:none;user-select:none}
.demo-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.demo-hud{position:absolute;top:14px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;
  font-family:var(--display);font-size:30px;text-shadow:0 2px 0 #000}
.demo-combo{color:var(--gold)}
.demo-meter{position:absolute;left:18px;right:18px;top:58px;height:22px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;pointer-events:none}
.demo-meter i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--pink),var(--gold),var(--lime));transition:width .25s ease}
.demo-meter b{position:relative;display:block;text-align:center;font:700 12px/22px var(--body);color:#fff;text-shadow:0 1px 3px #000}
.demo-overlay{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;background:rgba(11,6,32,.85);text-align:center;padding:24px}
.demo-overlay.hidden{display:none}
.demo-title{font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,4vw,54px);line-height:1;margin:0}
.demo-note{color:var(--muted);margin:0;font-size:14px}
@media (max-width:960px){.demo-grid{grid-template-columns:1fr}.demo{max-height:none;aspect-ratio:3/4}}

/* ---------- tilt + split text ---------- */
.tilt{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.split .line{overflow:hidden;display:block;padding-bottom:.04em}
.giant{font-family:var(--display);text-transform:uppercase;font-size:17.2vw;line-height:.8;text-align:center;white-space:nowrap;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.14);padding:4vw 0 0;user-select:none;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .loader{display:none}
  .marquee .track{transform:none!important}
  .cursor{display:none!important}
}

/* ---------- alpha form after trailer + final CTA ---------- */
.alpha-early{padding:clamp(40px,6vw,90px) 0 clamp(72px,9vw,130px)}
#alpha{scroll-margin-top:90px}
.final-cta{padding:clamp(80px,10vw,150px) 0 clamp(40px,5vw,70px);text-align:center;
  background:radial-gradient(60% 80% at 50% 100%,rgba(255,47,179,.22),transparent 70%)}
.final-cta h2{font-size:clamp(52px,8.5vw,128px)}
.final-cta .lead{margin:22px auto 0}
.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.cta-row .btn{font-size:clamp(18px,1.6vw,24px);padding:.85em 1.6em .8em}
@media (max-width:640px){.cta-row{flex-direction:column;align-items:stretch}}