/* Animation Styles for Animate on Screen Scroll Plugin */
.animate-on-screen-scroll {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.animate-on-screen-scroll.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Additional delay classes */
.animate-on-screen-scroll.animate-delay-1 {
    transition-delay: 0.2s;
}

.animate-on-screen-scroll.animate-delay-2 {
    transition-delay: 0.4s;
}

.animate-on-screen-scroll.animate-delay-3 {
    transition-delay: 0.6s;
}

/* Alternative animation styles (optional) */
.animate-on-screen-scroll.fade-up {
    transform: translateY(30px) scale(0.85);
}

.animate-on-screen-scroll.fade-up.is-visible {
    transform: translateY(0) scale(1);
}

.animate-on-screen-scroll.fade-left {
    transform: translateX(-30px) scale(0.85);
}

.animate-on-screen-scroll.fade-left.is-visible {
    transform: translateX(0) scale(1);
}

.animate-on-screen-scroll.fade-right {
    transform: translateX(30px) scale(0.85);
}

.animate-on-screen-scroll.fade-right.is-visible {
    transform: translateX(0) scale(1);
}

/* Ensure animations work well with images */
img.animate-on-screen-scroll {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Performance optimizations */
.animate-on-screen-scroll {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .animate-on-screen-scroll {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}
