/*
 * Boot splash: the Muse wordmark (Volt's bolt, then "Muse") from the first paint
 * until the session check settles, then src/shell/splash.ts fades it out and
 * removes it.
 *
 * Loaded from <head> before the bundle, so it cannot read src/ui/tokens.css: the
 * surface, ink and accent colours are copied here, with the same theme resolution
 * (src/shell/splash.tokens.test.ts keeps them in step). The bolt is the accent,
 * like the wordmark in the app (src/ui/wordmark.css). A file, not a <style> block,
 * because the CSP allows only same-origin stylesheets.
 *
 * The wordmark uses the system stack on purpose: Geist arrives with the bundle,
 * and a font swap mid-splash would show.
 */

/* ── Theme ───────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --splash-surface: #f2f3f1;
  --splash-ink: #0b0c0d;
  --splash-accent: #8a6a18;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --splash-surface: #0b0c0d;
    --splash-ink: #f1f2f0;
    --splash-accent: #e8b44a;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --splash-surface: #0b0c0d;
  --splash-ink: #f1f2f0;
  --splash-accent: #e8b44a;
}

/* Even the frames before the splash itself paints are themed, never black. */
html,
body {
  background: var(--splash-surface);
}

/* ── Splash ──────────────────────────────────────────────────────────────── */
.splash {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* Own reset: the safe-area padding must sit inside the height even if the
     app's base.css never loads. */
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--splash-surface);
  color: var(--splash-ink);
  opacity: 1;
  transition: opacity 180ms cubic-bezier(0.4, 0, 1, 1);
}

.splash--leaving {
  opacity: 0;
  pointer-events: none;
}

.splash__icon {
  display: block;
  width: 44px;
  height: 56px;
  fill: var(--splash-accent);
  /* A slow boot gets a gentle pulse; the delay keeps a fast one still. */
  animation: splash-pulse 1600ms cubic-bezier(0.65, 0, 0.35, 1) 350ms infinite;
}

.splash__wordmark {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
}

@keyframes splash-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
/* Same resolution as tokens.css: the OS preference until theme-init.js or
   MotionProvider sets data-motion, then the attribute. No pulse, no fade. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion='full']) .splash,
  :root:not([data-motion='full']) .splash__icon {
    animation: none;
    transition: none;
  }
}

:root[data-motion='reduced'] .splash,
:root[data-motion='reduced'] .splash__icon {
  animation: none;
  transition: none;
}