/* Oddly True v005 splash — same look as v004, rebuilt for smoothness.
   First frame (no .play) is exactly what tools/gen-splash.mjs renders for the iOS startup images:
   navy-indigo field + soft teal aura (ONE static background layer) + icon + wordmark + empty hairline + version.
   Motion: ONE timeline, ONE easing (--ease-intro). Only transform + opacity are animated, on a handful of promoted layers:
   glow (fade+scale), icon (scale), underline (scaleX), tagline (fade+rise), loader fill (scaleX), loader/button cross-fade, splash fade-out.
   Nothing animates filter / box-shadow / blur / background-position / width. JS starts the timeline only after fonts + hero image are decoded
   and the app has been built (no main-thread work during the intro). */
.splash { --ease-intro:cubic-bezier(.22,1,.36,1); --t-glow:.05s; --t-icon:.0s; --t-ul:.5s; --t-tag:.85s;
  position:fixed; left:0; right:0; top:0; bottom:auto; height:var(--app-h); z-index:200; overflow:hidden; background:#0c0b29; contain:strict; will-change:opacity; transition:opacity .55s var(--ease-intro); }
.splash.out { opacity:0; pointer-events:none; }
.splash-bg { position:absolute; inset:0;
  background:radial-gradient(78% 44% at 50% 33%, rgba(20,184,166,.30), transparent 72%), radial-gradient(130% 44% at 50% 122%, rgba(240,100,90,.20), transparent 66%), linear-gradient(180deg,#1a1a40 0%,#12123a 38%,#0b0b28 100%); }
.splash-center { position:absolute; left:0; right:0; top:41%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 var(--s-6); }
.splash-hero { --hero:clamp(112px,19.9vh,168px); position:relative; width:var(--hero); height:var(--hero); margin-bottom:clamp(20px,3.8vh,32px); opacity:0; }
.splash-glow { position:absolute; inset:-34%; border-radius:50%; background:radial-gradient(closest-side, rgba(20,184,166,.50), rgba(20,184,166,.14) 55%, transparent 100%); opacity:.001; transform:scale(.84);   /* .001 (not 0) so the layer is rasterised before the timeline starts */ will-change:opacity,transform; }
.splash-icon { position:relative; width:100%; height:100%; border-radius:22.37%; object-fit:cover; box-shadow:0 18px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1); transform:translateZ(0); will-change:transform; }
.splash-word { font-family:var(--font-display); font-weight:600; font-size:clamp(2.75rem,6.4vh,3.25rem); letter-spacing:-.02em; line-height:1.05; color:var(--text); font-variation-settings:'opsz' 144; opacity:0; }
.splash.ready .splash-hero, .splash.ready .splash-word { opacity:1; }          /* snap in together, behind the (identical) startup image */
.splash .ul::after { transform:scaleX(0); }
.splash-tag { margin-top:var(--s-6); font-size:var(--fs-base); line-height:1.5; color:var(--text-2); opacity:.001; transform:translateY(6px); will-change:opacity,transform; }
.splash.play .splash-glow { animation:s-glow 1.5s var(--ease-intro) var(--t-glow) forwards; }
.splash.play .splash-icon { animation:s-icon 1.5s var(--ease-intro) var(--t-icon) both; }
.splash.play .ul::after { animation:s-ul .9s var(--ease-intro) var(--t-ul) forwards; will-change:transform; }
.splash.play .splash-tag { animation:s-tag .8s var(--ease-intro) var(--t-tag) forwards; }
@keyframes s-glow { from { opacity:.001; transform:scale(.84); } to { opacity:1; transform:scale(1); } }
@keyframes s-icon { 0% { transform:scale(1); } 38% { transform:scale(1.045); } 100% { transform:scale(1); } }
@keyframes s-ul { to { transform:scaleX(1); } }
@keyframes s-tag { to { opacity:1; transform:none; } }
/* bottom: fixed offsets (not safe-area based) so the first frame equals the iOS startup image on every device */
.splash-bottom { position:absolute; left:0; right:0; bottom:calc(72px + max(0px, var(--dead-b) - 40px)); padding:0 var(--s-6); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:56px; }
.loader { width:min(100%,176px); opacity:1; transition:opacity .35s var(--ease-intro); }
.loader.gone { opacity:0; }
.loader-line { height:3px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden; }
.loader-fill { height:100%; width:100%; border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--fake)); transform:scaleX(0); transform-origin:left center; will-change:transform; }
/* "Tap to begin" cross-fades in over the fading loader (opacity + 8px rise only) */
.splash-go-wrap { position:absolute; left:var(--s-6); right:var(--s-6); bottom:0; max-width:360px; margin:0 auto; opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease-intro) .1s, transform .55s var(--ease-intro) .1s; }
.splash-go-wrap.show { opacity:1; transform:none; }
.splash-go-wrap[hidden] { display:none; }
.splash-go { display:flex; align-items:center; justify-content:center; width:100%; height:var(--btn-h); border-radius:var(--r-lg); background:var(--accent); color:var(--accent-ink); font-family:var(--font-ui); font-weight:700; font-size:var(--fs-base); transition:transform var(--dur-1) var(--ease-std); }
.splash-go:active { transform:scale(.98); }
.splash-foot { position:absolute; left:0; right:0; bottom:32px; text-align:center; font-size:var(--fs-xs); font-weight:600; letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--text-3); }
@media (prefers-reduced-motion: reduce) {
  .splash .ul::after { transform:none; animation:none !important; }
  .splash-tag { opacity:1; transform:none; animation:none !important; }
  .splash-glow { opacity:1; transform:none; animation:none !important; }
  .splash-go-wrap { transition:none; }
}