/* ═══ §15 · THE BOOT OVERLAY ══════════════════════════════════════════════════════════
   The first screen the operator sees: the self-writing brain draws as the organs come online,
   and the overlay dissolves once the backend answers.

   ── THE PALETTE IS SHOP'S (operator 2026-08-11, fifth time: "the entirety of system/ is still
      blue and shit, with small red/gold accents....this needs corrected") ──
   `app/system/css/tokens.css` already `@import`s the shared deck, so the TOKENS have been
   shop's for a while — which is exactly why four previous palette passes came back clean while
   the screen stayed blue. The cyan was never in the deck; it was HARDCODED here, below the
   token layer, where a token audit never looks. Measured with `sfti.checks/probe-cyan.py`:
   **121 painted cyan elements across race+home alone**, before this pass.

   ⚠ CYAN IS NOT BANNED AND MUST NOT BE HUNTED OUT OF THE TREE. `tokens.css` declares
   `--accent-cyan` deliberately — shop wears it as the STATUS colour. What was wrong is cyan as
   the DEFAULT ink of a surface. This card had no status to report, so it carries none.

   ★ AND THE STROKE AND THE BAR ARE ONE NUMBER, WHICH IS WHY THEY FAIL TOGETHER (operator: "the
   brain svg does not fully load and its line doesnt fully fill"). `.bstroke` starts fully
   UNDRAWN and app.js eases `stroke-dashoffset` toward 0 AS THE PROGRESS RISES. A progress value
   that stalls at 55% therefore draws 55% of the brain and 55% of the bar — one stalled input
   rendered twice, not two defects. The overlay's own text names the cause it is stalling on:
   "organ census not reported on this payload". The CAUSE is in the boot JS and the payload, not
   in this file; do not "fix" it here by pinning the bar full, which is #414's exact defect. */

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-void);
}
.auth-screen.hidden { display: none; }
@keyframes authSplash {
  0%   { opacity: 1; transform: scale(1); }
  40%  { opacity: 1; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.18); }
}
.auth-card {
  width: min(360px, 90vw);
  padding: var(--sp-xxl) var(--sp-xl);
  text-align: center;
}
.auth-card-boot { width: min(380px, 92vw); }
.auth-logo {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  background: linear-gradient(135deg, var(--accent-red), var(--accent-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: var(--sp-sm);
}
.auth-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 400;
  margin-bottom: var(--sp-xxl);
}
.auth-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: var(--sp-xl);
}
.brain-boot {
  width: 170px;
  height: 160px;
  margin: 0 auto var(--sp-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brain-boot svg { width: 100%; height: 100%; overflow: visible; }
/* every draw-on stroke starts UNDRAWN (offset 100); app.js eases it toward 0 as the boot
   progresses. pathLength="100" in the SVG normalises path lengths so ONE offset drives them all. */
.brain-boot .bstroke {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.brain-boot.alive .bstroke { animation: brainPulse 2.6s ease-in-out infinite; }
@keyframes brainPulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
.boot-progress {
  width: min(220px, 70%);
  height: 3px;
  margin: 0 auto var(--sp-lg);
  border-radius: 3px;
  background: rgba(192, 192, 192, 0.12);
  overflow: hidden;
}
.boot-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-red), var(--accent-gold));
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}