@font-face{font-family:'Orbitron';src:url('/assets/fonts/orbitron.woff2') format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Exo 2';src:url('/assets/fonts/exo2.woff2') format('woff2');font-weight:200 700;font-display:swap}
:root{
  --space:#05060B; --navy:#0B1026; --brass:#C9A24B; --gold:#E8C878; --ivory:#F3E3B3;
  --cyan:#59E7FF; --magenta:#FF4FD8; --violet:#8B7BFF; --amber:#FF9A3C;
  --hud:rgba(89,231,255,.85);
  --mono:'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
  --disp:'Orbitron',var(--mono);
  --body:'Exo 2',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--space);color:var(--ivory);overflow:hidden;font-family:var(--mono)}
#stage{position:fixed;inset:0;height:100vh;height:100dvh;width:100vw;width:100dvw}
#film,#seamplate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#seamplate{opacity:0}
#seamplate.visible{opacity:1;animation:room-land 2.6s cubic-bezier(.22,.7,.25,1) both}
@keyframes room-land{
  0%{opacity:0;transform:scale(1.16);filter:blur(8px) brightness(2.1) saturate(1.35)}
  30%{opacity:1}
  65%{filter:blur(1px) brightness(1.12) saturate(1.05)}
  100%{opacity:1;transform:scale(1);filter:blur(0) brightness(1) saturate(1)}
}
#flash{position:absolute;inset:0;z-index:15;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 44%,#eafffb 0%,#a8f4ff 26%,rgba(89,231,255,.85) 48%,rgba(11,16,38,.2) 78%,transparent 100%)}
#flash.bloom{animation:bloom 2.6s ease-in-out both}
@keyframes bloom{
  0%{opacity:0}
  28%{opacity:1}
  52%{opacity:1}
  100%{opacity:0}
}
#stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(5,6,11,.5) 100%)}

