/* =========================================================
   PULSELINE — Animation Utilities
   Pure CSS (no external animation library) so the app has
   zero runtime dependencies. Respects --anim-scale from
   settings and prefers-reduced-motion (see responsive.css).
   ========================================================= */

/* ---------- Fade ---------- */
.fade-in{ animation: fadeIn var(--dur-med) var(--ease-out) both; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

.fade-in-up{ animation: fadeInUp var(--dur-med) var(--ease-out) both; }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- Scale ---------- */
.scale-in{ animation: scaleIn var(--dur-med) var(--ease-out) both; }
@keyframes scaleIn{ from{ opacity:0; transform:scale(.9);} to{ opacity:1; transform:scale(1);} }

.pop{ animation: pop calc(.5s / var(--anim-scale)) var(--ease-out); }
@keyframes pop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.12); }
  100%{ transform:scale(1); }
}

/* ---------- Glow ---------- */
.glow-pulse{ animation: glowPulse calc(2.2s / var(--anim-scale)) ease-in-out infinite; }
@keyframes glowPulse{
  0%,100%{ filter:drop-shadow(0 0 6px rgba(76,224,210,.35)); }
  50%{ filter:drop-shadow(0 0 22px rgba(76,224,210,.75)); }
}

.text-glow{ animation: textGlow calc(3s / var(--anim-scale)) ease-in-out infinite; }
@keyframes textGlow{
  0%,100%{ text-shadow:0 0 12px rgba(124,156,255,.25); }
  50%{ text-shadow:0 0 26px rgba(124,156,255,.6); }
}

/* ---------- Rotate ---------- */
.spin{ animation: spin calc(1.1s / var(--anim-scale)) linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.spin-slow{ animation: spin calc(9s / var(--anim-scale)) linear infinite; }

/* ---------- Needle sweep (used as a CSS fallback; canvas handles the real gauge) ---------- */
@keyframes needleSweep{
  0%{ transform:rotate(-120deg); }
  100%{ transform:rotate(120deg); }
}

/* ---------- Number tick (digit roll) ---------- */
.digit-roll{ display:inline-block; animation: digitRoll calc(.3s / var(--anim-scale)) var(--ease-out); }
@keyframes digitRoll{
  from{ transform:translateY(6px); opacity:.4; }
  to{ transform:translateY(0); opacity:1; }
}

/* ---------- Shimmer skeleton (used while fetching connection info) ---------- */
.shimmer{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  background-size: 200% 100%;
  animation: shimmer calc(1.6s / var(--anim-scale)) infinite;
}
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* ---------- Toast (used by sr-announcer visual companion, if needed) ---------- */
.toast-in{ animation: toastIn calc(.4s / var(--anim-scale)) var(--ease-out) both; }
@keyframes toastIn{
  from{ opacity:0; transform: translateY(-10px) scale(.96); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* ---------- Progress ring dash animation is set via JS stroke-dashoffset;
   this class just eases the transition ---------- */
.ring-anim{ transition: stroke-dashoffset calc(.6s / var(--anim-scale)) var(--ease-out); }