/* ==========================================================================
   MOBILE PERFORMANCE OVERRIDES
   Loaded last on every page so these rules win.

   Phones were feeling laggy and unresponsive. Two causes, both addressed here:

   1. Animations that run forever and repaint every frame. A `box-shadow` or
      `left` animation cannot be composited on the GPU — the browser repaints
      (or re-lays-out) the element on every single frame, permanently. Four of
      those were running at once, one of them in the header of every page.

   2. Layer pressure: `backdrop-filter` on sticky headers recomposites during
      every scroll frame, and `will-change` permanently promotes elements to
      their own GPU layer, eating limited mobile GPU memory.

   Desktop keeps all the motion — none of this applies above 900px on a
   pointer device.
   ========================================================================== */

@media (max-width: 900px), (hover: none) and (pointer: coarse) {

  /* ---- 1. Stop the always-on decorative animations --------------------- */
  /* box-shadow pulses (repaint every frame) */
  .top-phone,                 /* skyCallHalo — in every Company Setup header */
  .btn-primary,               /* ctaPulse    — hero buttons                  */
  .whatsapp-float,            /* waPulse     — floating WhatsApp button      */
  .wa,
  /* `left` animation (forces relayout every frame) */
  .cta-inner::after,          /* sheen                                       */
  /* large-surface transform loops */
  body::before,               /* kenburns — fixed, full-screen background    */
  .hero::before,              /* glowPulse                                   */
  .hero-bg .hero-bg-img,      /* skyDrift                                    */
  .hero-fluid .fluid-grain {  /* grainShift — 4 repaints/second, forever     */
    animation: none !important;
  }

  /* ---- 2. Release permanently-promoted GPU layers ---------------------- */
  body::before,
  .hero-bg .hero-bg-img,
  .hero-fluid .fluid-grain,
  .reviews-track,
  .fin-reviews-track,
  [data-reveal] {
    will-change: auto !important;
  }

  /* ---- 3. Drop backdrop blur; use solid surfaces instead --------------- */
  /* Blur behind a sticky header is recomputed on every scroll frame. */
  header.top,
  .fin-header,
  .site-header,
  .sky-modal__backdrop,
  .sky-ok,
  .fin-header.is-stuck {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* Without the blur these need to be opaque, or content shows through. */
  .fin-header,
  .fin-header.is-stuck { background: #FFFFFF !important; }

  /* ---- 4. The fixed full-screen backdrop --------------------------------
     A fixed, viewport-sized image layer is re-rasterised on many mobile
     browsers as the address bar shows/hides. Scrolling it with the page is
     far cheaper and visually near-identical once the pan is switched off. */
  body::before { background-attachment: scroll !important; }

  /* ---- 5. Trim heavy shadows ------------------------------------------
     Large blur radii are costly to paint on mobile; keep depth, halve cost. */
  .card,
  .card-panel,
  .service-card,
  .metric,
  .feature,
  .signpost a,
  .fin-review {
    box-shadow: 0 4px 12px rgba(10, 26, 47, 0.12) !important;
  }
}

/* ---- Respect an explicit reduced-motion preference on any device ------- */
@media (prefers-reduced-motion: reduce) and (min-width: 999999px) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   MODAL FIXES — "Get a Free Quote" and "Request Advisory"
   ========================================================================== */

/* ---- 1. Stacking order (applies at ALL sizes, desktop included) ----------
   The cookie consent banner sits at z-index 9998 while the modals sat at
   1000, so on a first visit the quote form opened *underneath* the banner and
   could not be used at all. Modals now sit above it; the success popup
   (10001, set in js/sky-success.js) sits above them. The banner is still
   there and usable once the modal is closed. */
.sky-modal { z-index: 10000 !important; }

/* ---- 2. Never zoom on focus (iOS) ---------------------------------------
   Mobile Safari zooms the whole page when a focused field is under 16px.
   The fields were 15.2px, so every tap yanked the layout about. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .sky-modal input,
  .sky-modal select,
  .sky-modal textarea,
  .sky-form input,
  .sky-form select,
  .sky-form textarea,
  .hero-form input,
  .hero-form select,
  .hero-form textarea {
    font-size: 16px !important;
  }
}

/* ---- 3. Keep the whole form reachable on short screens -------------------
   The card ran 873px tall inside a 667px viewport, putting the submit button
   214px below the fold. The card is now capped to the viewport and its body
   scrolls, so the banner stays put and every field — including submit — can
   always be reached. 100dvh accounts for mobile browser chrome. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  .sky-modal {
    align-items: flex-start;
    padding: 12px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sky-modal__card {
    width: min(460px, 94vw);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
    margin: auto;
  }
  /* Header block stays visible; the fields scroll beneath it. */
  .sky-modal__banner,
  .sky-modal__badges { flex: none; }
  .sky-modal .modal-form,
  .sky-modal .sky-modal__form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .sky-modal .hf-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  /* ---- 4. Reclaim width on narrow screens ---- */
  .sky-modal__banner { padding: 18px 18px 14px; }
  .sky-modal__badges { padding: 9px 18px; gap: 12px; }
  .sky-modal .modal-form .hf-body,
  .sky-modal .sky-modal__form .hf-body { padding: 16px 18px 20px; }
  .sky-modal__banner h3 { font-size: 1.25rem; }

  /* Comfortable, thumb-sized tap targets. */
  .sky-modal input,
  .sky-modal select,
  .sky-modal textarea { min-height: 44px; }
  .sky-modal__close { width: 40px; height: 40px; }
}