/* Spamurai storm splash — plays once when the app starts (public/splash.js). The animation is the
   designer's; the app's tokens are RGB channels, so the splash reads them through its own --sp-* colors. */
.sp-splash {
  --sp-bg: rgb(var(--bg));
  --sp-text: rgb(var(--text));
  --sp-ember: rgb(var(--red));
  --sp-raised: rgb(var(--surface-2));
  --sp-tile: clamp(56px, 16vw, 96px);
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: var(--sp-bg); color: var(--sp-text);
  cursor: pointer; /* a tap skips it */
}
.sp-fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2; }
.sp-shake { display: flex; flex-direction: column; align-items: center; gap: calc(var(--sp-tile) * 0.42); }
.sp-lockup { display: flex; align-items: center; gap: calc(var(--sp-tile) * 0.4); }
.sp-markwrap { position: relative; width: var(--sp-tile); height: var(--sp-tile); flex: none; }
.sp-markwrap svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sp-tile { fill: var(--sp-ember); transform-box: fill-box; transform-origin: center; }
.sp-star { fill: var(--sp-bg); }
.sp-hole { fill: var(--sp-ember); transform-box: fill-box; transform-origin: center; }
.sp-word { display: flex; padding-block: 0.1em; font: 700 calc(var(--sp-tile) * 0.72)/1 "Syne", "DM Sans", system-ui, sans-serif; letter-spacing: -0.02em; }
.sp-word span { display: inline-block; }
.sp-bar { width: 100%; max-width: calc(var(--sp-tile) * 4.4); height: 2px; border-radius: 2px; overflow: hidden; background: var(--sp-raised); }
.sp-bar i { display: block; height: 100%; background: var(--sp-ember); transform-origin: left center; }

.sp-splash.is-playing .sp-tile { animation: sp-pop 0.42s 1.3s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.sp-splash.is-playing .sp-flyer { animation: sp-appear 0.01s 1.3s both; }
.sp-splash.is-playing .sp-star { animation: sp-ink 0.2s 1.34s ease-out both; }
.sp-splash.is-playing .sp-hole { animation: sp-pop 0.3s 1.46s cubic-bezier(0.2, 1.6, 0.4, 1) both; }
.sp-splash.is-playing .sp-word span { animation: sp-slam 0.42s calc(1.56s + var(--i) * 0.035s) cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.sp-splash.is-playing .sp-bar i { animation: sp-load 0.9s 1.8s cubic-bezier(0.6, 0, 0.2, 1) both; }
.sp-splash.is-done { animation: sp-out 0.35s ease-in both; }

@keyframes sp-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes sp-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-ink { from { fill: var(--sp-ember); } to { fill: var(--sp-bg); } }
@keyframes sp-slam { from { opacity: 0; transform: translateY(-35%) scale(1.4); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sp-load { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sp-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.97); } }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sp-splash.is-playing *, .sp-splash.is-playing .sp-flyer { animation: none !important; }
  .sp-splash.is-playing { animation: sp-fade 0.3s ease-out both; }
  .sp-splash.is-done { animation: sp-out 0.2s ease-in both; }
  .sp-fx { display: none; }
}