/* ══ Boot splash ══════════════════════════════════════════════════════
   Ported from the s-cmms boot screen: the brand mark with two expanding
   diagnostic rings, the wordmark, a lead-II cardiac trace and an
   indeterminate rail. Linked from the <head> so it paints before the app
   bundle parses; src/lib/splash.ts retires it. The same classes render
   components/BootSplash.vue (sign-in hand-off, sign-out).

   Colours map onto the Engage brand tokens (--brand, --brand-2, canvas,
   ink, line). They carry their own fallbacks because src/styles/app.css
   may not have loaded yet. Classes only: no inline styles (CSP). */
.boot {
  --boot-brand: var(--brand, 91 61 245);
  --boot-brand-2: var(--brand-2, 0 179 164);
  --boot-accent: var(--boot-brand);
  --boot-canvas: 246 245 251;
  --boot-ink: 26 21 53;
  --boot-ink-3: 124 120 150;
  --boot-line: 228 224 240;
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(900px 480px at 50% 40%, rgb(var(--boot-brand) / 0.08), transparent 70%),
    rgb(var(--boot-canvas));
  opacity: 1;
  transition: opacity 420ms ease, visibility 420ms ease;
}
html.dark .boot {
  --boot-accent: 158 142 255;
  --boot-canvas: 15 14 23;
  --boot-ink: 238 236 247;
  --boot-ink-3: 146 142 170;
  --boot-line: 48 45 68;
}
@media (prefers-color-scheme: dark) {
  html:not(.light):not(.dark) .boot {
    --boot-accent: 158 142 255;
    --boot-canvas: 15 14 23;
    --boot-ink: 238 236 247;
    --boot-ink-3: 146 142 170;
    --boot-line: 48 45 68;
  }
}
.boot[data-leaving='true'] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.boot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
}

/* Brand mark with two expanding diagnostic rings */
.boot-mark {
  position: relative;
  inline-size: 76px;
  block-size: 76px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, rgb(var(--boot-brand)), rgb(var(--boot-brand-2)));
  box-shadow: 0 14px 34px rgb(var(--boot-brand) / 0.32);
  animation: boot-breathe 2.6s ease-in-out infinite;
}
.boot-mark svg {
  inline-size: 40px;
  block-size: 40px;
}
.boot-ring {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 2px solid rgb(var(--boot-accent));
  opacity: 0;
  animation: boot-pulse 2.6s ease-out infinite;
}
.boot-ring:nth-child(2) {
  animation-delay: 1.3s;
}
@keyframes boot-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.045);
  }
}
@keyframes boot-pulse {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  70% {
    transform: scale(1.75);
    opacity: 0;
  }
  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

/* Wordmark (system face: identical before and after the web fonts load) */
.boot-word {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: rgb(var(--boot-ink));
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.boot-word span {
  font-weight: 600;
  font-size: 0.82em;
  letter-spacing: 0.14em;
  color: rgb(var(--boot-accent));
}

/* Cardiac trace */
.boot-ecg {
  inline-size: 260px;
  block-size: 52px;
  overflow: visible;
}
.boot-ecg path {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.boot-ecg-bed {
  stroke: rgb(var(--boot-line));
}
.boot-ecg-live {
  stroke: rgb(var(--boot-accent));
  stroke-dasharray: 74 460;
  animation: boot-trace 1.9s cubic-bezier(0.6, 0, 0.35, 1) infinite;
  filter: drop-shadow(0 0 5px rgb(var(--boot-accent) / 0.55));
}
@keyframes boot-trace {
  from {
    stroke-dashoffset: 534;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Indeterminate rail */
.boot-bar {
  inline-size: 210px;
  block-size: 3px;
  border-radius: 999px;
  background: rgb(var(--boot-line));
  overflow: hidden;
}
.boot-bar span {
  display: block;
  block-size: 100%;
  inline-size: 42%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--boot-brand)), rgb(var(--boot-brand-2)));
  animation: boot-rail 1.35s ease-in-out infinite;
}
[dir='rtl'] .boot-bar span {
  animation-name: boot-rail-rtl;
}
@keyframes boot-rail {
  0% {
    transform: translateX(-115%);
  }
  100% {
    transform: translateX(275%);
  }
}
@keyframes boot-rail-rtl {
  0% {
    transform: translateX(115%);
  }
  100% {
    transform: translateX(-275%);
  }
}

.boot-note {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgb(var(--boot-ink-3));
}

@media (prefers-reduced-motion: reduce) {
  .boot-mark,
  .boot-ring,
  .boot-ecg-live,
  .boot-bar span {
    animation: none;
  }
  .boot-ring {
    opacity: 0.2;
  }
  .boot-ecg-live {
    stroke-dasharray: none;
  }
  .boot-bar span {
    inline-size: 100%;
  }
}