/* ============================================================
   Holy History — opening animation (splash)
   A ~7.7s title sequence that walks the spine of biblical
   history before the hub appears: Creation → the Flood → the
   Law → kings, priests & prophets → Christ (manger, cross,
   empty tomb) → the Church.

   Everything is inline SVG line art animated with CSS
   keyframes — no images, no libraries, no build step, and it
   inherits the app's theme tokens so it works on both the dark
   and light palettes.

   The whole timeline runs at 1.95x its original pace (every delay
   and duration below is the original value times 1.95) — same
   animation, just unhurried.

   The whole sequence is driven by the --t* custom properties
   below: every scene's animation-delay is one of them, so the
   pacing can be retimed here without touching the markup.
   Behavior (when it plays, skipping, hand-off) lives in
   js/splash.js.
   ============================================================ */

.splash {
  /* ---- scene clock (ms from the start of the sequence) ---- */
  --t1: 0ms;        /* Creation                       */
  --t2: 936ms;      /* the Flood                      */
  --t3: 1872ms;     /* the Law                        */
  --t4: 2808ms;     /* kings, priests & prophets      */
  --t5a: 3744ms;    /* Christ — the manger            */
  --t5b: 4407ms;    /* Christ — the cross             */
  --t5c: 5070ms;    /* Christ — the empty tomb        */
  --t6: 5733ms;     /* the Church                     */
  --tb: 6396ms;     /* the wordmark                   */
  --tend: 7059ms;   /* fade out to the app underneath */

  position: fixed; inset: 0; z-index: 3000;   /* above every overlay, incl. the walkthrough (2000) */
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1400px 700px at 50% -12%, var(--grad-top) 0%, var(--bg) 62%);
  padding: 6vh 20px calc(5vh + env(safe-area-inset-bottom));
  cursor: pointer;                            /* a tap anywhere skips — see js/splash.js */
  -webkit-tap-highlight-color: transparent;
}
.splash[hidden] { display: none; }
body.splash-lock { overflow: hidden; }

/* The root fade-out is the last animation in the sequence, and js/splash.js
   listens for *its* animationend to tear the splash down — so retiming --tend
   keeps the script in step automatically. */
.splash.sp-playing { animation: sp-out 624ms ease var(--tend) both; }
@keyframes sp-out { from { opacity: 1; } to { opacity: 0; } }

.sp-stage { width: 100%; max-width: 420px; margin: auto; text-align: center; }

