/* Splash: on screen before the bundle runs and until the first real screen is ready, online or
   offline. Deliberately outside the build: a small static file (Nginx's CSP allows no inline styles),
   in the service worker cache from the first visit together with the two brand images.
   The app fades it out (see about.tsx). */
html { background: #f3f4f6; }
body { margin: 0; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
.splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(ellipse 72% 52% at 50% 44%, #e3f2fb 0, rgba(227, 242, 251, 0) 72%), #f3f4f6; color: #263041; text-align: center; overflow: hidden; transition: opacity .36s ease; }
.splash.out { opacity: 0; pointer-events: none; }
.splash-mark { width: 92px; height: 92px; filter: drop-shadow(0 14px 28px rgba(10, 151, 216, .22)); }
.splash-word { height: 32px; width: auto; margin-top: 24px; }
.splash-tag { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: #6b7280; }
.splash-status { position: absolute; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 16px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: #8a93a3; }
.splash-bar { position: relative; width: 128px; height: 3px; border-radius: 3px; background: #dde2ea; overflow: hidden; }
.splash-bar::after { content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%; border-radius: 3px; background: linear-gradient(90deg, #0a97d8, #4dbcec); animation: splash-run 1.5s cubic-bezier(.45, 0, .25, 1) infinite; }
.splash-foot { position: absolute; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom)); margin: 0; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; color: #a5adbb; }
.splash-enter .splash-mark, .splash-enter .splash-word, .splash-enter .splash-tag, .splash-enter .splash-status, .splash-enter .splash-foot { animation: splash-in .7s cubic-bezier(.2, .7, .2, 1) both; }
.splash-enter .splash-word { animation-delay: .1s; }
.splash-enter .splash-tag { animation-delay: .2s; }
.splash-enter .splash-status, .splash-enter .splash-foot { animation-delay: .35s; }
@keyframes splash-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes splash-run { 0% { left: -45%; } 65%, 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .splash, .splash-enter * { transition: none; animation: none !important; }
  .splash-bar::after { animation: none; left: 0; width: 100%; opacity: .5; }
}