/* boot.css — the boot screen (shell.html #v2Boot, app.js leaveBoot). It plays
   over the app's whole module graph (~500KB), so it is pure CSS, and it is
   self-contained: nothing here leans on shell.css, so the screen cannot be
   restyled by a rule written for something else.

   It is a fixed overlay because it outlives "boot": the shell fills in
   underneath and it leaves only once the chats are in, so nobody sees an empty
   list first. Every infinite animation here is transform/opacity only
   (ui-performance).

   It cannot paint before every <head> stylesheet has loaded. Linking the app's
   sheets in the body instead was tried and refused: ~20 controllers append
   their own sheet to <head> at runtime and win ties against shell.css by coming
   after it, which a body link would silently reverse. */
.boot-screen {
  position: fixed; inset: 0; z-index: 1000; display: grid; align-content: center; justify-items: center;
  padding: 24px; background: var(--q-bg); color: var(--q-text-3); font-family: var(--font-ui); text-align: center;
}
/* The box is the ring field, so the name sits clear of the rings in flight. */
.boot-aperture { position: relative; display: grid; width: 168px; height: 168px; place-items: center; }
/* A static glow; only its opacity breathes. */
.boot-aperture::before {
  position: absolute; top: 50%; left: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px;
  border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--q-accent) 26%, transparent) 0%, transparent 62%);
  content: ""; animation: boot-glow 3.6s ease-in-out infinite alternate;
}
/* Three outlines at 2.6× the tile, drawn in toward it and turning a quarter so
   each one lands square on the mark as it vanishes into it. */
.boot-ring {
  position: absolute; top: 50%; left: 50%; width: 146px; height: 146px; margin: -73px 0 0 -73px;
  border: 1.5px solid var(--q-accent); border-radius: 36.5px; opacity: 0;
  animation: boot-converge 2.7s cubic-bezier(.45, 0, .85, .5) .15s infinite backwards;
}
.boot-ring:nth-child(2) { animation-delay: 1.05s; }
.boot-ring:nth-child(3) { animation-delay: 1.95s; }
.boot-mark {
  position: relative; display: grid; width: 56px; height: 56px; place-items: center; border-radius: 14px;
  background: var(--q-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), 0 10px 32px color-mix(in srgb, var(--q-accent) 38%, transparent);
  color: #fff; font-size: 1.5rem; font-weight: var(--q-weight-strong);
  animation: boot-mark-in .5s cubic-bezier(.2, .8, .2, 1) backwards;
}
.boot-name { margin: 10px 0 0; color: var(--q-text); font-size: 1.25rem; font-weight: var(--q-weight-strong); letter-spacing: .01em; animation: boot-fade-in .5s ease-out .12s backwards; }
.boot-status { min-height: 1.5em; margin: 6px 0 0; font-size: var(--q-fs-meta); line-height: 1.5; animation: boot-fade-in .5s ease-out .2s backwards; }
.boot-screen.is-leaving { pointer-events: none; animation: boot-leave .34s cubic-bezier(.4, 0, .2, 1) forwards; }
.boot-screen.is-leaving .boot-mark { animation: boot-mark-out .34s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes boot-converge {
  0% { opacity: 0; transform: scale(1) rotate(-90deg); }
  40% { opacity: .55; }
  100% { opacity: 0; transform: scale(.3846) rotate(0deg); }
}
@keyframes boot-glow { from { opacity: .55; } to { opacity: 1; } }
@keyframes boot-mark-in { from { opacity: 0; transform: scale(.86); } }
@keyframes boot-fade-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes boot-leave { to { opacity: 0; } }
@keyframes boot-mark-out { to { transform: scale(1.16); } }
/* base.css only cuts motion to one pass; a ring caught mid-flight would freeze. */
@media (prefers-reduced-motion: reduce) { .boot-ring { display: none; } }