/* Classe base para todos os elementos que serão animados */
/* Eles começam com opacidade 0 e o preenchimento da animação garante que mantenham o estado final */
.animated-entry-element {
    opacity: 0;
    animation-fill-mode: forwards; /* Mantém o estado final da animação */
    animation-duration: 0.8s;     /* Duração padrão da animação */
    animation-timing-function: ease-out; /* Curva de aceleração padrão */
}


/* ----------------------------------------------------------------------
Inicio da animação
*/
.efeitos-transicao {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    opacity: 0; /* Oculto por padrão */
    transition: opacity 0.3s ease;
}

/* Animações ativadas */
.slide-right-to-left.active {
    animation: slideInRightToLeft 0.8s ease-out forwards;
}

.slide-left-to-right.active {
    animation: slideInLeftToRight 0.8s ease-out forwards;
}

/* Keyframes */
@keyframes slideInRightToLeft {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeftToRight {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ----------------------------------------------------------------------
Fim da animação
*/
/* --- Keyframes para cada efeito de entrada --- */

/* Efeito: Aparecer (Fade In) */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Efeito: Deslizar da Esquerda */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-80px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Efeito: Deslizar da Direita */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(80px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Efeito: Deslizar de Baixo */
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Efeito: Aumentar (Zoom In) */
@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Efeito: Virar no Eixo X (Flip In X) */
@keyframes flipInX {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0deg);
    }
}

/* --- Classes que aplicam as animações aos elementos --- */
/* Estas classes serão adicionadas dinamicamente pelo JavaScript */
.effect-fadeIn { animation-name: fadeIn; }
.effect-slideInLeft { animation-name: slideInLeft; }
.effect-slideInRight { animation-name: slideInRight; }
.effect-slideInUp { animation-name: slideInUp; }
.effect-zoomIn { animation-name: zoomIn; }
.effect-flipInX { animation-name: flipInX; }