/* ============================================================
   mobile-perf.css — shared touch/mobile performance layer
   ------------------------------------------------------------
   Single source of truth for the mobile compositing budget.
   Loaded LAST in <head> on every page (after the inline <style>),
   so these rules win in the cascade.

   Strategy (revised 2026-06-08): keep the LOOK (soft warm blobs,
   defined nav) but cut the PER-FRAME cost. The expensive thing on
   iOS is not a static blur — it is re-blurring/re-compositing a
   layer EVERY frame. So we:
     • keep the blob blur (rasterized once = cheap) but FREEZE motion,
     • drop live `backdrop-filter` on fixed nav surfaces and replace
       it with a solid translucent scrim (no per-scroll re-blur),
     • freeze the infinite, non-compositable background animations,
     • make modal open instantly (no heavy shadow re-paint on anim).
   ============================================================ */

/* ── Touch devices (real phones / tablets) — the expensive path ── */
@media (hover: none) and (pointer: coarse) {

  /* 1. backdrop-filter is the #1 iOS scroll killer — strip it everywhere.
        Exception: the nav surfaces get it back in §3 — three small fixed
        elements are cheap, and the frosted-glass nav is part of the brand. */
  *,
  *::before,
  *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* 2. Background blobs: KEEP the soft blur (looks like desktop, rasterized
        once → cheap) but freeze the animation and release the permanent GPU
        layer. Freezing motion is the real win — animating a blurred layer
        forces a full re-blur every frame. NOTE: we intentionally do NOT set
        `filter: none` here — that is what made the blobs look hard-edged. */
  .blob,
  .bg-blob {
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  /* 2b. Other infinite / non-compositable background animations that the
         blob rule above doesn't cover. `hero-bg-flow` animates
         background-position on a full-screen 4-layer gradient → a full
         repaint every frame, forever. Freeze them all on touch. */
  .hero-video-placeholder,
  .scroll-down-arrow,
  .eyebrow .dot,
  .skel-line::after,
  .scroll-hint .line::before {
    animation: none !important;
  }

  /* 3. Glass nav: re-enable blur on the few small nav surfaces (the §1 kill
        is a universal selector, so these class selectors win on specificity —
        same mechanism as the inline kill-switch on index/cases/services).
        The dark scrim stays underneath: it keeps text legible while the blur
        layer initializes and on browsers without backdrop-filter.
        (.nav-cta keeps its solid coral fill.) */
  .nav-logo,
  .nav-pill,
  .nav-lang,
  .mobile-dock {
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    background: rgba(22, 17, 15, 0.62) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
  }

  /* 4. An open modal must not sit over a live-blurred backdrop —
        use an opaque scrim instead. */
  .modal-backdrop,
  .case-modal-backdrop,
  .svc-modal-backdrop {
    background: rgba(15, 12, 10, 0.94) !important;
  }

  /* 5. Modal open must be instant — don't animate opacity/scale over a large
        soft box-shadow (forces per-frame shadow re-raster). Lighten the shadow
        and drop the open animation on touch. */
  .modal-content,
  .case-modal-content,
  .svc-modal-content {
    animation: none !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  }

  /* 6. iOS UX hygiene: comfortable tap targets, no auto-zoom on
        focus, no 300ms tap delay. */
  .nav-cta, .cta-primary, .cta-secondary,
  button[type="submit"],
  [data-case-open], [data-svc-open], [data-modal-open] {
    min-height: 44px;
  }
  .case-modal-close, .svc-modal-close, [data-modal-close] {
    min-width: 44px;
    min-height: 44px;
  }
  input, textarea, select {
    font-size: 16px !important;
  }
  a, button,
  [data-case-open], [data-svc-open], [data-modal-open], [data-modal-close] {
    touch-action: manipulation;
  }
}

/* ── Small viewports (≤768px) ──
   Also catches touch laptops and the desktop preview, so the optimized blob
   path is verifiable without device emulation. Freeze motion only — keep the
   blur (the inline page CSS already softens it to blur(55px) here). */
@media (max-width: 768px) {
  .blob,
  .bg-blob {
    animation: none !important;
    will-change: auto !important;
  }
  .hero-video-placeholder {
    animation: none !important;
  }
}

/* Respect users who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
  .blob,
  .bg-blob,
  .hero-video-placeholder {
    animation: none !important;
    transition: none !important;
  }
}
