/*
 * Subtle scroll motion layer.
 * Keeps the existing visual system intact and only animates opacity/transform.
 */

.slp-motion-ready #main-content .slp-reveal {
  --slp-reveal-x: 0px;
  --slp-reveal-y: 22px;
  --slp-reveal-scale: 1;
  --slp-reveal-duration: 640ms;
  --slp-reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translate3d(var(--slp-reveal-x), var(--slp-reveal-y), 0) scale(var(--slp-reveal-scale));
  transition:
    opacity var(--slp-reveal-duration) var(--slp-reveal-ease) var(--slp-reveal-delay, 0ms),
    transform var(--slp-reveal-duration) var(--slp-reveal-ease) var(--slp-reveal-delay, 0ms),
    box-shadow 240ms ease,
    border-color 200ms ease,
    background-color 200ms ease,
    color 200ms ease;
  will-change: opacity, transform;
}

.slp-motion-ready #main-content .slp-reveal.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.slp-motion-ready #main-content .slp-reveal-from-left {
  --slp-reveal-x: -24px;
  --slp-reveal-y: 8px;
}

.slp-motion-ready #main-content .slp-reveal-from-right {
  --slp-reveal-x: 24px;
  --slp-reveal-y: 8px;
}

.slp-motion-ready #main-content .slp-reveal-card {
  --slp-reveal-y: 26px;
  --slp-reveal-scale: 0.985;
}

.slp-motion-ready #main-content .slp-reveal-media {
  --slp-reveal-y: 18px;
  --slp-reveal-scale: 0.992;
}

.slp-motion-ready #main-content .slp-motion-media {
  overflow: hidden;
}

.slp-motion-ready #main-content .slp-reveal-card .slp-motion-media img:not(.product-card__img--hover),
.slp-motion-ready #main-content .slp-reveal-media img:not(.product-card__img--hover) {
  transform: scale(1.035);
  transition: transform 860ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.slp-motion-ready #main-content .slp-reveal-card.is-inview .slp-motion-media img:not(.product-card__img--hover),
.slp-motion-ready #main-content .slp-reveal-media.is-inview img:not(.product-card__img--hover) {
  transform: scale(1.005);
}

.slp-motion-ready #main-content .slp-motion-parallax img:not(.product-card__img--hover) {
  transform: scale(1.025) translate3d(0, var(--slp-parallax-y, 0px), 0);
  transition: transform 120ms linear;
  will-change: transform;
}

.slp-motion-ready #main-content .slp-motion-parallax.slp-reveal-media img:not(.product-card__img--hover) {
  transition: transform 860ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
  .slp-motion-ready #main-content .slp-reveal {
    --slp-reveal-y: 16px;
    --slp-reveal-duration: 520ms;
  }

  .slp-motion-ready #main-content .slp-reveal-from-left,
  .slp-motion-ready #main-content .slp-reveal-from-right {
    --slp-reveal-x: 0px;
    --slp-reveal-y: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slp-motion-ready #main-content .slp-reveal,
  .slp-motion-ready #main-content .slp-reveal.is-inview,
  .slp-motion-ready #main-content .slp-reveal-card .slp-motion-media img,
  .slp-motion-ready #main-content .slp-reveal-media img,
  .slp-motion-ready #main-content .slp-motion-parallax img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}