/**
 * Lightweight Animation Styles
 * GPU-accelerated animations using transform and opacity
 * Replaces animate.min.css (70KB) with minimal CSS (~2KB)
 */

/* Base animation setup */
.animate__animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Animated state - triggered by IntersectionObserver */
.animate__animated.animated {
  opacity: 1;
}

/* Fade In Up - Most common animation */
.animate__fadeInUp:not(.animated) {
  transform: translateY(30px);
}

.animate__fadeInUp.animated {
  transform: translateY(0);
}

/* Fade In */
.animate__fadeIn:not(.animated) {
  opacity: 0;
}

.animate__fadeIn.animated {
  opacity: 1;
}

/* Fade In Right */
.animate__fadeInRight:not(.animated) {
  transform: translateX(-30px);
}

.animate__fadeInRight.animated {
  transform: translateX(0);
}

/* Fade In Left */
.animate__fadeInLeft:not(.animated) {
  transform: translateX(30px);
}

.animate__fadeInLeft.animated {
  transform: translateX(0);
}

/* Fade In Right Big */
.animate__fadeInRightBig:not(.animated) {
  transform: translateX(-100px);
}

.animate__fadeInRightBig.animated {
  transform: translateX(0);
}

/* Fade In Down */
.animate__fadeInDown:not(.animated) {
  transform: translateY(-30px);
}

.animate__fadeInDown.animated {
  transform: translateY(0);
}

/* Custom opacity on up (used in your theme) */
.opacityOnUp:not(.animated) {
  opacity: 0;
  transform: translateY(20px);
}

.opacityOnUp.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Respect animation duration from data attributes */
.animate__animated[data-wow-duration="500"] {
  transition-duration: 0.5s;
}

.animate__animated[data-wow-duration="1000"] {
  transition-duration: 1s;
}

/* GPU acceleration hint */
.animate__animated {
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Remove will-change after animation completes to free GPU memory */
.animate__animated.animated {
  will-change: auto;
}

/* Ensure animations are smooth on all devices */
@media (prefers-reduced-motion: reduce) {
  .animate__animated {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}