/* =========================================
   ANIMAÇÕES BASE
========================================= */

.fade-up,
.fade-left,
.fade-right,
.zoom-in{

    opacity: 0;

    transition:
    opacity 0.8s ease,
    transform 0.8s ease;

}

/* =========================================
   POSIÇÕES INICIAIS
========================================= */

.fade-up{

    transform: translateY(40px);

}

.fade-left{

    transform: translateX(-60px);

}

.fade-right{

    transform: translateX(60px);

}

.zoom-in{

    transform: scale(0.85);

}

/* =========================================
   QUANDO APARECER
========================================= */

.fade-up.show,
.fade-left.show,
.fade-right.show,
.zoom-in.show{

    opacity: 1;

    transform: translateY(0)
               translateX(0)
               scale(1);

}

/* =========================================
   DELAYS
========================================= */

.delay-1{

    transition-delay: 0.2s;

}

.delay-2{

    transition-delay: 0.4s;

}

.delay-3{

    transition-delay: 0.6s;

}

/* =========================================
   PERFORMANCE
========================================= */

.fade-up,
.fade-left,
.fade-right,
.zoom-in{

    will-change: transform, opacity;

}

/* =========================================
   DELAYS MAIORES PARA A TELA INICIAL
========================================= */

.delay-hero-1 {
    transition-delay: 0.6s;
}

.delay-hero-2 {
    transition-delay: 0.9s;
}

.delay-hero-3 {
    transition-delay: 1.2s;
}