/* motion.css - the theme's two optional motions (10-15-C section 1), with assets/motion.js.
 *
 * Linked ONLY when Theme settings > Animations has one of them on (layouts/default.liquid), so a shop
 * with both off never loads these bytes and its page is unchanged.
 */

/* Smooth scrolling: the rules Lenis documents for the page it drives. The classes exist only while
   Lenis runs (motion.js never starts it for a shopper who asks for less motion). */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* Reveal on scroll: motion.js marks what starts below the screen with .reveal--offscreen, then swaps
   it for .reveal--in as it comes into view. Opacity and transform only, so nothing around the element
   moves. The whole block sits under no-preference: a shopper who asks for less motion sees every
   element where it is, even if a class was added before their setting changed. */
@media (prefers-reduced-motion: no-preference) {
  .reveal--offscreen {
    opacity: 0;
    transform: translateY(30px);
  }

  .reveal--in {
    transition:
      opacity 0.6s cubic-bezier(0, 0, 0.3, 1),
      transform 0.6s cubic-bezier(0, 0, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
  }
}