/* ============================================================================
   JARVIS HUD-Layer — Iron-Man-style state-overlay over Apple-Liquid-Glass.

   Imported AFTER app.css on every page. Adds:
     - ARC-Reactor spinner (.arc-reactor)
     - Status-indicator dot with breathing pulse (.status-led)
     - HUD-banner (.hud-banner) for header live-readouts
     - Active-card cyan halo (.card.is-active)
     - Voice-orb intensified glow ring
     - Subtle scan-line overlay for "tony's visor" feel

   All effects are additive — none break existing styles. Effects respect
   prefers-reduced-motion. Scan-lines and pulses can be killed via
   `body.no-hud` if a calmer view is wanted.
   ============================================================================ */

/* --- ARC-Reactor: animated loading core ------------------------------------- */
.arc-reactor {
  width: 28px;
  height: 28px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.arc-reactor::before,
.arc-reactor::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: 0;
}
.arc-reactor::before {
  background: radial-gradient(circle at center, var(--hud) 10%, transparent 60%);
  filter: blur(2px);
  animation: arc-pulse 1.6s ease-in-out infinite;
}
.arc-reactor::after {
  border: 1.5px solid var(--hud);
  box-shadow:
    0 0 8px var(--hud-glow),
    inset 0 0 6px var(--hud-glow);
  animation: arc-spin 4s linear infinite;
}
.arc-reactor.sm { width: 18px; height: 18px; }
.arc-reactor.lg { width: 44px; height: 44px; }

@keyframes arc-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 1.00; transform: scale(1.08); }
}
@keyframes arc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- Status-LED: small dot with breathing pulse ---------------------------- */
.status-led {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hud);
  box-shadow: 0 0 6px var(--hud-glow);
  animation: led-pulse 2.2s ease-in-out infinite;
  vertical-align: middle;
  margin-right: 6px;
}
.status-led.standby { background: var(--fg-dim); box-shadow: none; animation: none; }
.status-led.error   { background: var(--error);
                      box-shadow: 0 0 6px rgba(255, 122, 122, 0.6);
                      animation-duration: 0.8s; }
.status-led.ok      { background: var(--ok);
                      box-shadow: 0 0 6px rgba(111, 227, 199, 0.5); }

@keyframes led-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.86); }
}

/* --- HUD-Banner: live-readout strip in headers ----------------------------- */
.hud-banner {
  display: flex;
  gap: 18px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hud-dim);
  padding: 6px 12px;
  border: 1px solid var(--hud-glow-soft);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(90deg,
      rgba(0, 229, 255, 0.04) 0%,
      transparent 60%),
    var(--bg-glass);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}
.hud-banner .label { color: var(--fg-faint); }
.hud-banner .value { color: var(--hud); text-shadow: 0 0 6px var(--hud-glow-soft); }
.hud-banner .sep { color: var(--border-strong); }

/* --- Active-state card-halo (cyan, breathing) ----------------------------- */
.card.is-active,
.card.is-thinking {
  border-color: var(--hud);
  box-shadow:
    var(--shadow-2),
    0 0 0 1px var(--hud-glow),
    0 0 24px -4px var(--hud-glow);
  animation: card-glow 3s ease-in-out infinite;
}
@keyframes card-glow {
  0%, 100% { box-shadow:
    var(--shadow-2),
    0 0 0 1px var(--hud-glow),
    0 0 24px -4px var(--hud-glow); }
  50%      { box-shadow:
    var(--shadow-3),
    0 0 0 1px var(--hud-glow),
    0 0 36px -2px var(--hud-glow); }
}

/* --- Voice-Orb intensified ring (only applies when class is present) ------ */
.orb-hud-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--hud-glow);
  box-shadow:
    0 0 18px var(--hud-glow-soft) inset,
    0 0 24px var(--hud-glow-soft);
  animation: orb-ring-spin 6s linear infinite;
  pointer-events: none;
}
@keyframes orb-ring-spin {
  from { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.04); }
  to   { transform: rotate(360deg) scale(1); }
}

/* --- Scanline overlay (very subtle, optional via body.scan-lines) --------- */
body.scan-lines::after {
  content: "";
  position: fixed;
  pointer-events: none;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    var(--hud-scan) 2px,
    var(--hud-scan) 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
  z-index: 9999;
}

/* --- "no-hud" override: turn all motion off (motion-sensitivity) ---------- */
@media (prefers-reduced-motion: reduce) {
  .arc-reactor::before,
  .arc-reactor::after,
  .status-led,
  .card.is-active,
  .card.is-thinking,
  .orb-hud-ring {
    animation: none !important;
  }
}
body.no-hud .arc-reactor,
body.no-hud .status-led,
body.no-hud .hud-banner,
body.no-hud .orb-hud-ring,
body.no-hud .card.is-active,
body.no-hud .card.is-thinking { animation: none; }

/* --- Mono numeric counter (HUD-styled, for stats) ------------------------- */
.hud-num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--hud);
  text-shadow: 0 0 4px var(--hud-glow-soft);
}