/* =========================================================================
   IKA — iOS Safari "position: sticky" jitter fix for the layered-card-reveal stack
   -------------------------------------------------------------------------
   Symptom: on iOS native Safari the pinned card CONTAINER
   (.nectar-sticky-media-section__content__wrap) trembles — it oscillates a few px
   up/down during scroll. This is an iOS sticky-positioning rendering issue, NOT the
   card animation (it persisted even with a no-JS, compositor-only card animation).

   The animation itself is Salient's "windowed deck" (restored — see
   scripts/nectar-sticky-media-sections.js). This file only stabilises the sticky pin.

   Two CSS-only fixes (high confidence on iOS/Safari 26.4+):
   1) Salient puts `overflow-x: clip` on the TALL SECTION, which is an ANCESTOR of the
      sticky wrapper. `overflow: clip` on a sticky ancestor destabilises the sticky on
      iOS (it recomputes against the clip context during scroll). Remove it from the
      ancestor and put the horizontal clip on the sticky wrapper itself instead.
   2) Promote the sticky wrapper to its OWN compositor layer so iOS computes its
      position on the GPU, in sync with the (compositor-thread) scroll — no per-frame
      main-thread re-pin, no jitter.

   Refs: WebKit Bug 297779 / 234500 (iOS sticky shift/shake), Bug 133334 (sticky inside
   accelerated overflow), terluinwebdesign "use overflow: clip not hidden", muffinman.io
   (translateZ GPU promotion). If jitter persists on older iOS, next levers are: sticky
   height 100vh -> 100dvh (overconstraint, fixed in 26.4), and a JS IntersectionObserver +
   position:fixed pin (see CLAUDE.md).
   ========================================================================= */

/* 1. Remove the clip from the sticky ANCESTOR. */
body .nectar-sticky-media-sections.type--layered-card-reveal.layered-card-reveal-effect--stack {
  overflow-x: visible;
}

/* 2. Move the horizontal clip onto the sticky wrapper + give it its own GPU layer so it
      pins smoothly on iOS. (overflow-x: clip keeps overflow-y visible, matching the
      original — exiting cards still travel up off-screen; rotated cards are clipped
      horizontally so there is no page-level horizontal scroll.) */
body .nectar-sticky-media-sections.type--layered-card-reveal
  .nectar-sticky-media-section__content__wrap {
  overflow-x: clip;
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}