/* ============================================================================
   AURORIX LOGO ANIMATIONS - 4 effects, one class each.
   ----------------------------------------------------------------------------
   Used by the admin "Logo" section: the admin picks an effect per logo place
   (sidebar / splash / admin mark) and it is applied to the UPLOADED image.

   The catalogue is deliberately small. It previously held 23 effects; the admin
   asked to keep only v1, Spin and Spin (slow) and delete the rest, so the matching
   keyframes were deleted with them. Do not re-add an effect here without adding it
   to App\Support\LogoAnim - that list is what the dropdowns and the validator read,
   and a key with no CSS would silently animate nothing.

   "v1" needs no CSS at all: choosing it makes the sidebar/splash render the Play
   Orbit mark itself (partials/brand-orbit.blade.php), which carries its own SMIL
   ring + dot motion.

   Performance rules (100%-optimise):
     - every effect animates transform ONLY, so it stays on the compositor:
       no layout, no paint on the page behind it.
     - one keyframe block per effect, no per-element inline styles, no JS.
     - will-change is NOT set globally; it is declared only on the element that
       actually carries a moving class.
     - prefers-reduced-motion turns every effect off in one rule.

   Naming: axLg--<effect>, applied as class="axLg axLg--spin".
   ========================================================================== */

/* Shared base: the animated thing is always an IMAGE inside a round frame. */
.axLg {
    display: block;
    transform-origin: 50% 50%;
    backface-visibility: visible;
}
/* one layer hint, only for the elements that actually move */
.axLg:not(.axLg--none) { will-change: transform; }

/* 1. NONE - opt out (static image) */
.axLg--none { animation: none !important; }

/* 2. V1 - no CSS. See the header note: it swaps the rendered mark, and that mark
   animates itself with SMIL. Nothing to declare here. */

/* 3. SPIN - one calm full turn. At 36px a fast spin reads as flicker, not rotation. */
@keyframes axLgSpin { to { transform: rotate(360deg); } }
.axLg--spin { animation: axLgSpin 4.5s linear infinite; }

/* 4. SPIN SLOW - gentle drift, the least distracting motion */
@keyframes axLgSpinSlow { to { transform: rotate(360deg); } }
.axLg--spin-slow { animation: axLgSpinSlow 14s linear infinite; }

/* ---- PREVIEW MODE -----------------------------------------------------------
   In the admin grid, every effect running at once is unusable: the eye cannot judge any
   single one, and a card can be caught at a frame where the effect is barely visible.
   Each card therefore animates ONLY while hovered or keyboard-focused, which also means
   every effect is seen from frame 0. The real logo is unaffected - it always animates. */
.anim-card .axLg { animation-play-state: paused; }
.anim-card:hover .axLg,
.anim-card:focus-within .axLg { animation-play-state: running; }

/* Accessibility: one rule disables every effect, everywhere. */
@media (prefers-reduced-motion: reduce) {
    .axLg { animation: none !important; }
    .anim-card .axLg { animation-play-state: paused; }
}