/* premium-motion : perpetual loop pack  (yewho-web-effects 2.2, Phase 8)
   CSS-only ambient loops — no JS needed. Complements .md-beat (scene.css) and
   .md-float (scene.js). Keep them SLOW and quiet: these are sub-conscious cues.

     .md-ring    — pulse rings emanating from the element's edge (CTA / live dot /
                   avatar). Radius is inherited, so it works on pills and circles.
                   Tune: --ring-c (color), --ring-dur (def 2.6s), --ring-s (spread, def 1.35)
     .md-breathe — soft glow that swells and settles (box-shadow; small area only).
                   Tune: --breathe-c, --breathe-dur (def 4.5s)
     .md-sway    — gentle pendulum rotate for icons / badges hanging from their top.
                   Tune: --sway-a (def 2.4deg), --sway-dur (def 5s)
     .md-blink   — status-dot blink (the classic REC dot). Tune: --blink-dur (def 1.5s)

   Stagger any of them across siblings with style="--d:.2s" like md-beat.
   All stop under data-motion lite/off and prefers-reduced-motion.
   ============================================================ */

/* ---- emanating pulse rings ---- */
.md-ring{ position:relative; }
.md-ring::before,.md-ring::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:2px solid var(--ring-c,rgba(200,16,46,.55)); opacity:0;
  animation: md-ring var(--ring-dur,2.6s) cubic-bezier(.22,.61,.2,1) var(--d,0s) infinite;
}
.md-ring::after{ animation-delay: calc(var(--d,0s) + var(--ring-dur,2.6s) / 2); }
@keyframes md-ring{
  0%{ transform:scale(1); opacity:.65; }
  100%{ transform:scale(var(--ring-s,1.35)); opacity:0; }
}

/* ---- glow breathe ---- */
.md-breathe{ animation: md-breathe var(--breathe-dur,4.5s) ease-in-out var(--d,0s) infinite; }
@keyframes md-breathe{
  0%,100%{ box-shadow:0 0 0 0 rgba(200,16,46,0); }
  50%    { box-shadow:0 0 26px 2px var(--breathe-c,rgba(200,16,46,.32)); }
}

/* ---- pendulum sway ---- */
.md-sway{ transform-origin:50% -4px; display:inline-block;
  animation: md-sway var(--sway-dur,5s) ease-in-out var(--d,0s) infinite; }
@keyframes md-sway{
  0%,100%{ transform:rotate(calc(-1 * var(--sway-a,2.4deg))); }
  50%    { transform:rotate(var(--sway-a,2.4deg)); }
}

/* ---- status blink ---- */
.md-blink{ animation: md-blink var(--blink-dur,1.5s) ease-in-out var(--d,0s) infinite; }
@keyframes md-blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

/* ---- governor / reduced-motion ---- */
:root[data-motion="lite"] .md-ring::before, :root[data-motion="off"] .md-ring::before,
:root[data-motion="lite"] .md-ring::after,  :root[data-motion="off"] .md-ring::after,
:root[data-motion="lite"] .md-breathe,      :root[data-motion="off"] .md-breathe,
:root[data-motion="lite"] .md-sway,         :root[data-motion="off"] .md-sway,
:root[data-motion="lite"] .md-blink,        :root[data-motion="off"] .md-blink{ animation:none; }
@media (prefers-reduced-motion: reduce){
  .md-ring::before,.md-ring::after,.md-breathe,.md-sway,.md-blink{ animation:none; }
}