/*
  Boot screen shown inside #root until React mounts and replaces it.
  Loaded before the app bundle, so it uses literal colours (tokens.css is not
  loaded yet) matched to each theme's background; theme-init.js has already set
  data-mode / data-style on <html>. Scoped to .boot so it never affects the app.
*/
.boot {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background-color: #f6f7f9;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(186, 210, 230, 0.55), transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 30%, rgba(180, 200, 220, 0.45), transparent 50%),
    linear-gradient(165deg, #e8eef5 0%, #f4f7fb 45%, #e6edf5 100%);
  color: #1a2950;
  /* Fast loads never see it: it fades in only after a short delay. */
  animation: boot-in 400ms ease-out 150ms both;
}

:root[data-style='solid'] .boot { background: #f2f2f7; }
:root[data-style='minimal'] .boot { background: #fbfbfc; }

:root[data-mode='dark'] .boot {
  background-color: #0e1117;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(63, 111, 220, 0.22), transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 30%, rgba(124, 92, 220, 0.16), transparent 50%),
    linear-gradient(165deg, #0e1117 0%, #131722 50%, #0c0f15 100%);
  color: #e1ebfe;
}

:root[data-mode='dark'][data-style='solid'] .boot { background: #000000; }
:root[data-mode='dark'][data-style='minimal'] .boot { background: #0a0a0b; }

.boot-mark {
  display: block;
  width: 56px;
  height: 56px;
  animation: boot-breathe 2.4s ease-in-out infinite;
}

/* Text for screen readers only. */
.boot-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes boot-in {
  from { opacity: 0; }
}

@keyframes boot-breathe {
  0%, 100% { opacity: 0.35; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1); }
}

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