/* ==========================================================================
   ANIMATION SUPPORT
   Calm, premium, natural — no bounce, no spin, no aggressive parallax.
   ========================================================================== */

/* Hero load-in sequence */
.hero-cta-row {
  opacity: 0;
  transform: translateY(18px);
}
.hero.is-ready .hero-cta-row { animation: heroIn 900ms var(--ease-editorial) 380ms forwards; }
@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* AOS-style scroll reveal, driven by IntersectionObserver in main.js */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 900ms var(--ease-editorial), transform 900ms var(--ease-editorial);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }
[data-reveal-delay="1"] { transition-delay: 90ms; }
[data-reveal-delay="2"] { transition-delay: 180ms; }
[data-reveal-delay="3"] { transition-delay: 270ms; }
[data-reveal-delay="4"] { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .hero-cta-row { opacity: 1; transform: none; animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Product image swap crossfade (ingredient lab / product detail gallery) */
.crossfade-img { transition: opacity 420ms var(--ease-editorial); }
.crossfade-img.is-fading { opacity: 0; }

/* Loading state for lazy images */
img[loading="lazy"] { background: var(--c-sage); }