/* ANIMATION CALM (Carnivore round 2, card A1b): the stylesheet half of client/js/animation-calm.js.
 * While the window is calm (`<html data-calm="blur low-power thermal">`, client/js/desktop-window-calm.js) every INFINITE
 * animation stops ticking. `animation-play-state: paused` keeps the phase, so it resumes in place; focus return costs no
 * script because these rules simply stop matching when the root attribute goes. animation-calm.js writes
 * `data-anim-calm="self before after"` on the elements that carry an infinite animation (self and/or a pseudo-element);
 * finite entrance animations are never marked and keep finishing. !important because each component's own `animation:`
 * shorthand resets play-state. A separate attribute from `data-anim-offscreen` (animation-pause.css), so the two never fight.
 *
 * The reduce-motion block is the backstop for the declarations that have no reduce guard of their own (status-dot.css,
 * styles.css `.status.connected`, MotionPanel, ChatWidget). Every existing reduce block only removes or pauses, so a global
 * rule matches their intent. OS Reduce Motion is deliberately a media query, never a calm reason and never `data-motion`. */

@layer legacy {
    :root[data-calm] [data-anim-calm~="self"] {
        animation-play-state: paused !important;
    }

    :root[data-calm] [data-anim-calm~="before"]::before {
        animation-play-state: paused !important;
    }

    :root[data-calm] [data-anim-calm~="after"]::after {
        animation-play-state: paused !important;
    }

    @media (prefers-reduced-motion: reduce) {
        :root *,
        :root *::before,
        :root *::after {
            animation: none !important;
        }
    }
}