/* Startup screen (index.html): the mark comes into focus while the app loads.
   React replaces it on first render; it only fades in after 300ms, so fast
   loads never show it. Mirrors ChhayaMark's 'intro' motion, then, if the app
   is still loading, its 'hunting' motion on a loop (src/index.css).
   A file rather than an inline <style>, for the Content-Security-Policy.
   Each background is that theme's swatch[0] (src/lib/themes.ts);
   tests/unit/boot/theme-script.test.ts keeps them in step. */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: #ffffff; opacity: 0; animation: boot-in 200ms ease-out 300ms forwards; }
[data-theme='dark'] .boot { background: #0a0a0a; }
[data-theme='midnight'] .boot { background: #141b2d; }
[data-theme='warm'] .boot { background: #faf6ee; }
.boot .t { animation: boot-t 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 300ms both, boot-hunt-t 1.4s cubic-bezier(0.45, 0, 0.55, 1) 1.4s infinite; }
.boot .b { animation: boot-b 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 300ms both, boot-hunt-b 1.4s cubic-bezier(0.45, 0, 0.55, 1) 1.4s infinite; }
@keyframes boot-in { to { opacity: 1; } }
@keyframes boot-t { 0% { transform: translate(30px, 0); opacity: 0; } 55%, 70% { transform: translate(-6px, 2px); opacity: 1; } 100% { transform: none; } }
@keyframes boot-b { 0% { transform: translate(-30px, 0); opacity: 0; } 55%, 70% { transform: translate(6px, -2px); opacity: 1; } 100% { transform: none; } }
@keyframes boot-hunt-t { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-12px, 0); } }
@keyframes boot-hunt-b { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(12px, 0); } }
@media (prefers-reduced-motion: reduce) { .boot .t, .boot .b { animation: none; } }