/* ============== LOADING SPLASH (shared) ==============
   Theme adapts to body bg:
   - default = light (bone bg, ink logo)
   - body.is-dark or body[data-splash="dark"] = dark (ink bg, bone logo)

   Strokes default to FULLY VISIBLE (offset 0) so the logo always
   shows even if the keyframe animation fails to run. The animation
   uses fill-mode: backwards to render the "drawing in" effect during
   its delay window only.
   ====================================================== */
.splash {
  position: fixed; inset: 0;
  z-index: 9000;
  background: #F9F9F9;
  display: grid; place-items: center;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
body.is-dark .splash,
body[data-splash="dark"] .splash {
  background: #0A0A0A;
}
.splash-inner {
  display: grid;
  justify-items: center;
  gap: clamp(20px, 2.4vw, 32px);
  color: #0A0A0A;
}
body.is-dark .splash-inner,
body[data-splash="dark"] .splash-inner {
  color: #F9F9F9;
}
.splash-logo {
  width: clamp(80px, 8vw, 132px);
  height: auto;
  color: #0A0A0A;
}
body.is-dark .splash-logo,
body[data-splash="dark"] .splash-logo {
  color: #F9F9F9;
}
.splash-logo .s {
  stroke: currentColor;
  stroke-dasharray: 200;
  /* default = visible (offset 0). Animation pulls offset to 200 during
     its backwards-fill delay then animates it back to 0. */
  animation: splashDraw 0.55s cubic-bezier(0.65, 0, 0.35, 1) backwards;
}
body.is-dark .splash-logo .s,
body[data-splash="dark"] .splash-logo .s {
  stroke: #F9F9F9;
}
.splash-logo .s1 { animation-delay: 0.10s; }
.splash-logo .s2 { animation-delay: 0.40s; stroke-dasharray: 240; }
.splash-logo .s3 { animation-delay: 0.70s; }
.splash-logo .s4 { animation-delay: 1.00s; stroke-dasharray: 70; }
@keyframes splashDraw {
  from { stroke-dashoffset: var(--draw-from, 200); }
  to   { stroke-dashoffset: 0; }
}
.splash-logo .s2 { --draw-from: 240; }
.splash-logo .s4 { --draw-from: 70; }
.splash-name {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: 0.32em;
  color: inherit;
  /* default = visible. Animation only adds the fade-up motion. */
  animation: splashName 0.55s cubic-bezier(0.16, 1, 0.3, 1) 1.30s backwards;
}
@keyframes splashName {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.splash.is-done {
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .splash-logo .s { animation: none; }
  .splash-name { animation: none; }
}

/* Mobile — smaller logo + tighter type so the splash never feels
   bloated on a 5-inch phone. */
@media (max-width: 480px) {
  .splash-logo { width: clamp(64px, 18vw, 88px); }
  .splash-name { font-size: 14px; letter-spacing: 0.24em; }
  .splash-inner { gap: clamp(14px, 3vw, 22px); }
}