/**
 * scroll-stability.css — v3.16
 * ---------------------------------------------------------------------------
 * ROOT CAUSE OF THE "JERKY SCROLL"
 *
 * The page was not being scrolled badly — it was being *resized* while it
 * scrolled. Two things did that:
 *
 *   1. Viewport units that follow the mobile browser chrome. `100vh` is
 *      anchored to the LARGEST viewport and `100dvh` follows the URL bar
 *      live. Scrolling up expands the visible area (URL bar hides) and
 *      scrolling down shrinks it again, so every full-height box
 *      (hero, page hero, drawer) re-laid out mid-gesture. That is the
 *      "enlarged / full-screen state" the page kept switching between —
 *      each switch is a full layout recalculation during inertia scroll.
 *
 *   2. Animated geometry on the hero: an infinite Ken Burns
 *      `transform: scale()` plus a scroll-linked parallax transform on a
 *      full-viewport image. Both change the apparent size of the first
 *      screen while the finger is still moving.
 *
 * FIX (how Airbnb behaves): one stable layout for the whole scroll.
 *   - every full-height box uses `svh` (small viewport height) — a value
 *     that never changes when the browser chrome shows/hides;
 *   - nothing animates width / height / scale / zoom during scroll;
 *   - remaining scroll effects are opacity or translate only.
 *
 * This file loads last so it wins over the older fix layers.
 */

/* ── 1. STABLE VIEWPORT HEIGHT ─────────────────────────────────────────── */
/* svh = height of the viewport with the browser chrome VISIBLE. It is
   constant for the whole session, so hiding/showing the URL bar can never
   resize the layout. */
.hl-hero,
.hl-hero__bg,
.hl-hero__video,
.hl-page-hero,
.hl-mobile-menu {
  --hl-stable-vh: 100svh;
}

.hl-hero {
  min-height: var(--hl-stable-vh) !important;
  height: auto !important;
}

.hl-hero__bg,
.hl-hero__video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
}

.hl-page-hero {
  min-height: 62svh !important;
}

.hl-mobile-menu {
  height: 100svh !important;
  max-height: 100svh !important;
}

/* ── 2. NO GEOMETRY ANIMATION ANYWHERE NEAR SCROLL ─────────────────────── */
/* Never transition or animate box size / scale on elements that live in the
   normal document flow — those are the properties that force layout while
   scrolling. Hover-only micro-interactions on cards are untouched below. */
.hl-hero,
.hl-hero__bg,
.hl-hero__video,
.hl-hero__overlay,
.hl-hero__content,
.hl-main,
.hl-page-hero {
  animation: none !important;
  transition: opacity 0.4s ease !important;
  will-change: auto !important;
  zoom: normal !important;
}

.hl-hero__bg,
.hl-hero__video {
  transform: none !important;
}

/* The hero content may still fade (opacity is compositor-only and free),
   but it must not move the layout. */
.hl-hero__content {
  transform: none !important;
}

/* ── 3. CTA BANNER PARALLAX — translate only, overscan via layout ──────── */
/* The background used to carry `scale(1.08)` so the vertical drift never
   revealed an edge. Scale is gone; the overscan is now static layout, which
   costs nothing at scroll time. */
[data-parallax="cta-banner"] {
  inset: -48px 0 !important;
  height: auto !important;
  will-change: transform;
}

/* ── 4. SCROLL ENGINE ──────────────────────────────────────────────────── */
html {
  /* Let the browser's own scroller do the work — no smooth-scroll hijack on
     the document; anchor jumps still use scrollTo({behavior:'smooth'}). */
  scroll-behavior: auto;
  overflow-anchor: auto;
}

body {
  overscroll-behavior-y: none;
}

/* Reserve space for media so late-decoding images cannot shift the page
   under the finger (another source of the "grab" feeling). */
img:not([width]):not([height]) {
  content-visibility: auto;
}

/* ── 5. MOBILE ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Fixed backdrop-filter layers are recomposited on every scroll tick on
     iOS. Keep the header solid instead of blurred while scrolling. */
  .hl-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background-color 0.25s ease, box-shadow 0.25s ease !important;
  }

  /* No scroll-linked motion at all on small screens. */
  .hl-hero__bg,
  .hl-hero__video,
  [data-parallax] {
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}

/* ── 6. REDUCED MOTION ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hl-hero__content,
  .hl-hero__bg,
  .hl-hero__video,
  [data-parallax] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}