/* ==========================================================================
   trv-smooth.css — scroll feel for the travel pages only
   (travel.html, tijuana.html, cancun.html)

   Paired with js/trv-smooth.js, which handles the video side. This file is
   about how the page responds to a scroll gesture rather than how much work
   it does per frame.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Horizontal photo strips

   The hospital and lodging galleries are horizontal scrollers sitting inside
   a vertically scrolling page, and they had two properties that make that
   combination feel bad on a trackpad:

   - "x mandatory" snapping forces a snap animation on every gesture that has
     any horizontal component at all. A mostly-vertical flick that drifts a
     few pixels sideways gets caught, and the page stutters while the strip
     animates to a snap point. "proximity" still snaps photos into place when
     you are actually scrolling the strip, and stays out of the way when you
     are not.

   - Nothing stopped scroll chaining, so reaching either end of a strip handed
     the remaining momentum straight to the page. That is the lurch you feel
     when a gallery "lets go". overscroll-behavior-x keeps it contained.

   contain: paint tells the browser the strip's children never paint outside
   it, so scrolling one does not invalidate anything around it.
   -------------------------------------------------------------------------- */
.tj-blue-gallery,
.cx-lodge-gallery {
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  contain: paint;
}

/* --------------------------------------------------------------------------
   2. Media blocks paint in isolation

   Each of these is a fixed-aspect box holding one photo or clip. Telling the
   browser that their layout and paint are self-contained keeps a late-arriving
   lazy image from invalidating layout for the rest of the page — which is
   exactly what was happening mid-scroll as galleries streamed in.
   -------------------------------------------------------------------------- */
.tj-blue-gallery figure,
.cx-lodge-gallery figure,
.tj-doc-img,
.cx-doc-img,
.cx-stay-media,
.cx-gallery .cx-frame,
.tj-vista-frame,
.cx-vista-frame {
  contain: layout paint;
}

/* --------------------------------------------------------------------------
   3. Map embeds

   Left interactive by request. Containment at least stops the embed's own
   internal layout from reaching back into the page, and content-visibility
   lets the browser skip painting one that is nowhere near the viewport. The
   intrinsic size matches the min-height already set on these wrappers, so
   nothing shifts when it swaps between skipped and painted.
   -------------------------------------------------------------------------- */
.tj-blue-map,
.cx-map {
  contain: layout paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

/* --------------------------------------------------------------------------
   4. Hover transforms stay on the compositor

   The lodging and transport cards scale their photo on hover. Without a hint
   the browser rasterises the image again at the new scale on the first frame
   of the transition, which lands as a hitch right when the pointer arrives.
   -------------------------------------------------------------------------- */
.trv-transport-media img,
.cx-stay-card,
.tj-blue-gallery img,
.cx-lodge-gallery img {
  backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   5. Reduced motion

   js/trv-smooth.js holds the videos on their poster frame; match that here by
   dropping snap animation so nothing moves on its own.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tj-blue-gallery,
  .cx-lodge-gallery {
    scroll-snap-type: none;
    scroll-behavior: auto;
  }
}