/**
 * Mobile compositing budget.
 *
 * On a real phone the homepage was rendering screen-high blank gaps: the background painted
 * but the content layer above it did not. It looked fine in desktop devtools at the same
 * viewport, which is the signature of running out of GPU memory rather than a layout bug.
 *
 * Measured on the homepage at 375px before this file existed:
 *
 *   page height            25,020px  (~31 screens)
 *   DOM elements            4,485
 *   backdrop-filter          46 elements,  4.8 Mpx of blur
 *   will-change              60 elements,  3.1 Mpx permanently promoted
 *   running animations      113
 *   widest marquee track  13,710px
 *
 * Each of those is affordable alone and ruinous together. A phone has a hard cap on layer
 * memory; past it the compositor drops tiles, which is exactly the blank rectangles people
 * were photographing. Desktop GPUs have the headroom to hide the problem.
 *
 * Everything here is scoped to 860px, the project's collapse breakpoint, so desktop keeps
 * the full treatment. Nothing is deleted — the effects degrade to a solid equivalent.
 */

@media (max-width: 860px) {

  /* ── backdrop-filter ────────────────────────────────────────────────────
     The single most expensive effect a phone can be asked to paint, because
     it re-samples everything beneath the element every frame. At 375px wide
     a 16px blur is barely legible as an effect anyway, so the glass panels
     fall back to the solid colour they already sit on. --glass-bg-solid is
     defined with a fallback chain so this works even where that token is
     not set. */
  .magic-glass,
  .adm-hero-home__form,
  .adm-form-card,
  .adm-card--blog,
  .cs-card,
  .adm-vacancy__chips li {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Only the panels whose fill IS the blur get a solid stand-in.
     An element that already declares its own surface must keep it. .cs-card
     sets --cs-surface:#ffffff and paints its body and its badge shelf from
     that one token so the two always match. Including it above replaced that
     with --glass-bg-solid, which nothing defines, so it fell through to
     --color-surface-1 — #f5f5f7 in the live palette, not the #ffffff in
     tokens.css, because adm-control overrides the tokens at wp_head 99.

     Dropping .cs-card from this selector is not enough on its own: the markup
     is <div class="cs-card magic-glass">, so the rule still matched. Hence
     --cs-surface sits in the fallback chain ahead of --color-surface-1. It
     resolves to #ffffff on a case-study card and is simply undefined on the
     genuine glass panels, which fall through as before.

     The symptom: every case-study card body went grey below 860px while its
     badge shelf stayed white, on phones only. Measured on /ae/ —
     mobile 390px rgb(245,245,247) against desktop 1440px rgba(255,255,255,.85),
     with --cs-surface reading #ffffff on both. */
  .magic-glass,
  .adm-hero-home__form,
  .adm-form-card,
  .adm-vacancy__chips li {
    background-color: var(--glass-bg-solid, var(--cs-surface, var(--color-surface-1, #fff)));
  }

  /* ── will-change ────────────────────────────────────────────────────────
     will-change in a stylesheet is permanent: the layer is created on load
     and never released, so 60 of them sit in memory for the whole session.
     .adm-word is the worst of it — the heading splitter puts one on every
     word of every heading, so a single page can promote several hundred
     tiny layers that have already finished animating.

     Dropping it does not stop the animations; the browser still composites
     them, it just does so on demand instead of reserving memory up front. */
  .adm-word,
  .adm-tilt,
  .adm-cards-scroll__track,
  .adm-cards-arc__card,
  .adm-m-px__bg {
    will-change: auto !important;
  }

  /* ── offscreen work: deliberately NOT done here ──────────────────────
     content-visibility:auto was tried and backed out. It cut the measured
     page height immediately after load, but sections re-expand to their real
     height as they come into view, so the page grew from 16,683px to 19,451px
     while scrolling and the scroll position drifted by up to 864px. On a phone
     that is the content jumping under your thumb, which is a worse bug than
     the one being fixed. It would need a real contain-intrinsic-size per
     section type, not a single guess, and the blur and layer caps above are
     where the actual memory saving is. Do not re-add it without per-section
     sizes and a scroll-drift test. */

  /* ── offscreen animations (paired with mobile-performance.js) ──────────
     The script toggles this class as elements leave and re-enter the
     viewport. animation-play-state is used rather than animation:none so a
     marquee resumes from where it stopped instead of jumping back to 0. */
  .adm-anim-paused,
  .adm-anim-paused::before,
  .adm-anim-paused::after {
    animation-play-state: paused !important;
  }

  /* ── parallax ───────────────────────────────────────────────────────────
     A background layer oversized by 20% top and bottom, moved on scroll. The
     effect is nearly invisible on a phone and costs a full-width layer. */
  .adm-m-px__bg { transform: none !important; top: 0; bottom: 0; }
}

/* Someone who has asked their device to stop animating should not be paying
   for a 13,710px marquee track either, at any width. */
@media (prefers-reduced-motion: reduce) {
  .magic-marquee__track { animation: none !important; }
}