/**
 * Animations
 * Small, reusable keyframes + scroll-reveal utility classes.
 * All respect prefers-reduced-motion (see global.css override).
 * Toggled via assets/js/animations.js (IntersectionObserver).
 */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.reveal {
  opacity: 0;
  will-change: opacity, transform;
}

.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}

.reveal.is-visible {
  animation: fade-in var(--transition-slow) forwards;
}

.reveal-up.is-visible {
  animation: fade-in-up var(--transition-slow) forwards;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.96);
}

.reveal-scale.is-visible {
  animation: scale-in var(--transition-slow) forwards;
}

/* Stagger helper — pair with inline style="--reveal-delay: 2" or use
   the nth-child scale below for lists rendered without inline styles. */
.reveal-up[style*="--reveal-delay"] {
  animation-delay: calc(var(--reveal-delay, 0) * 80ms);
}