/* Advanced Scroll Animations CSS */

/* Base animation class */
.animated {
    animation-fill-mode: both;
    animation-duration: 800ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide elements before animation */
.animate-on-scroll {
    opacity: 0;
    will-change: transform, opacity;
}

/* Fade animations */
@keyframes fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fade-down {
    from {
        opacity: 0;
        transform: translate3d(0, -40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fade-left {
    from {
        opacity: 0;
        transform: translate3d(-40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fade-right {
    from {
        opacity: 0;
        transform: translate3d(40px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Zoom animations */
@keyframes zoom-in {
    from {
        opacity: 0;
        transform: scale3d(0.8, 0.8, 0.8);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes zoom-out {
    from {
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1.2);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* Flip animations */
@keyframes flip-up {
    from {
        opacity: 0;
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
    }
}

@keyframes flip-down {
    from {
        opacity: 0;
        transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
    }
}

@keyframes flip-left {
    from {
        opacity: 0;
        transform: perspective(400px) rotate3d(0, 1, 0, -90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
    }
}

@keyframes flip-right {
    from {
        opacity: 0;
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotate3d(0, 1, 0, 0deg);
    }
}

/* Slide animations */
@keyframes slide-up {
    from {
        transform: translate3d(0, 100%, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-down {
    from {
        transform: translate3d(0, -100%, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-left {
    from {
        transform: translate3d(-100%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slide-right {
    from {
        transform: translate3d(100%, 0, 0);
    }
    to {
        transform: translate3d(0, 0, 0);
    }
}

/* Apply animations */
.fade-up {
    animation-name: fade-up;
}

.fade-down {
    animation-name: fade-down;
}

.fade-left {
    animation-name: fade-left;
}

.fade-right {
    animation-name: fade-right;
}

.zoom-in {
    animation-name: zoom-in;
}

.zoom-out {
    animation-name: zoom-out;
}

.flip-up {
    animation-name: flip-up;
    backface-visibility: hidden;
}

.flip-down {
    animation-name: flip-down;
    backface-visibility: hidden;
}

.flip-left {
    animation-name: flip-left;
    backface-visibility: hidden;
}

.flip-right {
    animation-name: flip-right;
    backface-visibility: hidden;
}

.slide-up {
    animation-name: slide-up;
}

.slide-down {
    animation-name: slide-down;
}

.slide-left {
    animation-name: slide-left;
}

.slide-right {
    animation-name: slide-right;
}

/* Animation delays */
.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

.delay-400 {
    animation-delay: 400ms;
}

.delay-500 {
    animation-delay: 500ms;
}

.delay-600 {
    animation-delay: 600ms;
}

.delay-700 {
    animation-delay: 700ms;
}

.delay-800 {
    animation-delay: 800ms;
}

.delay-900 {
    animation-delay: 900ms;
}

.delay-1000 {
    animation-delay: 1000ms;
}

/* Animation durations */
.duration-300 {
    animation-duration: 300ms;
}

.duration-500 {
    animation-duration: 500ms;
}

.duration-700 {
    animation-duration: 700ms;
}

.duration-1000 {
    animation-duration: 1000ms;
}

.duration-1500 {
    animation-duration: 1500ms;
}

.duration-2000 {
    animation-duration: 2000ms;
}