/* =========================================================
   Opening splash — "fire inside a drop of water"
   1  outline draws        0.15s → 1.15s
   2  fire rises inside    0.55s → 1.75s  (+ flame linework 0.8s → 1.9s)
   3  wordmark + counter   1.0s  → 1.6s
   4  exit (JS): the drop opens as a window onto the page
   ========================================================= */
.splash { display: none; }
.splash-on body { overflow: hidden; }
.splash-on .splash {
  display: block; position: fixed; inset: 0; z-index: 1000; color: var(--paper);
  pointer-events: auto; cursor: pointer;
  /* Safety net: if the script never runs, get out of the way after 6s. */
  animation: splash-safety .4s ease 6s forwards;
}
.splash.is-js { animation: none; }
@keyframes splash-safety { to { opacity: 0; visibility: hidden; } }
.no-splash .splash { display: none !important; }

.splash__veil { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.splash__bg { fill: var(--night); }

.splash__stage {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: clamp(1.2rem, 3vh, 2rem);
  transition: opacity .35s var(--ease), transform .9s var(--ease-out);
}
.splash__logo { width: clamp(96px, 22vmin, 176px); height: auto; overflow: visible; }

/* 1 — outline draw */
.splash__outline {
  fill: none; stroke: var(--paper); stroke-width: 3.5; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: sp-draw 1s cubic-bezier(.65, 0, .35, 1) .15s forwards;
}
@keyframes sp-draw { to { stroke-dashoffset: 0; } }

/* 2 — fire rises (two waves drifting at different speeds) */
.splash__liquid { transform: translateY(440px); animation: sp-rise 1.25s cubic-bezier(.55, .05, .25, 1) .55s forwards; }
@keyframes sp-rise { to { transform: translateY(-24px); } }
.splash__wave { fill: var(--accent); animation: sp-wave 1.3s linear infinite; }
.splash__wave--back { fill: oklch(42% 0.13 25); opacity: .9; animation-duration: 2.1s; animation-direction: reverse; transform: translateY(-10px); }
@keyframes sp-wave { from { transform: translateX(0); } to { transform: translateX(-360px); } }
.splash__wave--back { animation-name: sp-wave-back; }
@keyframes sp-wave-back { from { transform: translate(-360px, -10px); } to { transform: translate(0, -10px); } }

.splash__mark { fill: var(--paper); opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(14px) scale(.97); animation: sp-mark .9s var(--ease-out) .95s forwards; }

@keyframes sp-mark { to { opacity: 1; transform: none; } }

/* 3 — wordmark */
.splash__word {
  display: flex; gap: .55em; padding-left: .55em; overflow: hidden;
  font: 500 clamp(1rem, 2.4vmin, 1.35rem)/1 var(--f-sans); font-stretch: 112%; font-variation-settings: "wdth" 112; letter-spacing: 0;
}
.splash__word span { display: inline-block; transform: translateY(110%); animation: sp-up .7s var(--ease-out) forwards; }
.splash__word span:nth-child(1) { animation-delay: 1.0s; }
.splash__word span:nth-child(2) { animation-delay: 1.06s; }
.splash__word span:nth-child(3) { animation-delay: 1.12s; }
.splash__word span:nth-child(4) { animation-delay: 1.18s; }
@keyframes sp-up { to { transform: none; } }

.splash__meta {
  position: absolute; left: var(--gut); right: var(--gut); bottom: calc(var(--s-md) + env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; align-items: baseline;
  font: 500 var(--t-2xs)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--night-ink-2);
  opacity: 0; animation: sp-fade .6s var(--ease) .4s forwards; transition: opacity .3s var(--ease);
}
.splash__count { font-size: clamp(1.4rem, 4vmin, 2.2rem); letter-spacing: .02em; color: var(--paper); font-variant-numeric: tabular-nums; }
@keyframes sp-fade { to { opacity: 1; } }
.splash__skip { position: absolute; top: calc(var(--s-sm) + env(safe-area-inset-top)); right: var(--gut); min-height: 44px; padding: 0 .4rem; font: 500 var(--t-2xs)/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--night-ink-2); opacity: 0; animation: sp-fade .5s var(--ease) 1.2s forwards; }
.splash__skip:hover { color: var(--paper); }

/* 4 — exit: logo hands over to the drop-shaped window (JS scales the hole) */
.splash.is-exit { pointer-events: none; }
.splash.is-exit .splash__stage { opacity: 0; transform: scale(1.06); }
.splash.is-exit .splash__meta, .splash.is-exit .splash__skip { opacity: 0 !important; transition: opacity .25s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .splash__outline { stroke-dashoffset: 0; animation: none; }
  .splash__liquid { transform: translateY(-24px); animation: none; }
  .splash__wave { animation: none; }
  .splash__mark, .splash__word span { opacity: 1; transform: none; animation: none; }
  .splash.is-exit { opacity: 0; transition: opacity .4s ease; }
}

/* One clock: everything waits until the script says "play" (it starts the counter at the same moment). */
.splash * { animation-play-state: paused; }
.splash.is-play * { animation-play-state: running; }