/* =============================================================================
   SOUL PILOT — SPLASH OVERLAY
   frontend/css/splash.css

   Cross-surface calibration ceremony. The splash overlay element (#splash) is
   built dynamically by frontend/js/shells/splash.js and presents on:
     - Surface 1 (landing) — first visit ceremony
     - Surface 2 (threshold_1 arrival) — handoff from marketing to journey
     - Surface 3 (reserved) — no current invocation; module remains agnostic

   Composition (DOM order):
     #splash > .splash-instrument > .sring × 4 + .sticks + .sstar + .ssweep
     #splash > .sword > .eye + .nm + .sb
     #splash > .sstatus > .sphrase + .strack > .sfill + .scoords

   Per-surface overrides (e.g. --splash-sword-top positioning, sword fade-in
   timing) live in surface1.css. The base ceremony — rings, ticks, star,
   sweep, wordmark register, status strip — is owned by this stylesheet.

   Extracted from thresholds.css on 2026-05-14 as part of the surface-split
   restructuring. Splash is a cross-surface component and earns its own file.

   Token source: frontend/css/tokens.css. Surface-specific overrides:
     - surface1.css §SPLASH OVERRIDES (S1 + S2) — sword-top positioning
     - shells/splash.js — variant-driven timing (s1 / s2 paths)
   ============================================================================= */


/* ── #splash — overlay host ────────────────────────────────────────────────── */
#splash {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #03050b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 2s var(--ease-unfurl), visibility 0s linear 2s;
}

#splash.dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-instrument {
  position: relative;
  /* Constrain width by viewport HEIGHT as well as width so the derived
     height (via aspect-ratio: 1/1) always fits without max-height needing
     to override the aspect ratio. Prevents oblong rings on short-and-wide
     viewports where max-height would otherwise compress the square. */
  width: min(700px, 82vw, 82vh);
  aspect-ratio: 1 / 1;
}


/* ── Four concentric rings — staged unfurl ─────────────────────────────────── */
.sring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: 50%;
  transform: scale(0.9);
  opacity: 0;
}
.sring.r1 { inset: 6%;  animation: sringIn 2.4s 0.2s var(--ease-unfurl) forwards; }
.sring.r2 { inset: 18%; border-color: rgba(201, 168, 76, 0.30);
            animation: sringIn 2.4s 0.7s var(--ease-unfurl) forwards; }
.sring.r3 { inset: 30%; border-color: rgba(201, 168, 76, 0.16);
            animation: sringIn 2.4s 1.2s var(--ease-unfurl) forwards; }
.sring.r4 { inset: 42%; border-color: rgba(232, 213, 163, 0.26);
            animation: sringIn 2.4s 1.7s var(--ease-unfurl) forwards; }
@keyframes sringIn { to { opacity: 1; transform: scale(1); } }


/* ── Tick marks around the outermost ring ──────────────────────────────────── */
.sticks {
  position: absolute;
  inset: 6%;
  opacity: 0;
  animation: fadeIn 1.6s 2.4s var(--ease-unfurl) forwards;
}
.sticks svg { width: 100%; height: 100%; }


/* ── Central eight-point star ──────────────────────────────────────────────── */
.sstar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  animation: sstarIn 2.4s 2.6s var(--ease-unfurl) forwards;
}
.sstar svg {
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 0 24px rgba(232, 201, 122, 0.55))
    drop-shadow(0 0 60px rgba(232, 201, 122, 0.30));
}
@keyframes sstarIn {
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}


/* ── Rotating sweep needle ─────────────────────────────────────────────────── */
.ssweep {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44%;
  height: 1px;
  transform-origin: 0 50%;
  background: linear-gradient(
    90deg,
    rgba(232, 201, 122, 0.85),
    rgba(232, 201, 122, 0.15) 65%,
    transparent
  );
  opacity: 0;
  animation:
    fadeIn 0.8s 2s forwards,
    srotate 7s 2.8s linear infinite;
  transform: translate(0, -50%);
}
.ssweep::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-whisper);
  box-shadow: 0 0 12px rgba(232, 201, 122, 0.8);
}
@keyframes srotate { to { transform: translate(0, -50%) rotate(360deg); } }


/* ── Brand wordmark + tagline (centered) ───────────────────────────────────── */
.sword {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  opacity: 0;
  animation: fadeInUp 2s 3.2s var(--ease-unfurl) forwards;
}
.sword .eye {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.48em;
  color: var(--gold-mid);
  text-transform: uppercase;
  text-indent: 0.48em;
}
.sword .nm {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  color: var(--gold-whisper);
  letter-spacing: 0.04em;
  text-shadow: 0 0 60px rgba(232, 201, 122, 0.35);
  line-height: 1;
  white-space: nowrap;
}
.sword .sb {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--parchment-mid);
  font-size: clamp(14px, 1.15vw, 17px);
  max-width: 34ch;
  text-align: center;
  line-height: 1.5;
}
@keyframes fadeInUp {
  0%   { opacity: 0; transform: translate(-50%, -42%); }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes fadeIn { to { opacity: 1; } }


/* ── Bottom status strip (phrase + progress + coords) ──────────────────────── */
.sstatus {
  position: absolute;
  bottom: 6vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  opacity: 0;
  animation: fadeIn 1.2s 1s forwards;
  width: min(520px, 80vw);
}
.sphrase {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--parchment-mid);
  font-size: 15px;
  letter-spacing: 0.03em;
  min-height: 22px;
  text-align: center;
  opacity: 0.9;
  transition: opacity 0.3s;
}
.strack {
  width: 220px;
  height: 1px;
  background: rgba(201, 168, 76, 0.2);
  position: relative;
  overflow: hidden;
}
.sfill {
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  animation: sprog 6.4s 1s linear forwards;
}
.scoords {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--parchment-deep);
  text-transform: uppercase;
  display: flex;
  gap: 28px;
}
.scoords span.g { color: var(--gold-mid); }
@keyframes sprog { to { inset: 0 0 0 0; } }