/**
 * Scroll-triggered animation — "parallax" preset.
 * Soft depth while scrolling; images ease back to the original pose
 * (translate 0 / scale 1) when idle or near viewport center.
 *
 * Merchant Style §8 opt-in keeps motion even when OS prefers-reduced-motion.
 *
 * Size rules:
 * - Synthetic wraps ([data-cms-parallax-wrap]): keep intrinsic image size (do not force 100%).
 * - Known crop frames (figure / image-grid / card media): fill the frame for depth crop.
 *
 * Shortcode listing roots (.cms-scroll-listing): whole-block fade/slide; slides untouched.
 */

/* Shortcode section reveal (banner / gallery / scrolling roots). */
[data-cms-scroll-anim="parallax"] .cms-scroll-listing {
  opacity: 0;
  transform: translateY(36px) scale(0.97);
  transition-property: opacity, transform !important;
  transition-duration: 700ms !important;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  transition-delay: var(--cms-scroll-delay, 0ms) !important;
  will-change: opacity, transform;
}

[data-cms-scroll-anim="parallax"] .cms-scroll-listing.is-inview {
  opacity: 1;
  transform: translateY(0) scale(1);
  will-change: auto;
}

[data-cms-scroll-anim="parallax"] .cms-scroll-parallax-frame {
  display: block;
  overflow: hidden;
  max-width: 100%;
  opacity: 1;
  transform: none;
}

/* Shrink-wrap content images so width:100% is never implied by a full-bleed parent. */
[data-cms-scroll-anim="parallax"] .cms-scroll-parallax-frame[data-cms-parallax-wrap] {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  line-height: 0;
  vertical-align: top;
}

[data-cms-scroll-anim="parallax"] .cms-scroll-parallax-img {
  display: block;
  max-width: 100%;
  height: auto;
  transform-origin: center center;
  will-change: transform;
  /* Rest = original; JS lerps drift then eases back here. */
  transform: translate3d(0, 0, 0) scale(1);
  backface-visibility: hidden;
}

/* Listing / media crop frames — fill box for parallax crop (not WYSIWYG content imgs). */
[data-cms-scroll-anim="parallax"] figure.cms-scroll-parallax-frame .cms-scroll-parallax-img,
[data-cms-scroll-anim="parallax"] .m-image-grid__figure.cms-scroll-parallax-frame .cms-scroll-parallax-img,
[data-cms-scroll-anim="parallax"] .m-card__media.cms-scroll-parallax-frame .cms-scroll-parallax-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-cms-scroll-anim="parallax"] .cms-scroll-parallax-bg {
  will-change: background-position;
  background-size: cover;
  background-position: center 50%;
  contain: paint;
}

[data-cms-scroll-anim="parallax"] .m-banner.cms-scroll-parallax-frame,
[data-cms-scroll-anim="parallax"] .m-banner .cms-scroll-parallax-frame {
  border-radius: 0;
}

/* Safety: never let a stray frame class clip page chrome / banner widgets. */
[data-cms-scroll-anim="parallax"] .m-banner.cms-scroll-parallax-frame,
[data-cms-scroll-anim="parallax"] .m-content-slot.cms-scroll-parallax-frame,
[data-cms-scroll-anim="parallax"] .m-content-block.cms-scroll-parallax-frame {
  overflow: visible;
}