/* SpaceEx — the opening splash: the animated mark playing full-bleed behind
   the build progress, and the immersive (chrome-hidden) mode. */

/* ── Splash film ─────────────────────────────────────────────────────────── */
/* Framed, not full-bleed. The source is 1152px wide; stretched across a 5K
   display it broke up badly, so it is capped at a size it can actually fill
   and the page background carries the rest. */
.loader-film{
  width:min(760px,86vw);aspect-ratio:16/9;position:relative;
  border-radius:clamp(14px,1.6vw,22px);overflow:hidden;
  background:#04070d;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 34px 90px -20px rgba(0,0,0,.9),
             0 0 120px -30px rgba(242,198,124,.3),
             inset 0 1px 0 rgba(255,255,255,.07);
}
.loader-video{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .9s ease;
  will-change:opacity;
}
.loader-video.in{opacity:1}

/* A wash of the film's own colour bleeding past the frame, so the card is lit
   into the page rather than pasted onto it. */
.loader-film::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -60px 60px -40px rgba(5,9,15,.9);
}

/* Two washes over the film: a vignette so the edges sink into the page
   background, and a floor so the wordmark and bar never fight the picture. */
/* A soft cyan haze behind the card, the one thing on an otherwise dark page. */
.loader-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(64% 46% at 50% 34%,rgba(242,198,124,.07) 0%,rgba(242,198,124,.02) 46%,transparent 72%),
    radial-gradient(120% 90% at 50% 20%,#0b0f18 0%,#06080e 46%,#030509 100%);
  z-index:0;
}
.loader-film{z-index:1}

/* The type sits under the card rather than on top of the picture. */
.loader-inner{position:relative;z-index:2}
.loader.filmic{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(24px,4.4vh,46px);
  padding:24px 0 calc(24px + env(safe-area-inset-bottom));
}
.loader.filmic .loader-inner{padding:0 24px;width:min(560px,100%)}

/* The film IS the mark, so the still logo stands down while it plays. */
.loader.filmic .loader-logo{display:none}
.loader-word{
  display:none;font-family:var(--font);font-weight:600;
  font-size:clamp(34px,5.4vw,58px);letter-spacing:-.035em;line-height:1;
  margin:0 0 20px;
  text-shadow:0 4px 34px rgba(5,9,15,.95),0 1px 3px rgba(5,9,15,.8);
}
.loader.filmic .loader-word{display:block}
.loader-word b{font-weight:700;color:var(--cy)}
.loader-word .loader-tag{
  display:block;font-family:var(--font);font-weight:500;
  font-size:clamp(10px,1.5vw,12px);letter-spacing:.26em;text-transform:uppercase;
  color:#a9bcd6;margin-top:13px;
}
.loader.filmic .loader-label{font-size:11px;letter-spacing:.2em;color:#8ca2bd}
.loader.filmic .loader-bar{width:min(240px,66vw);margin-top:13px}
.loader.filmic .loader-hint{display:none}

/* Skip. Hidden until the film has had a moment, so it never reads as the
   first thing to do. */
.loader-skip{
  position:absolute;z-index:3;
  right:calc(18px + env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 17px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);
  background:rgba(10,18,32,.6);border:1px solid var(--line-soft);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .35s ease,transform .35s ease,visibility .35s,color .18s ease,background .18s ease;
}
.loader-skip.in{opacity:1;visibility:visible;transform:none}
.loader-skip:hover{color:var(--ink);background:rgba(10,18,32,.9)}
.loader-skip svg{width:14px;height:14px}

/* The exit: the film pushes in and dissolves rather than simply blinking off,
   so the scene behind it reads as the same world continued. */
.loader.done .loader-film{
  transform:scale(1.06);opacity:0;
  transition:opacity .6s ease,transform .9s cubic-bezier(.22,.61,.36,1);
}
.loader.done .loader-inner{transform:translateY(-10px);opacity:0;transition:opacity .45s ease,transform .6s ease}

/* Short or wide-but-short windows: the card has to give the type room. */
@media (max-height:620px){
  .loader-film{width:min(520px,62vw)}
  .loader.filmic{gap:18px}
}
@media (max-width:520px){
  .loader-film{width:min(440px,88vw)}
  .loader.filmic .loader-inner{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .loader-word{margin-bottom:16px}
}

/* ── Immersive mode: the HUD steps aside and the scene takes the screen ──── */
.immersive .topbar,
.immersive .hero,
.immersive .panel,
.immersive .dock,
.immersive .credit,
.immersive .menu-panel{
  opacity:0;visibility:hidden;pointer-events:none;
}
.immersive .topbar{transform:translateY(-18px)}
.immersive .panel{transform:translateX(24px)}
.immersive .dock{transform:translate(-50%,24px)}
.topbar,.credit{transition:opacity .4s ease,visibility .4s,transform .5s var(--ease)}
/* The tool bar stays — it is the only way back out. */
.immersive .scrim{opacity:.3;transition:opacity .5s ease}

/* The full-screen tool swaps its arrows for the way back out. */
#toggleFull .ic-out{display:none}
#toggleFull[aria-pressed="true"] .ic-in{display:none}
#toggleFull[aria-pressed="true"] .ic-out{display:block}