.animate-on-scroll {
    opacity: 0;
    will-change: opacity, transform;
}

.animate-in {
    opacity: 1 !important;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-on-scroll {
    transform: translateY(30px) translateZ(0);
}
.animate-fadeInUp {
    animation-name: fadeInUp;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

.animate-fadeInDown {
    animation-name: fadeInDown;
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-60px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

.animate-fadeInLeft {
    animation-name: fadeInLeft;
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateZ(0);
    }
}

.animate-fadeInRight {
    animation-name: fadeInRight;
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateZ(0);
    }
}

.animate-zoomIn {
    animation-name: zoomIn;
}
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateZ(0);
    }
    to {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}

.animate-zoomOut {
    animation-name: zoomOut;
}
@keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale(1.2) translateZ(0);
    }
    to {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}

.animate-rotateIn {
    animation-name: rotateIn;
}
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) translateZ(0);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) translateZ(0);
    }
}

.animate-flipInY {
    animation-name: flipInY;
}
@keyframes flipInY {
    from {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg) translateZ(0);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateY(0deg) translateZ(0);
    }
}

.animate-slideInUp {
    animation-name: slideInUp;
}
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(100%) translateZ(0);
    }
    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

.animate-bounceIn {
    animation-name: bounceIn;
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3) translateZ(0);
    }
    50% {
        opacity: 1;
        transform: scale(1.05) translateZ(0);
    }
    70% {
        transform: scale(0.9) translateZ(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        transition: none;
        will-change: auto;
        opacity: 1 !important;
        transform: none !important;
    }
    
    .animate-in,
    .animate-in * {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}