/* ===========================================================================
 * perf-motion.css — global motion / paint reduction rules
 * Added 2026-04-25 (perf audit round 4 — Iter-4).
 *
 * This single stylesheet does three small but high-leverage things:
 *
 *   1. Honours the user's OS-level "reduce motion" preference by
 *      collapsing all decorative animation, transition, and motion to
 *      a near-zero duration globally.  This is a free accessibility
 *      win — users who set this preference get the static UI they
 *      asked for, and on weak hardware (Intel UHD, Apple M1 base, old
 *      laptops) it doubles as a power saver.  Rule covers ::before /
 *      ::after pseudo-elements as well, which several NFT-page
 *      animations live on.
 *
 *   2. Defines a ``.gn-paused`` class that pauses CSS animations.
 *      ``perf-animation-pause.js`` adds this class to elements with
 *      infinite animations when they leave the viewport (via an
 *      IntersectionObserver), and removes it when they re-enter.
 *      Pausing animation-play-state is dramatically cheaper than
 *      re-rendering frames the user can't see.  Rule also covers
 *      pseudo-elements because many NFT-page glows live on ::before.
 *
 *   3. Provides ``.gn-no-anim`` as an opt-out marker.  Apply it to a
 *      surface that should never be paused — anything safety-critical
 *      (transaction-status spinners, loading indicators on a request
 *      the user is waiting for).  The animation-pause observer skips
 *      anything with this class.
 *
 * These rules are loaded at the very end of the CSS cascade in
 * base.html so they always win — the !important flags are deliberate
 * and necessary because many in-line component styles use animation
 * shorthand which otherwise wouldn't be overridable from a separate
 * stylesheet.
 * =========================================================================== */


/* ── 1. prefers-reduced-motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  /* Collapse everything to near-zero so users who can't tolerate
     vestibular motion or who just don't want it get a calm UI.  We
     don't use 0s because some component code keys off transitionend /
     animationend events to advance state machines; a 1 ms duration
     still fires those events synchronously while being visually
     instantaneous. */
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── 2. .gn-paused — pause animation while off-screen ─────────────── */
/* Set by perf-animation-pause.js via IntersectionObserver.  Pausing
   the play-state freezes the current frame instead of letting the
   compositor keep running the animation off-screen — a free win on
   pages with many animated cards (NFT marketplace cards, leaderboard
   pulses, etc.). */
.gn-paused,
.gn-paused::before,
.gn-paused::after {
  animation-play-state: paused !important;
}


/* ── 3. .gn-no-anim — opt-out marker (no rule needed) ─────────────── */
/* JS reads this class as an exclusion filter.  No CSS effect; defined
   here only so future maintainers find the explanation in one place. */