.hero-bg {
    background-position: center;
    background-size: cover;
    filter: saturate(0.72) contrast(1.08);
    opacity: 0;
    transform: scale(1.03);
    animation-duration: 24s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.hero-bg--bearings {
    background-image: url('../images/hero-rodamientos.jpg');
    background-position: center 48%;
    animation-name: hero-bearings-cycle;
}

.hero-bg--seals {
    background-image: url('../images/hero-retenes.jpg');
    animation-name: hero-seals-cycle;
}

.hero-bg--mechanic {
    background-image: url('../images/hero-mecanica.jpg');
    background-position: center 58%;
    animation-name: hero-mechanic-cycle;
}

.hero-shade {
    background:
        linear-gradient(90deg, rgb(2 6 23 / 88%) 0%, rgb(15 23 42 / 72%) 52%, rgb(30 58 138 / 48%) 100%),
        linear-gradient(0deg, rgb(15 23 42 / 38%), rgb(15 23 42 / 12%));
}

@keyframes hero-bearings-cycle {
    0%,
    29% {
        opacity: 0.34;
    }

    34%,
    100% {
        opacity: 0;
    }
}

@keyframes hero-seals-cycle {
    0%,
    29% {
        opacity: 0;
    }

    34%,
    62% {
        opacity: 0.34;
    }

    67%,
    100% {
        opacity: 0;
    }
}

@keyframes hero-mechanic-cycle {
    0%,
    62% {
        opacity: 0;
    }

    67%,
    95% {
        opacity: 0.34;
    }

    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-bg {
        animation: none;
        opacity: 0;
    }

    .hero-bg--bearings {
        opacity: 0.34;
    }
}