@font-face{font-family:'Lilita One';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/LilitaOne-400.woff2) format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/Rubik.woff2) format('woff2')}

:root{
  --ink:#0b0710;
  --panel:#140b1d;
  --yellow:#ffc933;
  --text:#fbf6ee;
  --muted:#b9adc4;
  --line:rgba(255,255,255,.14);
  --err:#ff6b6b;
  --night:0;           /* 0 = day, 1 = night — driven by JS */
  --display:'Lilita One','Arial Black',sans-serif;
  --body:'Rubik',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t0:0s;             /* entrance delay: waits for the intro */
  color-scheme:dark;
}
.intro-on{--t0:2.45s}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent}
html,body{background:var(--ink)}
body{color:var(--text);font-family:var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;user-select:none;-webkit-user-drag:none}
[hidden]{display:none!important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ================= BRAND BAR (INOUT logo slot) ================= */
.brandbar{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;
  padding:max(16px,env(safe-area-inset-top)) 24px 0;pointer-events:none;
  animation:inFade .8s ease-out calc(var(--t0) + .2s) both}
.brand{height:34px;width:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}

/* ================= BACKGROUND STAGE ================= */
.hero{position:relative;min-height:100svh;overflow:hidden}
.stage{position:fixed;inset:0;overflow:hidden;z-index:0}
.scene{position:absolute;inset:-4%;opacity:0;will-change:transform,opacity}
.scene.is-on{opacity:1}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform,opacity}
.bg.night{opacity:0}

.sky-glow{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(40% 35% at 62% 30%, rgba(255,190,90,calc(.5*(1 - var(--night)))), transparent 70%),
    radial-gradient(22% 22% at 88% 12%, rgba(150,200,255,calc(.4*var(--night))), transparent 70%)}
.grade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,8,40,calc(.12 + .2*var(--night))) 0%,transparent 35%,transparent 60%,rgba(11,7,16,.65) 100%)}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 50%,rgba(5,2,10,.7) 100%)}
#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.loot{position:absolute;inset:0;pointer-events:none}
.loot .li{position:absolute;will-change:transform}
.loot .li img{width:100%;will-change:transform;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}

