/* The start-up splash in index.html: shown while the portal's code downloads, replaced by React
   as soon as the portal draws. Same heartbeat as BrandLoader in src/components/Loading.jsx.

   A file, not a <style> block in index.html: the Content-Security-Policy (nginx.conf) allows
   styles only from this server, so the browser blocked the inline block and drew the splash
   unstyled - the icon and its text flashed in the top-left corner. Linked in <head>, this file
   holds back the first paint until it has loaded, so the splash is never drawn without it. */

.boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #f7f8fa; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; animation: boot-in .25s ease-out; }
.boot-mark { position: relative; width: 72px; height: 72px; }
.boot-mark img { position: relative; display: block; border-radius: 18px; box-shadow: 0 10px 28px -8px rgba(16, 24, 40, .35); animation: boot-beat 1.3s ease-in-out infinite; }
.boot-ripple { position: absolute; inset: 0; border-radius: 18px; border: 2px solid #2dd4bf; animation: boot-ripple 1.3s ease-out infinite; }
.boot-label { color: #667085; font-size: 14px; font-weight: 500; }

@keyframes boot-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes boot-beat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.07); } 28% { transform: scale(1); } 42% { transform: scale(1.05); } 70% { transform: scale(1); } }
@keyframes boot-ripple { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .boot-mark img, .boot-ripple { animation: none; }
  .boot-ripple { opacity: 0; }
}