/* Scroll Animation Styles */

/* Base animation classes */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Staggered animations for multiple elements */
.animate-on-scroll.delay-100 {
  transition-delay: 0.1s;
}

.animate-on-scroll.delay-200 {
  transition-delay: 0.2s;
}

.animate-on-scroll.delay-300 {
  transition-delay: 0.3s;
}

.animate-on-scroll.delay-400 {
  transition-delay: 0.4s;
}

.animate-on-scroll.delay-500 {
  transition-delay: 0.5s;
}

/* Slide from left */
.animate-slide-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Slide from right */
.animate-slide-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-slide-right.animate-in {
  opacity: 1;
  transform: translateX(0);
}

/* Scale animation */
.animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

/* Hero specific animations */
.hero-title {
  opacity: 0;
  transform: translateY(40px);
  animation: heroTitleFadeIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards;
}

.hero-subtitle {
  opacity: 0;
  transform: translateY(30px);
  animation: heroSubtitleFadeIn 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s forwards;
}

.hero-cta {
  opacity: 0;
  transform: translateY(20px);
  animation: heroCTAFadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.3s forwards;
}

@keyframes heroTitleFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroSubtitleFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroCTAFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-slide-left,
  .animate-slide-right,
  .animate-scale,
  .hero-title,
  .hero-subtitle,
  .hero-cta {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}