/* Pre-React loading splash: shown from first paint until the app mounts (React replaces
   #root's contents), mirroring the fiery LoadingScreen.tsx so the handoff is seamless.
   Self-contained (no CSS bundle yet), so the brand colours are hardcoded here: burnt
   orange #c7542e (light) / #e06a3e (dark), deep-red glow #a52115. */
.boot-splash { position: fixed; z-index: 9999; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; font-family: Inter, system-ui, sans-serif; background: #fef9f8; --f: #c7542e; --a: #a52115; transition: opacity 180ms ease; }
.boot-splash--exit { opacity: 0; pointer-events: none; }
html[data-theme="dark"] .boot-splash { background: #17110e; }
html[data-theme="dark"] .boot-splash { --f: #e06a3e; --a: #e8503a; }
.boot-splash .m { position: relative; width: 74px; height: 88px; display: grid; place-items: center; }
.boot-splash .r { position: absolute; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--f) 55%, transparent) 0%, transparent 68%); filter: blur(5px); animation: bootHalo 1.7s ease-in-out infinite; }
.boot-splash .f { display: block; width: 34px; height: 40px; color: var(--f); transform-origin: 50% 92%; animation: bootFlicker 1.5s ease-in-out infinite; }
.boot-splash .e { position: absolute; inset: 0; pointer-events: none; }
.boot-splash .e i { position: absolute; bottom: 20px; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: var(--f); opacity: 0; animation: bootEmber 1.9s ease-in infinite; }
.boot-splash .e i:nth-child(1) { --drift: -7px; margin-left: -8px; animation-delay: 0s; }
.boot-splash .e i:nth-child(2) { --drift: 5px; margin-left: 2px; background: var(--a); animation-delay: 0.5s; }
.boot-splash .e i:nth-child(3) { --drift: 8px; margin-left: 8px; animation-delay: 0.9s; }
.boot-splash .l { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: #636363; }
html[data-theme="dark"] .boot-splash .l { color: #b0a59f; }
@keyframes bootHalo { 0%, 100% { transform: scale(0.9); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 0.85; } }
@keyframes bootFlicker {
  0%, 100% { transform: scale(1, 1) skewX(0deg); opacity: 1; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--f) 70%, transparent)); }
  25% { transform: scale(1.05, 0.97) skewX(-2deg); opacity: 0.9; }
  50% { transform: scale(0.96, 1.06) skewX(1.5deg); opacity: 1; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--a) 80%, transparent)); }
  75% { transform: scale(1.04, 0.99) skewX(1.5deg); opacity: 0.94; }
}
@keyframes bootEmber { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--drift, 4px), -36px) scale(0.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .boot-splash .r { animation: none; opacity: 0.7; } .boot-splash .f { animation: none; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--f) 65%, transparent)); } .boot-splash .e { display: none; } }