:root {
  --animate-duration: 0.7s;
  --animate-distance: 24px;
  --animate-easing: cubic-bezier(.2,.65,.3,1);
}

[data-animate] {
  opacity: 0;
  transition:
    opacity var(--animate-duration) var(--animate-easing),
    transform var(--animate-duration) var(--animate-easing);
  will-change: opacity, transform;
}

[data-animate].in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-animate="fade-in-up"] {
  transform: translateY(var(--animate-distance));
}

[data-animate="fade-in-down"] {
  transform: translateY(calc(var(--animate-distance) * -1));
}

[data-animate="fade-in-left"] {
  transform: translateX(var(--animate-distance));
}

[data-animate="fade-in-right"] {
  transform: translateX(calc(var(--animate-distance) * -1));
}

[data-animate="zoom-in"] {
  transform: scale(0.92);
}

[data-delay="100"] { transition-delay: 100ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}