/* ═══ §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. */

.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-cyan), 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(108, 248, 255, 0.12);
  overflow: hidden;
}
.boot-progress-fill {
  width: 0%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-gold));
  box-shadow: 0 0 10px rgba(108, 248, 255, 0.5);
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}