/*
 * Motion — transform + opacity ONLY. No width/height transitions.
 * One orchestrated reveal pattern (data-animate); everything else is instant.
 */

/* Reveal-on-scroll: short translate + fade. Step easing for snap, not spring. */
.reveal-on-scroll,
[data-animate] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.visible,
[data-animate].visible,
[data-animate].animated {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children — JS sets --i on each. */
[data-animate-stagger] > * { transition-delay: calc(var(--i, 0) * 60ms); }

/* Legacy named directions — collapse them all to the canonical fade-up reveal. */
[data-animate="fade-in"],
[data-animate="fade-in-up"],
[data-animate="fade-in-down"],
[data-animate="fade-in-left"],
[data-animate="fade-in-right"],
[data-animate="slide-in-bottom"],
[data-animate="slide-in-top"],
[data-animate="slide-in-left"],
[data-animate="slide-in-right"],
[data-animate="scale-in"] { /* uses the same reveal as above */ }

/* Reduced motion: pages should be instantly visible. */
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll,
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}