body.is-ready .hero-copy {
    animation: heroFade 1s ease-out forwards;
}

body.is-ready .home-info-img {
    animation: logoSlide 1.5s ease-out forwards;
}

@keyframes heroFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes logoSlide {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.container-info .car-img {
    opacity: 0;
    transform: translateX(-100vw);
}

.container-info .home-info {
    opacity: 0;
    transform: translateY(15px);
}

.container-servicios .car-img {
    opacity: 0;
    transform: translateX(100vw);
}

.container-servicios .servicio-info {
    opacity: 0;
    transform: translateY(15px);
}

.play-info .car-img {
    animation: carLeftToRight_6s 2s ease-out forwards;
}

.play-info .home-info {
    animation: textRiseFade_4s 4s ease-out forwards;
}

.play-servicios .car-img {
    animation: carRightToLeft_6s 2s ease-out forwards;
}

.play-servicios .servicio-info {
    animation: textRiseFade_4s 4s ease-out forwards;
}

.container-info.played .car-img,
.container-info.played .home-info,
.container-servicios.played .car-img,
.container-servicios.played .servicio-info {
    opacity: 1;
    transform: none;
}

@keyframes carLeftToRight_6s {
    0% {
        opacity: 0;
        transform: translateX(-100vw);
    }

    62.5% {
        opacity: 1;
        transform: translateX(-10%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }

}

@keyframes carRightToLeft_6s {
    0% {
        opacity: 0;
        transform: translateX(100vw);
    }

    62.5% {
        opacity: 1;
        transform: translateX(10%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes textRiseFade_4s {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    .hero-copy,
    .home-info-img,
    .container-info .car-img,
    .container-info .home-info,
    .container-servicios .car-img,
    .container-servicios .servicio-info {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}