/* ===== 3D WORDMARK ===== */
#brand{position:absolute;top:8vh;left:0;right:0;text-align:center;opacity:0;transition:opacity 3.2s ease;pointer-events:none;z-index:10;perspective:700px}
#brand.visible{opacity:1}
.wordmark{
  font-family:var(--disp);font-weight:900;
  font-size:clamp(2.4rem,7.2vw,5.8rem);
  letter-spacing:.30em;padding-left:.30em;
  transform:rotateX(14deg);
  filter:
    drop-shadow(0 1px 0 #4a545c)
    drop-shadow(0 2px 0 #39424a)
    drop-shadow(0 3px 0 #2a3238)
    drop-shadow(0 5px 1px #161b20)
    drop-shadow(0 10px 22px rgba(0,0,0,.85))
    drop-shadow(0 0 34px rgba(205,235,255,.45));
}
.wordmark i,.wordmark .wh,.wordmark .wq{
  display:inline-block;font-style:normal;
  background:linear-gradient(178deg,#FFFFFF 0%,#E9F1F6 24%,#AFC2CD 44%,#5F707C 54%,#8FA4B0 62%,#D8E4EA 78%,#FFFFFF 100%);
  background-size:100% 200%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 6s ease-in-out infinite;
}
@keyframes sheen{0%,100%{background-position:0% 0%}50%{background-position:0% 100%}}

/* poster veil: masks WebKit's native play glyph until real playback begins */
#veil{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:5;opacity:1;transition:opacity .7s ease;pointer-events:none}
#veil.off{opacity:0}
@media (max-width:700px),(max-aspect-ratio:3/4){#veil{object-position:50% 38%}}

/* resting state: command room alive — screens flicker, stars shimmer */
#ambientfx{position:absolute;inset:0;z-index:12;pointer-events:none;opacity:0;transition:opacity 2.5s ease}
#ambientfx.on{opacity:1}
#ambientfx.hidden{display:none}
#ambientfx .stars{position:absolute;inset:0;background:
 radial-gradient(1px 1px at 15% 12%,#fff,transparent),radial-gradient(1px 1px at 72% 8%,#fff,transparent),
 radial-gradient(1.5px 1.5px at 38% 22%,#fff,transparent),radial-gradient(1px 1px at 88% 18%,#fff,transparent),
 radial-gradient(1px 1px at 55% 6%,#fff,transparent),radial-gradient(1px 1px at 8% 30%,#fff,transparent),
 radial-gradient(1.5px 1.5px at 93% 34%,#fff,transparent);
 background-repeat:no-repeat;animation:twinkle 4.5s ease-in-out infinite;mix-blend-mode:screen;opacity:.7}
@keyframes twinkle{0%,100%{opacity:.35}30%{opacity:.8}55%{opacity:.45}80%{opacity:.75}}
#ambientfx .screenglow{position:absolute;left:18%;right:18%;top:26%;bottom:38%;
 background:radial-gradient(ellipse at center,rgba(89,231,255,.20),rgba(89,231,255,.06) 55%,transparent 75%);
 mix-blend-mode:screen;animation:scrflicker 3.2s steps(24) infinite}
@keyframes scrflicker{
 0%,100%{opacity:.55}8%{opacity:.75}12%{opacity:.5}22%{opacity:.85}30%{opacity:.6}
 41%{opacity:.9}47%{opacity:.55}60%{opacity:.8}68%{opacity:.5}82%{opacity:.7}90%{opacity:.6}}
/* brand inside the glass panel */
#panelbrand{position:absolute;left:47%;top:38.7%;transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:column;gap:.35em}
.pb-name{font-family:var(--disp);font-weight:900;font-size:clamp(1.1rem,2.6vw,2.1rem);letter-spacing:.26em;padding-left:.26em;
 background:linear-gradient(100deg,#E9F1F6 0%,#AFC2CD 30%,#fff 48%,#8FA4B0 60%,#E9F1F6 100%);background-size:250% 100%;
 -webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 0 14px rgba(205,235,255,.55)) drop-shadow(0 2px 5px rgba(0,0,0,.9));
 animation:glisten 4.5s ease-in-out infinite}
@keyframes glisten{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.pb-url{font-family:var(--mono);font-size:clamp(.5rem,1.1vw,.8rem);letter-spacing:.42em;padding-left:.42em;color:var(--cyan);
 text-shadow:0 0 12px rgba(89,231,255,.8),0 0 34px rgba(89,231,255,.35);animation:pulse 3.4s ease-in-out infinite}

/* ORBIT — animated entry: letters streak in from deep space and land */
.wordmark .wo i{opacity:0;animation:sheen 6s ease-in-out infinite, orbit-in .85s cubic-bezier(.18,.9,.28,1.04) both}
.wordmark .wo i:nth-child(1){animation-delay:0s,.10s}
.wordmark .wo i:nth-child(2){animation-delay:0s,.22s}
.wordmark .wo i:nth-child(3){animation-delay:0s,.34s}
.wordmark .wo i:nth-child(4){animation-delay:0s,.46s}
.wordmark .wo i:nth-child(5){animation-delay:0s,.58s}
@keyframes orbit-in{
  0%{opacity:0;transform:translateY(-1.2em) translateX(.6em) scale(2.6);filter:blur(10px)}
  60%{opacity:1;filter:blur(0)}
  82%{transform:translateY(.04em) scale(.985)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
/* HQ — stamped right after ORBIT lands (~1.45s): H at 1.5s, Q at 2.0s */
.wordmark .wh,.wordmark .wq{opacity:0;animation:sheen 6s ease-in-out infinite, stamp .38s cubic-bezier(.34,1.4,.44,1) both}
.wordmark .wh{animation-delay:0s,1.5s}
.wordmark .wq{animation-delay:0s,2s}
@keyframes stamp{
  0%{opacity:0;transform:scale(3.2);filter:blur(6px) brightness(2.6)}
  55%{opacity:1;filter:blur(0) brightness(1.6)}
  75%{transform:scale(.94)}
  100%{opacity:1;transform:scale(1);filter:brightness(1)}
}
/* tagline — gaseous condensation: Q lands ~3.35s → gas from 3.7s */
.tagline{
  margin-top:1.25rem;font-family:var(--body);font-weight:300;
  font-size:clamp(.72rem,1.7vw,1.05rem);letter-spacing:.5em;padding-left:.5em;
  color:var(--ivory);text-transform:uppercase;
  text-shadow:0 0 14px rgba(89,231,255,.65),0 0 40px rgba(89,231,255,.3),0 2px 6px rgba(0,0,0,.8);
  opacity:0;animation:gas 2.2s cubic-bezier(.22,.7,.3,1) 2.6s both;
}
@keyframes gas{
  0%{opacity:0;letter-spacing:1.1em;filter:blur(16px);transform:translateY(.55em)}
  35%{opacity:.55}
  100%{opacity:1;letter-spacing:.5em;filter:blur(0);transform:translateY(0)}
}
.tagline em{font-style:normal;color:#EAF6FF;text-shadow:0 0 16px rgba(205,235,255,.85),0 2px 6px rgba(0,0,0,.8)}

/* controls */
#soundToggle,#skipIntro{position:absolute;bottom:calc(2.2vh + env(safe-area-inset-bottom));background:rgba(5,6,11,.55);border:1px solid rgba(89,231,255,.4);color:var(--hud);font-family:var(--disp);font-weight:500;font-size:.62rem;letter-spacing:.24em;padding:.6em 1.1em;cursor:pointer;backdrop-filter:blur(6px);transition:all .3s;z-index:30}
#soundToggle{left:2.2vw;animation:beckon 2.4s ease-in-out infinite}
@keyframes beckon{
  0%,100%{box-shadow:0 0 0 0 rgba(89,231,255,.45);border-color:rgba(89,231,255,.4)}
  50%{box-shadow:0 0 18px 4px rgba(89,231,255,.35);border-color:var(--cyan)}
}
#soundToggle[aria-pressed="true"]{animation:none;border-color:var(--cyan);color:#fff}
#skipIntro{right:2.2vw}
#soundToggle:hover,#skipIntro:hover{border-color:var(--cyan);color:#fff;box-shadow:0 0 16px rgba(89,231,255,.3)}
#skipIntro.hidden,#soundToggle.hidden{display:none}

/* ===== SEAM: floating HUD screen ===== */
#seam{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 2.2s ease;z-index:20;perspective:1100px}
#seam.visible{opacity:1;pointer-events:auto}
#seam.visible #console{animation:project 1.8s cubic-bezier(.18,.78,.26,1) both}
@keyframes project{
  0%{transform:translate(-4.5vw,-13vh) scale(.26) rotateY(-4deg);opacity:0;filter:brightness(2.4) blur(2px)}
  45%{opacity:1}
  100%{transform:translate(0,0) scale(1) rotateY(-4deg);filter:brightness(1) blur(0)}
}
#console{
  position:relative;width:min(440px,90vw);
  background:linear-gradient(165deg,rgba(9,20,32,.66),rgba(6,12,24,.72));
  border:1px solid rgba(89,231,255,.55);
  border-radius:6px;padding:1.9rem 2rem 1.7rem;
  box-shadow:
    0 0 0 1px rgba(89,231,255,.12),
    0 0 28px rgba(89,231,255,.22),
    0 0 90px rgba(89,231,255,.10),
    inset 0 0 50px rgba(89,231,255,.06);
  backdrop-filter:blur(9px) saturate(1.2);
  transform:rotateY(-4deg) rotateX(1.5deg);
}
#console::before{content:'';position:absolute;inset:0;border-radius:6px;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(89,231,255,.045) 0 1px,transparent 1px 3px)}
#console::after{content:'';position:absolute;left:8%;right:8%;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.8}
.corner{position:absolute;width:14px;height:14px;border-color:var(--cyan);border-style:solid;opacity:.9}
.c-tl{top:-2px;left:-2px;border-width:2px 0 0 2px}
.c-tr{top:-2px;right:-2px;border-width:2px 2px 0 0}
.c-bl{bottom:-2px;left:-2px;border-width:0 0 2px 2px}
.c-br{bottom:-2px;right:-2px;border-width:0 2px 2px 2px 0;border-width:0 2px 2px 0}

.os-bar{display:flex;align-items:baseline;gap:.7em;border-bottom:1px solid rgba(89,231,255,.3);padding-bottom:.75rem;margin-bottom:1.25rem}
.os-name{font-family:var(--disp);font-weight:700;color:var(--hud);letter-spacing:.3em;font-size:.8rem;text-shadow:0 0 10px rgba(89,231,255,.6)}
.os-sub{color:rgba(89,231,255,.45);font-size:.55rem;letter-spacing:.24em}
.os-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.phase{transition:opacity .6s ease}
.hidden{display:none}
.render-line{font-family:var(--disp);font-weight:700;font-size:1rem;letter-spacing:.4em;color:var(--hud);text-shadow:0 0 16px rgba(89,231,255,.55)}
.ellipsis::after{content:'';animation:dots 1.4s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.render-track{margin-top:1.1rem;height:3px;background:rgba(89,231,255,.15);border-radius:2px;overflow:hidden}
.render-fill{height:100%;width:38%;background:linear-gradient(90deg,var(--cyan),#fff,var(--cyan));border-radius:2px;animation:scan 1.5s ease-in-out infinite;box-shadow:0 0 8px var(--cyan)}
@keyframes scan{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}

.prompt-line{font-family:var(--disp);font-weight:500;font-size:.74rem;letter-spacing:.24em;color:var(--hud);margin-bottom:1.2rem;text-shadow:0 0 12px rgba(89,231,255,.5)}
.prompt-line.ok{color:var(--gold);text-shadow:0 0 12px rgba(232,200,120,.6)}
#manifold label{display:block;font-size:.56rem;letter-spacing:.3em;color:rgba(89,231,255,.6);margin:.95rem 0 .3rem}
#manifold input,#manifold select{width:100%;background:rgba(5,10,18,.62);border:1px solid rgba(89,231,255,.35);border-radius:3px;color:#DFF6FF;font-family:var(--mono);font-size:16px;padding:.6em .75em;outline:none;transition:border-color .3s,box-shadow .3s;-webkit-appearance:none;appearance:none}
#manifold input:focus,#manifold select:focus{border-color:var(--cyan);box-shadow:0 0 16px rgba(89,231,255,.3)}
#manifold input::placeholder{color:rgba(89,231,255,.28)}
#manifold select:invalid{color:rgba(89,231,255,.4)}
.hp{position:absolute;left:-9999px;top:-9999px;height:1px;width:1px;overflow:hidden}
#cta{margin-top:1.5rem;width:100%;background:linear-gradient(120deg,rgba(89,231,255,.14),rgba(232,200,120,.22));border:1px solid var(--brass);border-radius:3px;color:var(--gold);font-family:var(--disp);font-weight:700;font-size:.8rem;letter-spacing:.32em;padding:.95em;cursor:pointer;transition:all .3s;text-shadow:0 0 10px rgba(232,200,120,.4)}
#cta:hover{background:linear-gradient(120deg,rgba(89,231,255,.3),rgba(232,200,120,.42));color:#06121e;text-shadow:none;box-shadow:0 0 26px rgba(232,200,120,.4)}
#cta:disabled{opacity:.5;cursor:wait}
#formMsg{margin-top:.85rem;font-size:.6rem;letter-spacing:.18em;color:var(--amber);min-height:1em}
#formMsg.ok{color:var(--cyan)}
.done-sub{font-family:var(--body);font-weight:300;font-size:.78rem;letter-spacing:.12em;color:rgba(223,246,255,.8);line-height:1.8}

/* ===== MOBILE ===== */
@media (max-width:700px),(max-aspect-ratio:3/4){
  #film,#seamplate{object-position:50% 38%}
  #brand{top:max(7vh, env(safe-area-inset-top))}
  .wordmark{font-size:clamp(2rem,11vw,3rem);letter-spacing:.22em;padding-left:.22em}
  .tagline{letter-spacing:.3em;padding-left:.3em}
  #console{transform:none;padding:1.4rem 1.2rem 1.2rem;width:min(420px,92vw)}
  #seam.visible #console{animation:project-m 1.1s cubic-bezier(.16,.84,.3,1) both}
  @keyframes project-m{0%{transform:scale(.3);opacity:0;filter:brightness(2.2)}100%{transform:scale(1);opacity:1;filter:brightness(1)}}
  #seam{align-items:center;padding-bottom:env(safe-area-inset-bottom)}
}
@media (prefers-reduced-motion:reduce){
  .render-fill,.os-dot,.ellipsis::after{animation:none}
  .wo i,.wh,.wq,.tagline{animation:none;opacity:1;filter:none;transform:none}
  #seam.visible #console{animation:none}
}