/* Optional motion layer: removing this file leaves the static page intact. */
:root {
  --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-scrub: linear;
  --motion-reveal-duration: .6s;
}

/* Zoom Dive translation: the image falls through a clipped mountain aperture. */
.hero > .hero-image {
  overflow: hidden;
}

.hero > img.hero-image {
  transform: scale(1);
  transform-origin: 54% 38%;
}

/* JS alone adds this attribute, so a script failure never hides static copy. */
[data-motion-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--motion-reveal-duration) var(--motion-ease-out),
    transform var(--motion-reveal-duration) var(--motion-ease-out);
}

[data-motion-reveal].motion-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Scrub Frames fallback: a scroll-linked 3D product rotation when no frame set exists. */
.product-view .pack-rotate {
  perspective: 1200px;
}

.product-view .pack-rotate img {
  display: block;
  transform: rotateY(0deg) rotateX(0deg) scale(1);
  transform-style: preserve-3d;
  backface-visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .hero > img.hero-image,
  [data-motion-reveal],
  .product-view .pack-rotate img {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }

  [data-motion-reveal] {
    opacity: 1 !important;
  }
}