/* =============================================================================
   Home page — performance layer
   -----------------------------------------------------------------------------
   Loaded LAST on the home page (after every section stylesheet). It does not
   change the design; it removes the cost of things nobody can see:

   1. Off-screen freeze (every device)
      index.blade.php marks each top-level section/footer `.ip-offscreen` while
      it is outside the viewport. Looping decoration (orbit pins, spinners,
      pings, light beams…) pauses there instead of forcing the compositor to
      commit new frames for content that is 3,000px away.

   2. Layer hygiene (every device)
      `.hx-reveal` kept `will-change: opacity, transform` forever, which pins
      every revealed block to its own GPU layer for the life of the page.

   3. Lite mode — `html.ip-lite` (phones, tablets, touch, data-saver,
      low-memory/low-core devices, reduced motion; set in
      site/partials/styles.blade.php before first paint)
      backdrop-filter is the single most expensive effect on mobile GPUs and
      the page had ~150 of them (47 pricing cards, 36 testimonial cards…).
      Every card's background is already a dark/light translucent fill, so
      without the blur the card looks the same; only the 20–30px frosting of
      the glow behind it is lost.
   ========================================================================== */

/* 1 — off-screen freeze ---------------------------------------------------- */
.ip-offscreen,
.ip-offscreen *,
.ip-offscreen *::before,
.ip-offscreen *::after {
    animation-play-state: paused !important;
}

/* 2 — layer hygiene -------------------------------------------------------- */
body.home-x .hx-reveal.is-in { will-change: auto; }

/* 3 — lite mode ------------------------------------------------------------ */
html.ip-lite body.home-x > :not(header),
html.ip-lite body.home-x > :not(header) *,
html.ip-lite body.home-x > :not(header) *::before,
html.ip-lite body.home-x > :not(header) *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* The drawer is already 94–97% opaque, so its 32px blur was invisible but
   still re-blurred the page on every frame of the slide. The scrim blurred the
   ENTIRE page; a slightly deeper tint reads the same and costs nothing. */
html.ip-lite .nv-drawer,
html.ip-lite .nv-scrim {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html.ip-lite .nv-scrim { background: rgba(2, 9, 21, .68); }
html.ip-lite:not(.dark) .nv-scrim { background: rgba(16, 32, 54, .5); }

/* Bento without GSAP falls back to a CSS entrance that also animated
   `filter: blur()` on every card — a full re-raster per frame. Keep the
   fade + rise, drop the blur. */
html.ip-lite .bt-bento.is-armed:not(.bt-gsap) .bt-card { filter: none !important; }


/* 4 — content is already there when you scroll to it (lite mode) ----------
   Blocks used to sit at opacity 0 until a scroll observer fired, then fade
   in over 0.6–0.7s. On an iPhone flick-scroll that read as empty sections
   "loading" behind the finger. Phones get the finished state directly; the
   scenes INSIDE cards (keyed on .is-in) still play.
   (A `content-visibility: auto` experiment lived here briefly; iOS Safari
   paints those sections late during momentum scrolling, so it was removed.) */
html.ip-lite body.home-x .hx-reveal,
html.ip-lite .bt-bento.is-armed .bt-card,
html.ip-lite .ft-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    will-change: auto !important;
}

/* 5 — GPU memory (lite mode) -------------------------------------------------
   iOS Safari kills a tab that holds too much graphics memory — on an iPhone
   that looks like the site "crashing" and reloading.

   a) Glow orbs were circles blurred by 80–150px. WebKit renders each one into
      an off-screen buffer padded by ~3× the blur radius on every side, at 3×
      pixel density. A radial fade mask draws the same soft glow straight
      from the element; `scale` makes up for the spread the blur used to add. */
html.ip-lite :is(
    body.home-x .hx-orb, body.home-x .hx-video__glow, .bt-orb, .at-atlas__orb,
    .ab-show__orb, .sc-why__orb, .tw__bg span, .px-pricing__bg span,
    .ap-app__glow, .ap-stage__halo, .ft-orb, .rm-road__glow, .nv-aura i
) {
    filter: none !important;
    -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .5) 42%, rgba(0, 0, 0, .14) 72%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .5) 42%, rgba(0, 0, 0, .14) 72%, transparent 100%);
    scale: 1.45;
}
html.ip-lite .pod::before,
html.ip-lite .px-card--featured::before {
    filter: none !important;
    -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .45) 50%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .45) 50%, transparent 100%);
}

/* b) The testimonial marquee does not run on phones (testimonials.css), but its
      columns kept `will-change: transform`: two ~2,400px-tall layers held in
      GPU memory for nothing. */
html.ip-lite .tw-col__inner { will-change: auto !important; }