:root {
    --animation-duration: 0.6s;
}

/* Base animation class */
.animated {
    animation-duration: var(--animation-duration);
    animation-fill-mode: both;
}

/* Zoom In animation */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% {
        opacity: 1;
    }
}

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

/* Fade Up animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade-up {
    animation-name: fadeInUp;
}

/* Initial state - hide elements before animation */
[data-aos] {
    opacity: 0;
    transition: opacity 0.3s;
}

/* Animated state */
[data-aos].animated {
    opacity: 1;
}