@font-face{font-family:"Press Start 2P";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/press-start-2p-latin.woff2) format("woff2")}

:root{--cyan:#4bd7ff;--glow:#24aeff;--ink:#d0f6ff;--night:#020913;--pixel:"Press Start 2P",ui-monospace,"Courier New",monospace}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--night);color:#d9f3ff;font-family:Arial,sans-serif}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Stage: always fills the viewport (dvh handles mobile browser chrome) */
.stage{position:fixed;inset:0;height:100vh;height:100dvh;overflow:hidden;touch-action:none;isolation:isolate;background:var(--night);-webkit-user-select:none;user-select:none}
.layer{position:absolute;inset:0;will-change:transform}
.fullcanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---- Layer 1: warehouse (values from Backround-complete.html) ---- */
.bg-layer{transform:translate3d(var(--bx,0px),var(--by,0px),0);pointer-events:none}
.bg{position:absolute;inset:-5%;background:url(../assets/warehouse.jpg) center/cover no-repeat;transform:scale(1.045)}
.ambient{position:absolute;inset:-5%;background:radial-gradient(ellipse at 50% 58%,transparent 20%,#01040a70 100%)}
.darkness{position:absolute;inset:-6%;background:#010307;opacity:1}
.surge{position:absolute;inset:-6%;background:radial-gradient(ellipse at 50% 40%,#9fe2ff,#2a8cff 45%,transparent 80%);mix-blend-mode:screen;opacity:0}

/* ---- Layer 2: hologram light cast ---- */
.holo-cast{position:absolute;left:50%;top:49%;width:min(140vw,1900px);height:min(110vh,1150px);transform:translate(-50%,-50%) translate3d(var(--cx,0px),var(--cy,0px),0);background:radial-gradient(ellipse 50% 42% at 50% 50%,#1a8dff55,#0a5cff22 45%,transparent 75%);mix-blend-mode:screen;opacity:0;pointer-events:none}
.floorlight{position:absolute;left:50%;top:68%;width:min(65vw,800px);height:16%;transform:translateX(-50%) translate3d(var(--cx,0px),0,0);background:radial-gradient(ellipse,#009cff45,transparent 70%);filter:blur(24px);opacity:0;pointer-events:none}

/* ---- Layer 3: hologram (values from Backround-complete.html) ---- */
.logo{position:absolute;left:50%;top:49%;width:min(78vw,1020px);aspect-ratio:855/300;transform:translate(-50%,-50%) translate3d(var(--hx,0px),var(--hy,0px),0) rotateY(var(--rot,0deg));filter:drop-shadow(0 0 10px #008fff);will-change:transform;pointer-events:none}
.logo canvas{display:block;width:100%;height:100%}
.logo img{display:none}

/* ---- Layer 5: kart (values from kart-with-smoke.html) ---- */
.kart-layer{transform:translate3d(var(--kx,0px),var(--ky,0px),0);pointer-events:none}
#kart{position:absolute;left:0;top:54%;width:clamp(250px,34vw,540px);height:auto;transform:translate(-120%,-50%);filter:drop-shadow(0 0 9px #1cbbff80);pointer-events:none}
@media(max-width:600px){#kart{width:290px;top:52%}}

.flash{position:absolute;inset:0;background:radial-gradient(circle at var(--fx,50%) var(--fy,55%),#bff1ff 0,#38b6ff66 12%,transparent 38%);mix-blend-mode:screen;opacity:0;pointer-events:none}

/* ---- COMING SOON ---- */
.soon{position:absolute;left:50%;bottom:13%;margin:0;transform:translateX(-50%);font:clamp(14px,1.7vw,26px)/1 var(--pixel);letter-spacing:.42em;padding-left:.42em;color:var(--ink);text-shadow:0 0 6px var(--glow),0 0 18px #0a7dff,0 0 2px #fff;white-space:nowrap;pointer-events:none;opacity:0}
.soon.on{opacity:1}
.soon.live #soonText{animation:hum 4.2s steps(1) infinite}
.cursor{display:inline-block;width:.8em;height:1em;margin-left:.1em;vertical-align:top;background:var(--cyan);box-shadow:0 0 10px var(--glow);animation:blink 1s steps(1) infinite}
.soon.live .cursor{display:none}
@keyframes blink{50%{opacity:0}}
@keyframes hum{0%,100%{opacity:1}91%{opacity:.55}93%{opacity:1}96%{opacity:.75}}

/* ---- Footer ---- */
.footer{position:absolute;left:10px;right:10px;bottom:max(18px,env(safe-area-inset-bottom));display:flex;justify-content:center;flex-wrap:wrap;gap:6px 30px;font:clamp(9px,.8vw,12px)/1.9 var(--pixel);letter-spacing:.06em;text-align:center;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.footer.on{opacity:1;pointer-events:auto}
.scrim{position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(to top,#010409e6,#01040980 45%,transparent);opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.scrim.on{opacity:1}
.footer a{color:#cfe6f5;text-decoration:none;text-shadow:0 2px 10px #000,0 0 8px #0a6fd080;padding:4px 2px;transition:color .2s,text-shadow .2s}
.footer a:hover,.footer a:focus-visible{color:#fff;text-shadow:0 0 6px var(--cyan),0 0 16px var(--glow);outline:none}
.footer a:focus-visible{box-shadow:0 2px 0 var(--cyan)}

/* ---- Controls ---- */
.controls{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));display:flex;gap:8px;z-index:5}
.controls button{font:8px/1 var(--pixel);letter-spacing:.08em;text-transform:uppercase;background:#041422b3;color:#bfe9ff;border:1px solid #2f86b0;border-radius:3px;padding:9px 10px;cursor:pointer;box-shadow:0 0 8px #0a6fd040;transition:border-color .2s,color .2s}
.controls button:hover,.controls button:focus-visible{color:#fff;border-color:var(--cyan);outline:none}
.controls button[aria-pressed=true]{border-color:var(--cyan);color:#fff}

/* ---- Mobile portrait: warehouse crops, hologram stays centred (values from Backround-complete.html) ---- */
@media(max-aspect-ratio:3/4){
  .bg{inset:-5% -50%}
  .logo{width:93vw;top:47%}
  .holo-cast{top:47%;width:200vw;height:80vh}
  .floorlight{top:57%;width:95vw}
  .soon{bottom:auto;top:66%;font-size:clamp(11px,3.4vw,15px)}
  .footer{flex-direction:column;gap:2px;font-size:clamp(9px,2.6vw,11px)}
  .scrim{height:20%}
}
@media(max-height:430px) and (orientation:landscape){
  .logo{width:min(78vw,1020px,140vh)}
  .soon{bottom:17%}
  .footer{bottom:8px;font-size:8px}
}

@media(prefers-reduced-motion:reduce){
  .soon.live #soonText,.cursor{animation:none}
  .footer{transition:none}
}