/* Animations */
.animated {
    opacity: 0;
    transition: all 0.8s ease-out;
}

.slide.active .animated {
    opacity: 1;
}

/* Specific Animations (applied when parent .slide has .active) */
.slide.active .fadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
}

.slide.active .fadeInDown {
    animation: fadeInDown 0.8s ease-out forwards;
}

.slide.active .zoomIn {
    animation: zoomIn 0.8s ease-out forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}