/* ============================= */
/* SM RACING - GLOBAL WHITE LINES */
/* ============================= */

/*
   Estas líneas son globales:
   - Una sola vez en todo el HTML.
   - Fijas en pantalla.
   - Alineadas con la zona del logo.
*/

.global-racing-lines {
    position: fixed;
    top: 0;
    left: 0;

    width: 50%;
    height: 100%;

    pointer-events: none;
    z-index: 1;

    overflow: hidden;
}


.global-racing-lines .global-line {
    position: absolute;
    top: 0;

    width: 120px;
    height: 40%;

    background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.9) 10%,
            rgba(255, 255, 255, 0.6) 40%,
            rgba(255, 255, 255, 0.2) 70%,
            rgba(255, 255, 255, 0) 100%
    );

    transform: skewX(-25deg);
    transform-origin: top center;

    opacity: 0.65;
}

/* Posiciones desktop copiadas de tu sistema anterior */
.global-line-1 {
    left: 14%;
}

.global-line-2 {
    left: 24%;
}

/* ============================= */
/* TABLET */
/* ============================= */

@media (max-width: 1024px) {
    .global-racing-lines {
        width: 50vw;
    }

    .global-racing-lines .global-line {
        width: 95px;
        height: 35%;
    }

    .global-line-1 {
        left: 11%;
    }

    .global-line-2 {
        left: 21%;
    }
}

/* ============================= */
/* MOBILE */
/* ============================= */

@media (max-width: 768px) {
    .global-racing-lines {
        width: 230px;
    }

    .global-racing-lines .global-line {
        width: 85px;
        height: 35%;
    }

    .global-line-1 {
        left: 18%;
    }

    .global-line-2 {
        left: 45%;
    }
}

/* ============================= */
/* MOBILE SMALL */
/* ============================= */

@media (max-width: 480px) {
    .global-racing-lines {
        width: 190px;
    }

    .global-racing-lines .global-line {
        width: 75px;
    }

    .global-line-1 {
        left: 18%;
    }

    .global-line-2 {
        left: 48%;
    }
}

/* ============================= */
/* MOBILE VERY SMALL */
/* ============================= */

@media (max-width: 360px) {
    .global-racing-lines {
        width: 170px;
    }

    .global-racing-lines .global-line {
        width: 68px;
    }

    .global-line-1 {
        left: 18%;
    }

    .global-line-2 {
        left: 48%;
    }
}