.hero-char{position:absolute;bottom:-2%;height:min(92svh,56vw,980px);width:auto;pointer-events:none;will-change:transform;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.lason{left:-7vw}
.lucy{right:-1vw;height:min(88svh,54vw,940px)}

/* night searchlight follows the cursor (JS sets --lit / --sx / --sy) */
.searchlight{position:absolute;inset:0;pointer-events:none;--sx:50%;--sy:40%;--lit:0;opacity:var(--lit);
  background:radial-gradient(circle at var(--sx) var(--sy),rgba(220,235,255,.16) 0,rgba(220,235,255,.05) 160px,rgba(2,4,14,.42) 360px)}
/* police lights in the alley at night */
.police{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s}
.police.on{opacity:1}
.pl{position:absolute;top:-20%;width:55%;height:140%;mix-blend-mode:screen}
.pl.r{left:-28%;background:radial-gradient(closest-side,rgba(255,30,60,.5),transparent);animation:blinkR 1.1s steps(1) infinite}
.pl.b{right:-28%;background:radial-gradient(closest-side,rgba(40,100,255,.55),transparent);animation:blinkB 1.1s steps(1) infinite}
@keyframes blinkR{0%,10%,20%{opacity:1}5%,15%,50%,100%{opacity:0}}
@keyframes blinkB{0%,50%{opacity:0}55%,65%,75%{opacity:1}60%,70%,100%{opacity:0}}

/* scene-cut slash (JS drives it and always resets it to hidden) */
.sweep{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.sweep img{position:absolute;inset:-10%;width:120%;height:120%;object-fit:cover;opacity:0;will-change:transform,opacity}
.sweep .flash{position:absolute;inset:0;background:#fff3d6;opacity:0;mix-blend-mode:screen}

/* ================= FOREGROUND ================= */
.hero-copy{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  padding:max(64px,env(safe-area-inset-top)) 16px max(32px,env(safe-area-inset-bottom))}

.logo-wrap{width:min(280px,26vw)}
.logo{width:100%;filter:drop-shadow(0 14px 24px rgba(0,0,0,.6))}

/* claim card */
.card-wrap{width:min(460px,100%)}
.card{--acc:255,201,51;position:relative;width:100%;padding:28px 28px 22px;border-radius:20px;text-align:center;
  /* frosted glass, no borders */
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(28,14,42,.55) 35%,rgba(14,7,22,.7));
  -webkit-backdrop-filter:blur(24px) saturate(140%) brightness(.85);backdrop-filter:blur(24px) saturate(140%) brightness(.85);
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.22)}
.card[data-acc=playstation]{--acc:76,139,255}
.card[data-acc=xbox]{--acc:76,206,96}
.claim,.done{position:relative}

.kicker{display:inline-block;font:600 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--yellow)}
.card h1,.card h2{font:400 clamp(30px,3vw,38px)/1.05 var(--display);text-transform:uppercase;margin:10px 0 8px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.lead{color:rgba(255,255,255,.8);font:400 15px/1.45 var(--body);margin:0 auto 22px;max-width:32ch}

.claim{display:flex;flex-direction:column;align-items:stretch;text-align:left}
.claim .kicker,.claim h1,.claim .lead{align-self:center;text-align:center}
.field{border:0;display:flex;flex-direction:column;gap:8px;margin-bottom:16px;min-width:0}
.label{font:500 13px/1 var(--body);color:rgba(255,255,255,.78);padding:0}
/* <legend> sits outside the fieldset's flex layout, so `gap` never reaches it */
legend.label{float:left;width:100%}  /* floated legend becomes a normal flex item, so the 8px gap applies */

input[type=email],select{width:100%;height:50px;padding:0 16px;border-radius:12px;border:0;
  background:rgba(10,4,18,.38);color:var(--text);font:400 16px var(--body);outline:none;transition:border-color .2s,background .2s,box-shadow .2s}
input[type=email]::placeholder{color:rgba(255,255,255,.35)}
input[type=email]:focus,select:focus{background:rgba(10,4,18,.52);box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.select{position:relative;display:block}
.select::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;border:solid var(--muted);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}
select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer}
select:invalid{color:rgba(255,255,255,.4)}
select option{background:#1a0e24;color:var(--text)}

.consoles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opt-box{display:flex;align-items:center;justify-content:center;height:54px;padding:0 10px;border-radius:12px;border:0;
  background:rgba(10,4,18,.38);text-align:center;font:500 15px/1.1 var(--body);transition:background .2s,box-shadow .2s}
.opt:hover .opt-box{background:rgba(10,4,18,.5)}
.opt input:focus-visible + .opt-box{box-shadow:0 0 0 3px rgba(var(--acc),.35)}
.opt input:checked + .opt-box{background:rgba(var(--acc),.38);box-shadow:inset 0 0 0 2px rgba(var(--acc),.9);font-weight:600}

.err{display:none;color:var(--err);font:500 13px var(--body)}
.field.bad .err{display:block}
.field.bad input,.field.bad select,.field.bad .opt-box{box-shadow:inset 0 0 0 2px var(--err)}

.btn{margin-top:6px;height:56px;border:0;border-radius:12px;cursor:pointer;color:#1d1200;background:var(--yellow);
  font:400 22px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;
  box-shadow:0 4px 0 #b8860b;transition:transform .1s,box-shadow .1s,background .2s}
.btn:hover{background:#ffd451}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #b8860b}
.btn:disabled{cursor:progress;opacity:.8}
.btn:focus-visible{outline:3px solid #fff;outline-offset:3px}

.fine{text-align:center;color:rgba(255,255,255,.4);font:400 12px var(--body);margin-top:14px}
.form-error{text-align:center;color:var(--err);font:500 14px var(--body);margin-top:10px}

.done{padding:8px 0}
.done:focus{outline:none}
.done p{color:var(--muted);line-height:1.55;font-size:15px;margin-top:4px}
.done b{color:var(--text);font-weight:600;word-break:break-word}

/* ================= ENTRANCE (pure CSS; waits for the intro via --t0) =================
   independent `translate`/`scale` props, so JS transforms (parallax, float) keep working */
@keyframes inUp{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes inDrop{from{opacity:0;translate:0 -24px;scale:.85}to{opacity:1;translate:0 0;scale:1}}
@keyframes inLeft{from{opacity:0;translate:-320px 0}to{opacity:1;translate:0 0}}
@keyframes inRight{from{opacity:0;translate:320px 0}to{opacity:1;translate:0 0}}
@keyframes inPop{from{scale:0}to{scale:1}}
@keyframes inFade{from{opacity:0}to{opacity:1}}
.logo-wrap{animation:inDrop .9s cubic-bezier(.34,1.56,.64,1) calc(var(--t0) + .15s) both}
/* animate the glass card itself: an opacity animation on an ANCESTOR would disable backdrop-filter */
.card{animation:inUp .9s cubic-bezier(.22,1,.36,1) calc(var(--t0) + .3s) both}
.lason{animation:inLeft 1.2s cubic-bezier(.16,1,.3,1) var(--t0) both}
.lucy{animation:inRight 1.2s cubic-bezier(.16,1,.3,1) var(--t0) both}
.loot .li img{animation:inPop .9s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--t0) + .3s + var(--i,0) * 40ms)}

/* ================= INTRO (pure CSS timeline, always ends hidden) ================= */
.intro{position:fixed;inset:0;z-index:20;background:#05030a;display:grid;place-items:center;overflow:hidden;cursor:pointer;
  animation:introOut .5s ease-in 2.4s forwards}
.intro-skip .intro{animation:introSkip .3s ease-in forwards}
html:not(.intro-on):not(.intro-skip) .intro{display:none}
@keyframes introOut{to{opacity:0;visibility:hidden}}
@keyframes introSkip{to{opacity:0;visibility:hidden}}
.siren{position:absolute;top:-30%;width:80%;height:160%;mix-blend-mode:screen;opacity:0}
.siren.r{left:-35%;background:radial-gradient(closest-side,rgba(255,20,50,.75),transparent);animation:sirenR .72s steps(1) infinite}
.siren.b{right:-35%;background:radial-gradient(closest-side,rgba(40,90,255,.8),transparent);animation:sirenB .72s steps(1) infinite}
@keyframes sirenR{0%,25%{opacity:1}12%,50%,100%{opacity:0}}
@keyframes sirenB{0%,50%{opacity:0}50%,75%{opacity:1}62%,100%{opacity:0}}
.intro-txt{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 16px;
  animation:shake .55s cubic-bezier(.36,.07,.19,.97) 1.15s both,zoomThrough .5s cubic-bezier(.5,0,1,.5) 2.3s forwards}
@keyframes shake{0%{translate:-18px 12px}25%{translate:12px -8px}50%{translate:-7px 5px}75%{translate:4px -3px}100%{translate:0 0}}
@keyframes zoomThrough{to{scale:7;opacity:0}}
.i-small{font:600 clamp(12px,1.6vw,16px)/1 var(--body);letter-spacing:.42em;text-transform:uppercase;color:#fff;margin-bottom:26px;padding-left:.42em;
  animation:smallIn .7s cubic-bezier(.22,1,.36,1) .2s both}
@keyframes smallIn{from{opacity:0;letter-spacing:.8em}to{opacity:1;letter-spacing:.42em}}
.i-big{position:relative;display:block;font:400 clamp(90px,19vw,250px)/.85 var(--display);text-transform:uppercase;
  animation:slam .45s cubic-bezier(.6,0,1,.6) .7s both}
@keyframes slam{from{opacity:0;scale:3.2;filter:blur(16px)}to{opacity:1;scale:1;filter:blur(0)}}
.i-fx{display:block;filter:drop-shadow(0 6px 0 rgba(0,0,0,.5))}
.i-txt{display:block;color:#fff}
.i-skip{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;translate:-50% 0;font:500 11px var(--body);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.35)}

/* mascot dog: phone only */
.dog{display:none}

/* ================= PHONE: no heroes — logo, glass form, dog at the bottom ================= */
@media (max-width:820px){
  .brandbar{justify-content:center;padding-top:max(14px,env(safe-area-inset-top))}
  .brand{height:24px}
  .hero-char{display:none}
  .hero-copy{justify-content:center;gap:12px;padding-top:max(56px,calc(env(safe-area-inset-top) + 44px));padding-bottom:0}
  .logo-wrap{width:min(210px,56vw)}
  .card{padding:20px 16px 26px}
  .card h1{font-size:28px}
  .lead{margin-bottom:14px;font-size:14px}
  .field{margin-bottom:12px}
  input[type=email],select{height:46px}
  .opt-box{height:48px}
  .btn{height:52px}
  .dog{display:block;position:relative;z-index:3;width:min(150px,40vw);margin-top:-30px;
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));transform-origin:50% 100%;
    animation:dogIn .8s cubic-bezier(.34,1.56,.64,1) calc(var(--t0) + .7s) both,dogIdle 3.2s ease-in-out calc(var(--t0) + 1.6s) infinite}
  .grade{background:linear-gradient(180deg,rgba(20,8,40,.25) 0%,transparent 30%,rgba(11,7,16,.5) 70%,rgba(11,7,16,.8) 100%)}
}
@keyframes dogIn{from{opacity:0;translate:0 60px}to{opacity:1;translate:0 0}}
@keyframes dogIdle{0%,100%{scale:1 1}50%{scale:1.02 .975}}
@media (max-height:760px) and (min-width:821px){
  .logo-wrap{width:min(210px,20vw)}
  .hero-copy{gap:12px}
  .card{padding-top:22px}
  .lead{margin-bottom:14px}
  .field{margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}