/* ESTRELLITA VIDA - ANIMACIONES DE ENTRADA */

.reveal {
    opacity: 0;
    transition:
        opacity 2.8s ease,
        transform 2.8s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
}

.reveal-left {
    transform: translateX(-70px);
}

.reveal-right {
    transform: translateX(70px);
}

.reveal-top {
    transform: translateY(-60px);
}

.reveal-bottom {
    transform: translateY(60px);
}

.reveal-zoom {
    transform: scale(.92);
}

.reveal.active {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.delay-1 {
    transition-delay: .10s;
}

.delay-2 {
    transition-delay: .20s;
}

.delay-3 {
    transition-delay: .30s;
}

.delay-4 {
    transition-delay: .40s;
}

.delay-5 {
    transition-delay: .50s;
}

@media (max-width: 820px) {
    .reveal-left {
        transform: translateX(-35px);
    }

    .reveal-right {
        transform: translateX(35px);
    }

    .reveal-top {
        transform: translateY(-35px);
    }

    .reveal-bottom {
        transform: translateY(35px);
    }
}

@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-top,
    .reveal-bottom,
    .reveal-zoom {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}