/*
 * Splash styles for the pre-React HTML splash in `index.html`.
 *
 * Lives in `/public/` so it is served from `'self'` and stays
 * compatible with a strict CSP (`style-src 'self'` without `nonce` or
 * `'unsafe-inline'`). The animation and dark-mode handling must mirror
 * the React splash in `App.tsx` to keep the HTML → React handoff
 * imperceptible (P2.6 of the FTUE audit).
 *
 * Brand color tokens (background, brand) intentionally duplicate the
 * runtime tokens in `src/styles/tokens.css` and the React splash in
 * `App.tsx`. Keep all three in sync when the token changes — there is
 * no auto-derivation at pre-React paint time. Same gotcha as the iOS
 * `AppDelegate.swift` brand colour, documented in CLAUDE.md.
 */

@keyframes lalSplashBar {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(120%); }
  100% { transform: translateX(220%); }
}

#web-splash .lal-splash-bar {
  animation: lalSplashBar 1.4s ease-in-out infinite;
}

@media (prefers-color-scheme: dark) {
  #web-splash {
    background: oklch(15% 0.018 270);
    color: oklch(96% 0.01 270);
  }
  #web-splash p {
    color: oklch(70% 0.018 270);
  }
}

html[data-theme="dark"] #web-splash {
  background: oklch(15% 0.018 270);
  color: oklch(96% 0.01 270);
}
html[data-theme="dark"] #web-splash p {
  color: oklch(70% 0.018 270);
}