/* ============================================================
   ANIMATIONS.CSS — reveal on scroll (Intersection Observer driven)
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.stagger-parent .stagger-child {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s ease calc(var(--i, 0) * 0.09s), transform 0.5s ease calc(var(--i, 0) * 0.09s);
}
.stagger-parent.visible .stagger-child { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .stagger-parent .stagger-child {
    opacity: 1 !important; transform: none !important;
  }
}