/* ════════════════════════════════════════════════════════════════
   COSMOS Boot Splash — the SAME splash used in the app's login → home
   transition (cosmos-boot/CosmosBoot.jsx + cosmos-boot.css), ported to
   the static marketing landing. Scope is `.cosmos-boot`; the only globals
   are the prefixed keyframes. Depends only on COSMOS design tokens.

   The marketing root carries both `id="intro"` (so site.js knows the intro
   owns the hero reveals) and `class="cosmos-boot"` (so these styles apply).
   It is hidden until JS confirms it can drive + dismiss it, so a JS failure
   leaves the landing page visible rather than a stuck overlay.
   ════════════════════════════════════════════════════════════════ */

.cosmos-boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;            /* shown only once JS is present (html.js) */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: var(--color-page);
  transition: opacity .5s ease, transform .6s cubic-bezier(.4, 0, .2, 1), filter .5s ease;
}
html.js .cosmos-boot { display: flex; }
/* the dissolve, played once the landing page is revealed underneath */
.cosmos-boot.is-done {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(6px);
  pointer-events: none;
}

/* ── brand lockup that fills the centre and melts to the 5-dot mark (COM-388) ──
   The stage sizes to the wordmark viewBox (339×200, ~1.7:1). overflow is
   visible so the mark's melt (which translates past the top-left of the box)
   never clips. */
.cosmos-boot .boot-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(76vw, 600px);
  max-width: 92vw;
}
.cosmos-boot .boot-logo {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

/* The kinetic timeline is driven by the Web Animations API (explicit JS
   durations), so a CSS `animation-duration` override can't reach it — the
   driver branches to a reduced static path in JS instead. This only calms
   the looping decorative motion (galaxy spin / twinkle / dissolve). */
@media (prefers-reduced-motion: reduce) {
  .cosmos-boot,
  .cosmos-boot * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}