/* --- CONFIGURAÇÃO BASE DAS ANIMAÇÕES --- */
.animate-on-scroll {
    opacity: 0;
    transition: all 3s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
    -webkit-transition: all 3s cubic-bezier(0.25, 1, 0.5, 1);
    -moz-transition: all 3s cubic-bezier(0.25, 1, 0.5, 1);
    -ms-transition: all 3s cubic-bezier(0.25, 1, 0.5, 1);
    -o-transition: all 3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- ESTADOS DE ANIMAÇÃO (O QUE ESTÁ ESCONDIDO) --- */

/* Deslizar da Esquerda */
.slide-left {
    transform: translateX(-100px);
}

/* Deslizar de Baixo para Cima */
.slide-up {
    transform: translateY(100px);
}

/* Deslizar da Direita */
.slide-right {
    transform: translateX(100px);
}

/* Deslizar de Cima para Baixo */
.slide-down {
    transform: translateY(-100px);
}
/* --- CLASSE QUE DISPARA A ANIMAÇÃO --- */
.animate-on-scroll.show {
    opacity: 1;
    transform: translateX(0) translateY(0);
}