/* Content/animations.css */

/* Base Animation Setup */
.animate-on-load {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-delay: 0.1s;
}

/* Fade In */
.fadeIn {
    animation-name: fadeIn;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Fade Left */
.fadeLeft {
    animation-name: fadeLeft;
}
@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade Right */
.fadeRight {
    animation-name: fadeRight;
}
@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Zoom In */
.zoomIn {
    animation-name: zoomIn;
}
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Zoom Out */
.zoomOut {
    animation-name: zoomOut;
}
@keyframes zoomOut {
    from {
        opacity: 0;
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}