/* YardCharts jQuery Animation Styles - Scroll-Based */

/* Base state for elements to be animated */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px); /* Slightly more pronounced for scroll animations */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform; /* Performance optimization */
}

/* Animated state */
.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Different animation types */
.fade-in-up {
  transform: translateY(30px);
}

.fade-in-down {
  transform: translateY(-30px);
}

.fade-in-left {
  transform: translateX(30px);
}

.fade-in-right {
  transform: translateX(-30px);
}

.zoom-in {
  transform: scale(0.9);
}

/* Animation speeds */
.animation-fast {
  transition-duration: 0.5s;
}

.animation-slow {
  transition-duration: 1.2s;
}

/* Staggered animation delays */
.delay-100 {
  transition-delay: 200ms;
}

.delay-200 {
  transition-delay: 400ms;
}

.delay-300 {
  transition-delay: 600ms;
}

.delay-400 {
  transition-delay: 800ms;
}

.delay-500 {
  transition-delay: 1000ms;
}

/* For elements that should remain visible when JS is disabled */
.no-js .animate-on-scroll {
  opacity: 1;
  transform: none;
}