/* ==========================================================================
   ALERT_CUES.CSS — Alert Muscle Memory V2.2: Tiered Visual Cues
   Subtle glow + pulse by tier. Respects prefers-reduced-motion.
   ========================================================================== */

/* ----------  Base tier styling ---------- */
[data-alert-score] {
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

/* Low (0–49): subtle border glow */
.nx-alert--low {
  box-shadow: 0 0 6px rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.18);
}

/* Med (50–74): stronger glow + gentle pulse */
.nx-alert--med {
  box-shadow: 0 0 10px rgba(6, 214, 160, 0.18);
  border-color: rgba(6, 214, 160, 0.25);
  animation: nx-pulse-med 3s ease-in-out infinite;
}

/* High (75–89): brighter glow + faster pulse */
.nx-alert--high {
  box-shadow: 0 0 14px rgba(6, 214, 160, 0.30);
  border-color: rgba(6, 214, 160, 0.40);
  animation: nx-pulse-high 2s ease-in-out infinite;
}

/* Extreme (90–100): strongest glow + shock entrance */
.nx-alert--extreme {
  box-shadow: 0 0 20px rgba(255, 107, 107, 0.28), 0 0 40px rgba(99, 102, 241, 0.12);
  border-color: rgba(255, 107, 107, 0.40);
  animation: nx-pulse-extreme 1.6s ease-in-out infinite;
}
.nx-alert--extreme.nx-alert--shock {
  animation: nx-shock 0.5s ease-out, nx-pulse-extreme 1.6s ease-in-out 0.5s infinite;
}

/* ----------  Keyframes ---------- */
@keyframes nx-pulse-med {
  0%, 100% { box-shadow: 0 0 10px rgba(6, 214, 160, 0.18); }
  50%      { box-shadow: 0 0 16px rgba(6, 214, 160, 0.28); }
}
@keyframes nx-pulse-high {
  0%, 100% { box-shadow: 0 0 14px rgba(6, 214, 160, 0.30); }
  50%      { box-shadow: 0 0 22px rgba(6, 214, 160, 0.45); }
}
@keyframes nx-pulse-extreme {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 107, 107, 0.28), 0 0 40px rgba(99, 102, 241, 0.12); }
  50%      { box-shadow: 0 0 30px rgba(255, 107, 107, 0.45), 0 0 50px rgba(99, 102, 241, 0.20); }
}
@keyframes nx-shock {
  0%   { transform: scale(1); opacity: 0.7; }
  30%  { transform: scale(1.03); opacity: 1; }
  60%  { transform: scale(0.99); }
  100% { transform: scale(1); opacity: 1; }
}

/* ----------  Score badge (optional inline indicator) ---------- */
.nx-alert-score-badge {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  background: rgba(99, 102, 241, 0.12);
  color: var(--accent, #6366f1);
}
.nx-alert--extreme .nx-alert-score-badge {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}
.nx-alert--high .nx-alert-score-badge {
  background: rgba(6, 214, 160, 0.15);
  color: #06d6a0;
}

/* ----------  Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-alert-score] {
    transition: none;
  }
  .nx-alert--med,
  .nx-alert--high,
  .nx-alert--extreme,
  .nx-alert--extreme.nx-alert--shock {
    animation: none;
  }
}

/* ----------  Light theme ---------- */
html[data-theme="light"] .nx-alert--low {
  box-shadow: 0 0 6px rgba(99, 102, 241, 0.10);
}
html[data-theme="light"] .nx-alert--med {
  box-shadow: 0 0 8px rgba(6, 214, 160, 0.14);
}
html[data-theme="light"] .nx-alert--high {
  box-shadow: 0 0 12px rgba(6, 214, 160, 0.22);
}
html[data-theme="light"] .nx-alert--extreme {
  box-shadow: 0 0 16px rgba(255, 107, 107, 0.20), 0 0 30px rgba(99, 102, 241, 0.08);
}