/* ============================================================================
   PingMon — Glow-Motion / Dynamik  (opt-in, barrierearm)
   ----------------------------------------------------------------------------
   Bewegung NUR gezielt auf einzelne, bedeutungstragende Elemente — niemals
   flächendeckend. Alles langsam, niedriger Kontrast, KEIN Blitzen. Komplett
   abgeschaltet bei prefers-reduced-motion. Reines CSS, opt-in per Klasse.
   Faustregel: pro Ansicht höchstens 1–2 animierte Elemente.
   ============================================================================ */

/* Globale Sicherheitsbremse: Reduced Motion => null Animation. NICHT entfernen. */
@media (prefers-reduced-motion: reduce){
  .pm-anim-breathe,.pm-anim-live,.pm-anim-live::after,
  .pm-anim-sheen::after,.pm-anim-ambient,.pm-anim-alert{ animation:none !important; }
}

/* 1) BREATHE — sanftes Atmen des Glows.
   Wofür: EIN gesunder/Online-Block (Status-Banner bei OK, Online-Stat-Karte).
   5s, nur Schatten/Helligkeit, kein Layout. */
.pm-anim-breathe{ animation:pm-breathe 5s ease-in-out infinite; will-change:box-shadow; }
@keyframes pm-breathe{
  0%,100%{ box-shadow:0 0 0 1px rgba(34,197,94,.16), 0 14px 30px -18px rgba(34,197,94,.30); }
  50%    { box-shadow:0 0 0 1px rgba(34,197,94,.28), 0 18px 40px -16px rgba(34,197,94,.55); }
}

/* 2) LIVE — „Sender ist live": weicher Puls-Ring am Status-Punkt.
   Wofür: der EINE Status-LED im Status-Header. Element braucht position:relative. */
.pm-anim-live{ position:relative; }
.pm-anim-live::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:2px solid rgba(34,197,94,.55);
  animation:pm-live 2.8s ease-out infinite;
}
@keyframes pm-live{
  0%  { transform:scale(1);   opacity:.6; }
  70% { opacity:0; }
  100%{ transform:scale(2.6); opacity:0; }
}

/* 3) SHEEN — langsamer Licht-Schimmer, der einmal pro Runde überstreicht.
   Wofür: das EINE Hero-/Status-Banner. 7s, großer Abstand, sehr dezent. */
.pm-anim-sheen{ position:relative; overflow:hidden; }
.pm-anim-sheen::after{
  content:""; position:absolute; top:0; left:-60%; width:60%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent);
  transform:skewX(-18deg);
  animation:pm-sheen 7s ease-in-out infinite;
}
@keyframes pm-sheen{ 0%,12%{ left:-60%; } 55%{ left:130%; } 100%{ left:130%; } }

/* 4) AMBIENT — der Seiten-Glow „pumpt" minimal.
   Wofür: höchstens EIN Hintergrund-Layer. Sehr subtil, 9s. */
.pm-anim-ambient{ animation:pm-ambient 9s ease-in-out infinite; }
@keyframes pm-ambient{ 0%,100%{ opacity:.85; } 50%{ opacity:1; } }

/* 5) ALERT — ENDLICHER Aufmerksamkeits-Puls bei NEUEM Ausfall.
   Wofür: rote Status-Box im Moment des Down. WICHTIG: endlich (3x), KEIN
   Dauerblinken. Per JS-Klasse einmalig beim Statuswechsel setzen; danach
   bleibt der Block statisch rot. */
.pm-anim-alert{ animation:pm-alert 1s ease-out 3; }
@keyframes pm-alert{
  0%  { box-shadow:0 0 0 0 rgba(239,68,68,.45); }
  100%{ box-shadow:0 0 0 14px rgba(239,68,68,0); }
}

/* ---------------------------------------------------------------------------
   EINSATZ-REGELN
   - Pro Ansicht max. 1–2 animierte Elemente. Status-Header = idealer Kandidat.
   - Dauer-Animation (breathe/live/sheen/ambient) NUR auf grüne/gesunde Zustände.
   - Rot/Down NUR endlich (.pm-anim-alert) — niemals infinite, niemals schnell.
   - Nichts unter ~2s, nichts Hochkontrastiges blinken (Reiz-/Epilepsie-Schutz).
   - Nicht auf viele Karten gleichzeitig (Unruhe + Performance).
   - prefers-reduced-motion schaltet oben alles ab.
   EINBAU-BEISPIEL (CSS-only, auf bestehende Klassen):
     .pm-statusbanner        -> + .pm-anim-sheen   (dezenter Schimmer)
     Status-LED im Banner    -> + .pm-anim-live    (Live-Puls)
     Online-Metrik-Karte     -> + .pm-anim-breathe (ruhiges Atmen)
   --------------------------------------------------------------------------- */