/* ios-perf.css — iOS / Safari scroll & rendering performance optimisations.
   Loaded after all other styles so overrides apply at maximum specificity.
   Target: eliminate janky scroll, forced repaints and GPU memory pressure.

   HTML class inventory (verified against index.html):
     FAQ block  → .faq.faq--spoiler  (inside .layout-container)
     Footer     → footer.footer.fade-in-section
     Map iframe → .map-container__iframe  (loading="lazy" set in HTML)
     Calendar   → .calendar-wrapper  /  .calendar-scale-wrapper
*/

/* ═══════════════════════════════════════════════════════════════════════
   1. ALWAYS-ON IMPROVEMENTS (all browsers, no visual regressions)
   ═══════════════════════════════════════════════════════════════════════ */

/* Smooth native scroll without the JS overhead */
html {
    scroll-behavior: smooth;
}

/* content-visibility: auto skips layout+paint for sections out of the
   viewport — the single biggest scroll FPS win available in CSS.
   contain-intrinsic-size prevents layout shift when the section is
   in the rendering queue (browser reserves the estimated height).

   NOTE: .faq section intentionally excluded — it contains a Google Maps
   iframe whose dynamic height can't be predicted by contain-intrinsic-size,
   causing the last FAQ item (office map) to be clipped/hidden.            */

.footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 380px;
}

/* The fixed background containment: nothing inside overflows its box,
   so the browser can skip cascade repaints for the rest of the page.  */
.background {
    contain: strict;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. APPLE / WEBKIT-SPECIFIC OVERRIDES
   @supports (-webkit-touch-callout: none) matches iOS Safari exclusively.
   ═══════════════════════════════════════════════════════════════════════ */
@supports (-webkit-touch-callout: none) {

    /* ── 2a. backdrop-filter audit ────────────────────────────────────
       backdrop-filter on iOS creates a full offscreen composited surface
       for EACH element and repaints it every frame during scroll — this
       is the #1 cause of iOS scroll jank on content-heavy pages.

       Strategy:
         • Modals/overlays that are OPEN (on top)  → keep blur, reduce radius
         • Elements visible during normal scrolling → remove blur entirely    */

    /* Calendar shell overlays shown during scrolling */
    .intake-shell,
    .intake-shell__overlay,
    .intake-shell__overlay-inner,
    .slots-nav-overlay,
    .slots-nav-faq-bubble,
    .calendar-scale-wrapper,
    .calendar-wrapper {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Global modal — only visible when open, reduced radius saves VRAM */
    .global-spinner,
    .month-switch-overlay {
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    /* Booking modal content — solid fill replaces the expensive blur */
    #bookingModal .modal__content,
    .modal__content {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background-color: rgba(58, 38, 22, 0.97) !important;
    }

    /* Floating slot-picker / quick-slots overlay */
    .form-calendar-overlay__panel {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Background stripe animation enabled on iOS. 
       We use will-change: transform to keep it on the compositor thread. */
    .background__stripe {
        animation-play-state: running !important;
        will-change: transform !important;
    }

    /* ── 2c. Release will-change on elements that don't animate ───────
       Each will-change: transform creates a composited layer consuming
       GPU VRAM. On iOS (unified memory) this directly degrades scroll
       smoothness. Keep only layers that are genuinely animating.        */
    .fade-in-section,
    .blur-in-section {
        will-change: auto !important;
    }

    /* Elements that truly need a compositor layer */
    #globalSpinner,
    .page-preloader {
        will-change: opacity;
    }

    /* ── 2d. Momentum scrolling for inner scroll containers ───────────
       Without this, inner scrollable divs on iOS feel sluggish / sticky. */
    .modal__body,
    .custom-options,
    .slots-block {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    /* ── 2e. Eliminate 300ms tap delay on interactive elements ─────── */
    a,
    button,
    [role="button"],
    input,
    select,
    textarea,
    .cal-day,
    .slot-btn,
    .footer-book-btn,
    .faq__question,
    .custom-select__trigger {
        touch-action: manipulation;
    }

    /* ── 2f. Promote calendar grid to its own compositor layer ────────
       translateZ(0) is the cheapest cross-browser compositor promotion.
       This lets the calendar animate/update without repainting the page. */
    .calendar-wrapper {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        isolation: isolate;
    }

    /* ── 2g. Strip modal-form transitions that trigger layer repaints ─
       Inside the booking modal, transitions on containers cause Safari to
       repaint the entire modal stacking context every frame.             */
    #bookingModal .contact-form__group,
    #bookingModal .file-attach {
        transition: none !important;
    }

    /* ── 2h. Prevent the fixed background from triggering full repaints
       contain:strict already set above, but we reinforce it here because
       iOS applies the @supports block after the base rules.              */
    .background {
        contain: strict;
        will-change: auto;
        transform: translateZ(0); /* own layer so fixed bg never repaints */
        -webkit-transform: translateZ(0);
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   3. prefers-reduced-motion — accessibility + iOS Low Power Mode
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .background__stripe {
        animation: none !important;
    }

    body {
        animation: none !important;
    }

    .fade-in-section,
    .blur-in-section {
        transition: none !important;
        animation: none !important;
    }

    /* Slow the preloader arc so it uses less GPU on Low Power Mode */
    .page-preloader__arc {
        animation-duration: 2.4s !important;
    }
}