/* ============================================
   Animations — Scroll reveals, transitions
   ============================================ */

/* --- Scroll Reveal --- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for children */
.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.3s; }

/* --- Slide from left --- */
.animate-slide-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.animate-slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* --- Scale in --- */
.animate-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.animate-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-slide-left,
  .animate-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}