/* Base animation */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

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

/* Directional variants */
.animate-from-left    { transform: translateX(-20px); }
.animate-from-right   { transform: translateX(20px); }
.animate-from-top     { transform: translateY(-20px); }
.animate-from-bottom  { transform: translateY(20px); }

/* Delay helpers */
.animate-on-scroll.delay-1 { transition-delay: 0.2s; }
.animate-on-scroll.delay-2 { transition-delay: 0.4s; }
.animate-on-scroll.delay-3 { transition-delay: 1s; }
.animate-on-scroll.delay-4 { transition-delay: 1.5s; }
.animate-on-scroll.delay-5 { transition-delay: 1.8s; }

/* Zoom effect */
.animate-zoom-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-zoom-in.visible {
  opacity: 1;
  transform: scale(1);
}