/* ===========================
   ANIMATIONS — Fade-In on Scroll
   =========================== */

/* Initial state */
[data-anim] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--anim-i, 0) * 70ms);
  will-change: opacity, transform;
}
[data-anim="fade"] {
  transform: none;
}
[data-anim="fade-right"] {
  transform: translateX(-24px);
}
[data-anim="zoom"] {
  transform: scale(0.96);
}

/* Reveal */
[data-anim].is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Subtle image reveal — independent of fade siblings */
.anim-img {
  overflow: hidden;
}
.anim-img > img {
  transform: scale(1.04);
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.anim-img.is-visible > img {
  transform: scale(1);
}

/* No-JS / initial paint fallback — show everything if JS hasn't run */
html:not(.js-anim-ready) [data-anim] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Accessibility — respect user preference */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  .anim-img > img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}