/* Scroll Motion — adaptação leve do Container Scroll Animation.
 * Mantém o layout intacto e usa apenas opacity/transform. */

html.scroll-motion-ready main {
  perspective: 1400px;
  perspective-origin: 50% 24vh;
}

html.scroll-motion-ready .scroll-motion {
  opacity: 0;
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  will-change: opacity, transform;
  transition:
    opacity 360ms cubic-bezier(.22, 1, .36, 1) var(--scroll-motion-delay, 0ms),
    transform 420ms cubic-bezier(.22, 1, .36, 1) var(--scroll-motion-delay, 0ms);
}

html.scroll-motion-ready .scroll-motion--block {
  transform: translate3d(0, 30px, 0) rotateX(3.5deg) scale(.985);
}

html.scroll-motion-ready .scroll-motion--card {
  transform: translate3d(0, 22px, 0) rotateX(2.5deg) scale(.97);
}

html.scroll-motion-ready .scroll-motion.is-scroll-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0) scale(1);
  will-change: auto;
}

/* Sequência principal da home: movimento ligado à posição na tela.
 * O hero recua suavemente; o produto entra em perspectiva e se acomoda. */
html.scroll-motion-ready .shape-hero.scroll-stage {
  --hero-scroll-y: 0px;
  --hero-scroll-rotate: 0deg;
  --hero-scroll-scale: 1;
  --hero-content-y: 0px;
  --hero-content-scale: 1;
  --hero-content-opacity: 1;
  --hero-art-y: 0px;
  --hero-art-scale: 1;
  transform:
    translate3d(0, var(--hero-scroll-y), 0)
    rotateX(var(--hero-scroll-rotate))
    scale(var(--hero-scroll-scale));
  transform-origin: 50% 100%;
  will-change: transform;
}

html.scroll-motion-ready .shape-hero.scroll-stage .shape-hero-content {
  transform:
    translate3d(0, var(--hero-content-y), 0)
    scale(var(--hero-content-scale));
  opacity: var(--hero-content-opacity);
  will-change: transform, opacity;
}

html.scroll-motion-ready .shape-hero.scroll-stage .shape-hero-art {
  transform:
    translate3d(0, var(--hero-art-y), 0)
    scale(var(--hero-art-scale));
  will-change: transform;
}

html.scroll-motion-ready .novidade-banner.scroll-stage {
  --product-scroll-y: 54px;
  --product-scroll-rotate: 7deg;
  --product-scroll-scale: .94;
  --product-scroll-opacity: .72;
  opacity: var(--product-scroll-opacity);
  transform:
    translate3d(0, var(--product-scroll-y), 0)
    rotateX(var(--product-scroll-rotate))
    scale(var(--product-scroll-scale));
  transform-origin: 50% 0%;
  will-change: transform, opacity;
}

@media (max-width: 640px) {
  html.scroll-motion-ready .scroll-motion--block {
    transform: translate3d(0, 20px, 0) rotateX(2deg) scale(.99);
  }

  html.scroll-motion-ready .scroll-motion--card {
    transform: translate3d(0, 16px, 0) rotateX(1.5deg) scale(.98);
  }

  html.scroll-motion-ready .shape-hero.scroll-stage {
    transform:
      translate3d(0, var(--hero-scroll-y-mobile, var(--hero-scroll-y)), 0)
      scale(var(--hero-scroll-scale-mobile, var(--hero-scroll-scale)));
  }

  html.scroll-motion-ready .novidade-banner.scroll-stage {
    transform:
      translate3d(0, var(--product-scroll-y-mobile, var(--product-scroll-y)), 0)
      rotateX(var(--product-scroll-rotate-mobile, var(--product-scroll-rotate)))
      scale(var(--product-scroll-scale-mobile, var(--product-scroll-scale)));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.scroll-motion-ready main {
    perspective: none;
  }

  html.scroll-motion-ready .scroll-motion {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  html.scroll-motion-ready .shape-hero.scroll-stage,
  html.scroll-motion-ready .shape-hero.scroll-stage .shape-hero-content,
  html.scroll-motion-ready .shape-hero.scroll-stage .shape-hero-art,
  html.scroll-motion-ready .novidade-banner.scroll-stage {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}