/* ==========================================================================
   43-performance.css — motion & GPU budget.  LOADED LAST so it wins the cascade.

   The site leans on a lot of decorative motion (≈200 infinite animations) and a
   lot of backdrop-blur. On desktop that's fine and it looks great — we keep it.
   The cost bites on phones, where blur compositing and big animated blur-blobs
   are the two most expensive things a GPU does. This file trims ONLY those two
   on small screens, and honours the OS "reduce motion" preference everywhere —
   while deliberately KEEPING the entrance / hover / interactive motion that makes
   the site feel alive. Nothing here hides content or changes layout.
   ========================================================================== */

/* -- (1) OS "reduce motion" — calm everything, but never hide anything ------
   Snap every animation to its END frame instantly (forwards) so entrance
   animations that start at opacity:0 still finish VISIBLE, and infinite loops
   run once and stop. This is the safe reset — see the entrance-animation rule:
   we force `forwards` so a `backwards`-fill entrance can't revert to invisible. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    animation-fill-mode: forwards !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -- (2) Phones & small tablets — drop the two priciest effects only --------
   Everything else (entrance pops, hover lifts, gradient text, button sheens,
   pulses) stays, so the UI still feels lively — it just stops doing the
   expensive off-screen-invisible work every frame. */
@media (max-width: 900px){

  /* 2a. Backdrop blur re-samples the whole scene behind an element every frame —
     the single heaviest common effect on a mobile GPU, and it's compounded when
     the blurred element is sticky (it re-blurs on every scroll tick). Drop it.
     The translucent backgrounds underneath are mostly ≥0.7 opacity, so panels,
     the shadowing console, cards and popovers stay perfectly readable. */
  *{
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
  }

  /* 2b. Ambient colour-blobs = a huge element (40–90vw) carrying a 40–90px
     `filter: blur()`, most of them also drifting on an infinite animation.
     That combination (large + blur + animated) is the costliest thing to
     composite and it is pure background decoration sitting behind the content.
     Hide it on phones — the base page background stays, so nothing goes flat in
     a way that hurts legibility, and the page composites for a fraction of the
     cost. Desktop keeps every one of them. */
  .lx-aurora, .lx-aurora--1, .lx-aurora--2, .lx-aurora--3,
  .ll-aurora, .ll-aurora--1, .ll-aurora--2, .ll-aurora--3,
  .sh-aurora, .sh-aurora span,
  .wq-aurora,
  .gea-aurora,
  .gd2-lb-aura,
  .rx-bg-orb,
  .wotd-orb,
  .pl-orb, .pl-orb-a, .pl-orb-b,
  .mem-ring-aura,
  .pf-hero-aura, .pf-gauge-aura, .pf-coffee-aura,
  body.grammar-mode .aurora{
    display: none !important;
  }

  /* 2c. A few blur-blobs double as the ONLY background tint of their section, so
     hiding them would look bare. Keep those, but strip the blur + the drift so
     they cost almost nothing (a static soft gradient composites once). */
  .ll-ambient{
    -webkit-filter: none !important;
            filter: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}