/* =========================================
   ANIMACION DEL CAMION
========================================= */

.logo-cuerpo,
.ruedas-contenedor{
    animation:camionMovimiento 10s linear infinite;
}

.logo-carretera{
    animation:none;
}

@keyframes camionMovimiento{
    0%{
        transform:translateX(-180%);
    }

    8%{
        transform:translateX(-180%);
    }

    22%{
        transform:translateX(0);
    }

    58%{
        transform:translateX(0);
    }

    82%{
        transform:translateX(calc(100vw + 500px));
    }

    100%{
        transform:translateX(calc(100vw + 500px));
    }
}

/* =========================================
   ROTACION DE LAS RUEDAS
========================================= */

.rueda{
    animation:giroRuedas 10s linear infinite;
}

@keyframes giroRuedas{
    0%,
    8%{
        transform:rotate(0deg);
    }

    22%,
    58%{
        transform:rotate(900deg);
    }

    82%,
    100%{
        transform:rotate(1980deg);
    }
}

/* =========================================
   ANIMACION BARRA SUPERIOR
========================================= */

@keyframes barraInfinita{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(calc(var(--barra-width) * -1));
    }
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}