/* Scroll-triggered animation classes */
.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: none !important;
}

/* Animation variants — initial state */
.animate-fadein { opacity: 0; }
.animate-slideup { opacity: 0; transform: translateY(40px); }
.animate-slideleft { opacity: 0; transform: translateX(-40px); }
.animate-slideright { opacity: 0; transform: translateX(40px); }
.animate-zoomin { opacity: 0; transform: scale(0.9); }
.animate-bounce { opacity: 0; transform: translateY(20px); }

/* Bounce has a custom keyframe for the visible state */
.animate-bounce.visible {
  animation: bounceIn 0.6s ease forwards;
}

@keyframes bounceIn {
  0% { opacity: 0; transform: translateY(20px); }
  50% { opacity: 1; transform: translateY(-8px); }
  70% { transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Stagger delay utilities */
.delay-100 { transition-delay: 100ms !important; animation-delay: 100ms !important; }
.delay-200 { transition-delay: 200ms !important; animation-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; animation-delay: 300ms !important; }
.delay-400 { transition-delay: 400ms !important; animation-delay: 400ms !important; }
.delay-500 { transition-delay: 500ms !important; animation-delay: 500ms !important; }

/* Fade-in-up for page transitions */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-page-enter {
  animation: fadeInUp 0.4s ease both;
}