/* View: splash (#splash in index.html; js/main.js splash() / hideSplash()).
   Branded intro: the app icon stamps in (overshoot + a faint ink ring), the wordmark slides out from behind it,
   then a thin rule carries a calm loading cue — it loops at the same pace however long the boot takes.
   #splash-msg and #splash-actions keep working: when actions are present (retry / "Tryb demo") the loading rule hides
   (visibility, no layout shift) and the buttons rise in. .is-leaving fades the splash out before main.js hides it.
   Only transform / opacity animate (plus one clip-path reveal on the wordmark); under reduced motion everything is static. */
@layer views {
.splash {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: calc(24px + var(--safe-t)) 24px calc(24px + var(--safe-b)); background: transparent;
  transition: opacity 480ms var(--ease-out);
}
/* exit (main.js SPLASH_OUT_MS = 480): the page fades while the seal and wordmark lift slightly toward the viewer */
.splash.is-leaving { opacity: 0; pointer-events: none; }
.splash.is-leaving .splash-card { transform: scale(1.05); opacity: 0; transition: transform 480ms var(--ease-out), opacity 320ms ease; }
.splash-card { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; width: 100%; max-width: 360px; }

/* seal + wordmark */
.splash-brand { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.splash-logo { position: relative; width: 56px; height: 56px; border-radius: 16px; font-size: 33px; animation: splash-seal 620ms var(--ease-stamp) 60ms backwards; }
.splash-logo::after {
  content: ""; position: absolute; inset: -7px; border-radius: 21px; border: 1.5px solid var(--accent); pointer-events: none;
  opacity: 0; animation: splash-ring 760ms var(--ease-out) 330ms backwards;
}
.splash-word { font-size: 30px; line-height: 1; animation: splash-word 560ms var(--ease-out) 300ms backwards; }
@keyframes splash-seal {
  0% { opacity: 0; transform: scale(1.75) rotate(-14deg); }
  55% { opacity: 1; transform: scale(.93) rotate(3deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes splash-ring { from { opacity: .45; transform: scale(.82); } to { opacity: 0; transform: scale(1.35); } }
@keyframes splash-word { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-18px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: none; } }

/* loading cue: an ink bead travels along a hairline rule */
.splash-line { position: relative; width: 132px; height: 2px; overflow: hidden; border-radius: 2px; background: var(--rule); animation: splash-fade 400ms ease 620ms backwards; }
.splash-line i { position: absolute; inset: 0 auto 0 0; width: 36%; border-radius: inherit; background: var(--accent); animation: splash-bead 1600ms cubic-bezier(.65, 0, .35, 1) 700ms infinite backwards; }
@keyframes splash-bead { from { transform: translateX(-105%); } to { transform: translateX(285%); } }
.splash-card:has(.splash-actions:not(:empty)) .splash-line { visibility: hidden; }

.splash-msg { min-height: 1.45em; color: var(--ink-2); animation: splash-fade 400ms ease 520ms backwards; }
@keyframes splash-fade { from { opacity: 0; } }
.splash-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.splash-actions:empty { display: none; }
.splash-actions > * { animation: splash-rise 360ms var(--ease-out) backwards; }
.splash-actions > :nth-child(2) { animation-delay: 50ms; }
.splash-actions > :nth-child(3) { animation-delay: 100ms; }
@keyframes splash-rise { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 380px) { .splash-word { font-size: 27px; } .splash-logo { width: 52px; height: 52px; font-size: 30px; } }
@media (prefers-reduced-motion: reduce) {
  .splash, .splash * { animation: none !important; }
  .splash-line i { transform: translateX(90%); }
}
}