/* Estado inicial: escondido */
.animate-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

/* Quando a animação é ativada */
.animate-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* SLIDE LEFT */
@keyframes slide-left {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.slide-left { animation: slide-left 0.9s ease-out forwards; }

/* SLIDE RIGHT */
@keyframes slide-right {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.slide-right { animation: slide-right 0.9s ease-out forwards; }

/* SLIDE UP */
@keyframes slide-up {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
.slide-up { animation: slide-up 0.9s ease-out forwards; }

/* SLIDE DOWN */
@keyframes slide-down {
    from { opacity: 0; transform: translateY(-40px); }
    to   { opacity: 1; transform: translateY(0); }
}
.slide-down { animation: slide-down 0.9s ease-out forwards; }

/* FADE IN */
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.fade-in { animation: fade-in 1s ease-out forwards; }

/* FADE OUT */
@keyframes fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
.fade-out { animation: fade-out 1s ease-out forwards; }

/* ZOOM IN */
@keyframes zoom-in {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
}
.zoom-in { animation: zoom-in 0.9s ease-out forwards; }

/* ZOOM OUT */
@keyframes zoom-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.7); }
}
.zoom-out { animation: zoom-out 0.9s ease-out forwards; }