/*
 * Home-page splash — the motion from Other_Assets/Splash_screen/bloatie-splash-handoff.html
 * on the Figma wordmark (assets/img/splash-*.svg are its layers, split from node 464:2425),
 * retimed to about 3.6s end to end (Kali, 2026-10-27) and shown once per
 * visit. The loader dots are dropped: a static page has nothing to wait for.
 *
 *   0.00  seed swells          1.15  sparkle spins in
 *   0.30  wordmark pops in     1.35  burst lines zap out
 *   0.90  pill bounces up      1.20  shine sweeps the letters
 *   1.40  one bloat/deflate    2.60  exit: logo bounces out, pink wipe (~1s)
 *
 * Hidden unless splash-gate.js put `splash` on <html>.
 */
:root {
  --t-word: .3s;
  --t-pill: .9s;
  --t-sparkle: 1.15s;
  --t-burst: 1.35s;
  --t-shine: 1.2s;
  --t-bloat: 1.4s;
  --logo-width: min(84vw, 440px);
}

#splash { display: none; }
html.splash #splash {
  display: block; position: fixed; inset: 0; z-index: 9999;
  background: var(--sunshine); overflow: hidden; isolation: isolate; cursor: pointer;
}
html.splash body { overflow: hidden; }

#splash .seed {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: #000; animation: seed .55s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes seed { 0% { transform: scale(0) } 30% { transform: scale(1) } 70% { transform: scale(2.6,3) } 84% { transform: scale(3.2,3.6) } 100% { transform: scale(0); opacity: 0 } }

#splash .logo { position: absolute; left: 50%; top: 50%; width: var(--logo-width); aspect-ratio: 180/74.5; transform: translate(-50%,-56%); }
#splash .layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#splash .belly { position: absolute; inset: 0; transform-origin: 50% 60%; animation: bloat 1.2s ease-in-out var(--t-bloat) 1; }
#splash .word { transform-origin: 50% 60%; opacity: 0; animation: wordIn .85s linear var(--t-word) forwards; }
@keyframes wordIn {
  0% { opacity: 0; transform: scale(.2,.35) skewX(-6deg) translateY(10%); animation-timing-function: cubic-bezier(.3,0,.2,1) }
  18% { opacity: 1; transform: scale(.85,1.25) skewX(4deg) translateY(-6%); animation-timing-function: cubic-bezier(.25,.1,.25,1) }
  38% { transform: scale(1.14,.88) skewX(-3deg) translateY(3%); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  56% { transform: scale(.96,1.07) skewX(2deg) translateY(-1.5%); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  72% { transform: scale(1.03,.975) skewX(-1deg) translateY(.6%); animation-timing-function: cubic-bezier(.33,0,.2,1) }
  86% { transform: scale(.99,1.015) skewX(.4deg); animation-timing-function: ease-out }
  100% { opacity: 1; transform: scale(1,1) skewX(0) translateY(0) }
}
@keyframes bloat {
  0% { transform: scale(1) translateY(0) }
  38% { transform: scale(1.09,1.13) translateY(-3%) }
  46% { transform: scale(1.11,1.16) translateY(-4%) }
  56% { transform: scale(.96,.92) translateY(2%) }
  66% { transform: scale(1.03,1.04) translateY(-.5%) }
  76% { transform: scale(.99,.985) translateY(.4%) }
  86%, 100% { transform: scale(1) translateY(0) }
}
#splash .shine {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url(img/splash-word.svg) center/100% 100% no-repeat;
  mask: url(img/splash-word.svg) center/100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%);
  background-size: 220% 100%; background-position: 120% 0;
  animation: sweep 1s cubic-bezier(.6,0,.2,1) var(--t-shine) 1;
}
@keyframes sweep { 0% { background-position: 120% 0 } 100% { background-position: -120% 0 } }

#splash .pill { transform-origin: 50% 100%; opacity: 0;
  animation: pillIn .55s cubic-bezier(.2,1.5,.35,1) var(--t-pill) forwards, squish 1.2s ease-in-out var(--t-bloat) 1; }
@keyframes pillIn { 0% { opacity: 0; transform: translateY(60%) scale(.6,1.3) } 55% { opacity: 1; transform: translateY(-4%) scale(1.08,.9) } 100% { opacity: 1; transform: translateY(0) scale(1) } }
@keyframes squish { 0%, 46%, 70%, 100% { transform: scale(1) } 56% { transform: scale(1.06,.85) } 62% { transform: scale(.98,1.04) } }

#splash .sparkle { transform-origin: 66.7% 13.5%; opacity: 0; animation: sparkIn .5s cubic-bezier(.2,1.6,.3,1) var(--t-sparkle) forwards; }
@keyframes sparkIn { 0% { opacity: 0; transform: scale(0) rotate(-180deg) } 100% { opacity: 1; transform: scale(1) rotate(0) } }

#splash .burst { transform-origin: 94% 44%; opacity: 0; animation: burstIn .4s cubic-bezier(.2,1.7,.4,1) var(--t-burst) forwards; }
@keyframes burstIn { 0% { opacity: 0; transform: scale(0) } 100% { opacity: 1; transform: scale(1) } }

/* ---- exit (splash.js adds .is-exiting) ---- */
#splash .wipe { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--pink); transform: scale(0); z-index: 3; }
#splash.is-exiting .logo { animation: logoOut .45s cubic-bezier(.6,-.3,.7,.2) forwards; }
#splash.is-exiting .wipe { animation: wipe .6s cubic-bezier(.7,0,.3,1) .2s forwards; }
#splash.is-leaving { transition: opacity .2s ease; opacity: 0; }
@keyframes logoOut { 0% { transform: translate(-50%,-56%) scale(1) } 40% { transform: translate(-50%,-56%) scale(1.08) } 100% { transform: translate(-50%,-56%) scale(0); opacity: 0 } }
@keyframes wipe { to { transform: scale(80) } }