.sp-art { display: block; width: 100%; height: auto; overflow: hidden; }  /* the water runs off-frame */
.sp-art path, .sp-art circle, .sp-art rect, .sp-art ellipse, .sp-art line {
  fill: none; stroke: var(--accent-strong); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sp-art .sp-dot { fill: var(--gold-solid); stroke: none; }
.sp-art .sp-soft { stroke: var(--accent); opacity: 0.45; stroke-width: 1.4; }
/* Glows (the first light, the child in the manger, the lamp in the doorway)
   share one radial gradient; its stops are styled here rather than set as
   presentation attributes so they can follow the theme's gold token. */
.sp-art .sp-halo { fill: url(#sp-glow); stroke: none; }
.sp-art .sp-glow-0 { stop-color: var(--gold-solid); stop-opacity: 0.34; }
.sp-art .sp-glow-1 { stop-color: var(--gold-solid); stop-opacity: 0.12; }
.sp-art .sp-glow-2 { stop-color: var(--gold-solid); stop-opacity: 0; }
.sp-art .sp-void { fill: var(--bg); stroke: none; }  /* the mouth of the empty tomb */

/* ---- scenes ------------------------------------------------
   Each scene group fades and settles in, holds, then lifts away
   as the next one begins (their windows overlap, so the cuts
   cross-dissolve rather than blink). */
.sc { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes sp-scene {
  0%   { opacity: 0; transform: scale(0.94); }
  16%  { opacity: 1; transform: scale(1); }
  74%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}
.sc-creation { animation: sp-scene 1092ms ease var(--t1) both; }
.sc-flood    { animation: sp-scene 1092ms ease var(--t2) both; }
.sc-law      { animation: sp-scene 1092ms ease var(--t3) both; }
.sc-kings    { animation: sp-scene 1092ms ease var(--t4) both; }
.sc-manger   { animation: sp-scene 819ms ease var(--t5a) both; }
.sc-cross    { animation: sp-scene 819ms ease var(--t5b) both; }
.sc-tomb     { animation: sp-scene 819ms ease var(--t5c) both; }
.sc-church   { animation: sp-scene 1404ms ease var(--t6) both; }

/* ---- shared inner motions ---------------------------------- */
/* Strokes that draw themselves on. --len is set per element in the markup
   (any value >= the true path length works: the dash simply starts fully
   offset and is reeled in to zero). */
@keyframes sp-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
.sp-drawn { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }

@keyframes sp-pop  { 0% { opacity: 0; transform: scale(0.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sp-swell { 0% { opacity: 0; transform: scale(0.2); } 55% { opacity: 1; } 100% { opacity: 0.55; transform: scale(1.35); } }
@keyframes sp-drift { from { transform: translateX(0); } to { transform: translateX(-40px); } }

.sp-popped { transform-box: fill-box; transform-origin: 50% 50%; }

/* --- 1. Creation: light breaks out of the dark, and the waters part --- */
.sc-creation .sp-burst { animation: sp-swell 819ms ease calc(var(--t1) + 78ms) both; }
.sc-creation .sp-orb   { animation: sp-pop 585ms cubic-bezier(.2,.9,.3,1.3) calc(var(--t1) + 78ms) both; }
.sc-creation .sp-ray   { animation: sp-ray 507ms ease calc(var(--t1) + 254ms) both; }
@keyframes sp-ray { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } }
.sc-creation .sp-horizon { animation: sp-draw 468ms ease calc(var(--t1) + 293ms) both, sp-fade 312ms ease calc(var(--t1) + 293ms) both; }

/* --- 2. the Flood: the ark rides the water, then the bow of the covenant --- */
.sc-flood .sp-waves { animation: sp-drift 3.9s linear var(--t2) infinite; }
.sc-flood .sp-ark   { animation: sp-rise 624ms ease calc(var(--t2) + 78ms) both; }
.sc-flood .sp-bow   { animation: sp-draw 468ms ease calc(var(--t2) + 273ms) both, sp-fade 273ms ease calc(var(--t2) + 273ms) both; }

/* --- 3. the Law: the tablets rise, the commandments are written --- */
.sc-law .sp-tablet { animation: sp-rise 663ms cubic-bezier(.2,.9,.3,1.15) calc(var(--t3) + 78ms) both; }
.sc-law .sp-writ   { animation: sp-draw 390ms ease calc(var(--t3) + 293ms) both, sp-fade 234ms ease calc(var(--t3) + 293ms) both; }
.sc-law .sp-writ:nth-of-type(2n) { animation-delay: calc(var(--t3) + 371ms), calc(var(--t3) + 371ms); }

/* --- 4. kings, priests & prophets: crown, breastpiece, scroll --- */
.sc-kings .sp-g1 { animation: sp-rise 546ms ease calc(var(--t4) + 59ms) both; }
.sc-kings .sp-g2 { animation: sp-rise 546ms ease calc(var(--t4) + 156ms) both; }
.sc-kings .sp-g3 { animation: sp-rise 546ms ease calc(var(--t4) + 254ms) both; }
.sc-kings .sp-gem { animation: sp-pop 390ms ease calc(var(--t4) + 351ms) both; }

/* --- 5a. the manger: the star, then its light on the trough --- */
.sc-manger .sp-star  { animation: sp-pop 468ms cubic-bezier(.2,.9,.3,1.4) calc(var(--t5a) + 39ms) both; }
.sc-manger .sp-beam  { animation: sp-draw 390ms ease calc(var(--t5a) + 254ms) both, sp-fade 273ms ease calc(var(--t5a) + 254ms) both; }
.sc-manger .sp-crib  { animation: sp-rise 468ms ease calc(var(--t5a) + 137ms) both; }

/* --- 5b. the cross: drawn beam by beam, then the light behind it --- */
.sc-cross .sp-beam-v { animation: sp-draw 429ms ease calc(var(--t5b) + 39ms) both, sp-fade 195ms ease calc(var(--t5b) + 39ms) both; }
.sc-cross .sp-beam-h { animation: sp-draw 390ms ease calc(var(--t5b) + 273ms) both, sp-fade 195ms ease calc(var(--t5b) + 273ms) both; }
.sc-cross .sp-halo   { animation: sp-swell 585ms ease calc(var(--t5b) + 234ms) both; }

/* --- 5c. the empty tomb: the stone rolled away, the light let out --- */
.sc-tomb .sp-tomb  { animation: sp-fade 429ms ease calc(var(--t5c) + 39ms) both; }
.sc-tomb .sp-stone { animation: sp-roll 546ms cubic-bezier(.3,.7,.4,1) calc(var(--t5c) + 78ms) both; }
@keyframes sp-roll {
  from { opacity: 0; transform: translateX(-46px) rotate(-150deg); }
  to   { opacity: 1; transform: translateX(0) rotate(0deg); }
}
.sc-tomb .sp-shine { animation: sp-draw 390ms ease calc(var(--t5c) + 273ms) both, sp-fade 273ms ease calc(var(--t5c) + 273ms) both; }

/* --- 6. the Church: the house is built, the doors open, the light goes out --- */
.sc-church .sp-walls  { animation: sp-draw 819ms ease calc(var(--t6) + 39ms) both, sp-fade 273ms ease calc(var(--t6) + 39ms) both; }
.sc-church .sp-roof   { animation: sp-draw 663ms ease calc(var(--t6) + 273ms) both, sp-fade 234ms ease calc(var(--t6) + 273ms) both; }
.sc-church .sp-spire  { animation: sp-rise 624ms cubic-bezier(.2,.9,.3,1.2) calc(var(--t6) + 429ms) both; }
.sc-church .sp-detail { animation: sp-fade 429ms ease calc(var(--t6) + 624ms) both; }
.sc-church .sp-lamp   { animation: sp-swell 663ms ease calc(var(--t6) + 663ms) both; }
/* The scattering — the church going out into the world. */
.sc-church .sp-seed { animation: sp-pop 429ms ease calc(var(--t6) + 741ms) both; }
.sc-church .sp-seed:nth-of-type(2) { animation-delay: calc(var(--t6) + 819ms); }
.sc-church .sp-seed:nth-of-type(3) { animation-delay: calc(var(--t6) + 897ms); }
.sc-church .sp-seed:nth-of-type(4) { animation-delay: calc(var(--t6) + 780ms); }
.sc-church .sp-seed:nth-of-type(5) { animation-delay: calc(var(--t6) + 858ms); }
.sc-church .sp-seed:nth-of-type(6) { animation-delay: calc(var(--t6) + 936ms); }

/* ---- captions ----------------------------------------------
   All six sit stacked in one fixed-height row so the art above
   never shifts as they trade places. */
.sp-captions { position: relative; height: 20px; margin-top: 18px; }
.sp-cap {
  position: absolute; inset: 0; opacity: 0; white-space: nowrap;
  font-family: 'Albert Sans', sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-muted-2);
}
@keyframes sp-caption {
  0% { opacity: 0; transform: translateY(4px); }
  20% { opacity: 1; transform: translateY(0); }
  76% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
.sp-cap-1 { animation: sp-caption 1092ms ease var(--t1) both; }
.sp-cap-2 { animation: sp-caption 1092ms ease var(--t2) both; }
.sp-cap-3 { animation: sp-caption 1092ms ease var(--t3) both; }
.sp-cap-4 { animation: sp-caption 1092ms ease var(--t4) both; }
.sp-cap-5 { animation: sp-caption 2145ms ease var(--t5a) both; }  /* spans all three Christ beats */
.sp-cap-6 { animation: sp-caption 1404ms ease var(--t6) both; }

/* ---- the thread of history --------------------------------
   A gold rule that fills across the whole sequence, with a
   marker lighting at each age — a small echo of the timeline
   the app is built around. */
.sp-thread { position: relative; height: 7px; margin: 20px auto 0; max-width: 260px; }
.sp-thread-track {
  position: absolute; left: 0; right: 0; top: 3px; height: 1px;
  background: rgba(var(--accent-rgb), 0.22);
}
.sp-thread-fill {
  position: absolute; left: 0; right: 0; top: 3px; height: 1px;
  background: var(--gold-solid); transform: scaleX(0); transform-origin: left center;
  animation: sp-fill var(--t6) linear var(--t1) both;
}
@keyframes sp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Each bead is placed (inline, in index.html) at its scene's share of the
   sequence, so the fill reaches it exactly as that age begins. Retiming the
   clock above means revisiting those percentages. */
.sp-beads { position: absolute; inset: 0; }
.sp-bead {
  position: absolute; top: 1px; margin-left: -2.5px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-solid);
  opacity: 0; transform: scale(0.3);
}
@keyframes sp-bead { to { opacity: 1; transform: scale(1); } }
.sp-bead:nth-child(1) { animation: sp-bead 468ms ease var(--t1) forwards; }
.sp-bead:nth-child(2) { animation: sp-bead 468ms ease var(--t2) forwards; }
.sp-bead:nth-child(3) { animation: sp-bead 468ms ease var(--t3) forwards; }
.sp-bead:nth-child(4) { animation: sp-bead 468ms ease var(--t4) forwards; }
.sp-bead:nth-child(5) { animation: sp-bead 468ms ease var(--t5a) forwards; }
.sp-bead:nth-child(6) { animation: sp-bead 468ms ease var(--t6) forwards; }

/* ---- wordmark ---------------------------------------------
   Lands where the hub's own brand sits, so the hand-off to the
   home screen reads as one continuous move. */
.sp-brand {
  margin-top: 22px; opacity: 0;
  font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600;
  letter-spacing: .05em; color: var(--c-heading); line-height: 1.1;
  animation: sp-brand 819ms ease var(--tb) both;
}
@keyframes sp-brand {
  from { opacity: 0; transform: translateY(8px); letter-spacing: .16em; }
  to   { opacity: 1; transform: translateY(0); letter-spacing: .05em; }
}

/* ---- skip ---------------------------------------------------
   A tap anywhere skips; this is the visible, focusable way to do
   it (and the only one a screen reader will announce). */
.sp-skip {
  position: absolute; right: 0; bottom: 0;
  margin: 0 16px calc(14px + env(safe-area-inset-bottom)) 0;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: rgba(var(--ink), 0.06); border: 1px solid rgba(var(--accent-rgb), 0.28);
  color: var(--c-muted); font-family: 'Albert Sans', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; animation: sp-fade 585ms ease 1365ms both;
  transition: background .14s, border-color .14s, color .14s;
}
.sp-skip:hover, .sp-skip:focus-visible {
  background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent);
}
.sp-skip:focus-visible { outline: none; }

@media (min-width: 620px) {
  .sp-stage { max-width: 480px; }
  .sp-brand { font-size: 38px; }
}

/* Motion-sensitive visitors get no title sequence at all: js/splash.js bails
   out before it ever plays, and this is the belt-and-braces if it somehow
   renders anyway. */
@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
}