.driving-animation {
    height: 100%;
    width: 100%;
    position: relative;
}

/* ===== Animations ===== */

.road {
    animation: road-anim 20s infinite cubic-bezier(0.3, 0, 0.7, 1);
}

.car {
    animation: car-anim 20s infinite cubic-bezier(0.3, 0, 0.7, 1);
}

.tail-light {
    animation: blink 0.5s infinite alternate;
}

@keyframes blink {
    100% {
        fill: rgb(100, 24, 24);
    }
}

@keyframes road-anim {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 80;
    }
}

@keyframes car-anim {
    50% {
        transform: translate(40%, -4px);
    }
}

/* ===== Wheels ===== */

.wheel {
    animation: rot-wheel 1.5s infinite linear;
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes rot-wheel {
    100% {
        transform: rotateZ(360deg);
    }
}

/* ===== Sign Zone 1 DJING ZONE ===== */

.sign-zone1 {
    position: absolute;
    bottom: 40vh;
    left: 100%;
    background: orange;
    height: auto;
    padding: 10px;
    width: 15vh;
    align-content: center;
    text-align: center;
    border-radius: 5px;
    font-size: clamp(10px, 1vw, 30px);
    box-sizing: border-box;
    border: 2px solid black;
    animation: sign 50s 25s infinite linear;
}

@keyframes sign {
    0% {
        left: 101%;
    }
    100% {
        left: -100%;
    }
}


/* dj zone leg */
.sign-zone1::after,
.sign-zone1::before {
    content: "";
    position: absolute;
    top: 100%;
    height: 15vh;
    width: 5px;
    background: linear-gradient(
        to bottom,
        #9a9a9a 0%,
        #545454 40%,
        #3a3a3a 80%,
        #8e8e8e 100%
    );
}

.sign-zone1::after {
    left: 20%;
}

.sign-zone1::before {
    right: 20%;
}

/* ===== Sign Zone 2 the </> sign ===== */

.sign-zone2 {
    position: absolute;
    bottom: 40vh;
    left: 100%;
    background: orange;
    padding: 10px;
    width: 10vh;
    height: 10vh;
    z-index: 3;
    align-content: center;
    text-align: center;
    border-radius: 50%;
    font-size: clamp(20px, 2vw, 50px);
    box-sizing: border-box;
    border: 2px solid black;
    animation: sign 50s 35s infinite linear;
}

.sign-zone2::before {
    content: "";
    position: absolute;
    top: 99%;
    left: 49%;
    height: 15vh;
    width: 5px;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        #9a9a9a 0%,
        #545454 40%,
        #3a3a3a 80%,
        #8e8e8e 100%
    );
}

.sign-zone2::after {
    content: "";
    position: absolute;
    top: 23vh;
    left: 24%;
    background: rgb(45, 45, 45);
    height: 25px;
    width: 50px;
    border-radius: 50%;
    z-index: 2;
}

/* ===== Sand 1 for DJING ZONE===== */

.sand1 {
    position: absolute;
    top: 25vh;
    left: -5%;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.4) 0%,
        rgba(0, 0, 0, 0.15) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    height: 30;
    width: 90%;
    border-radius: 40%;
    z-index: 2;
    transform: rotateZ(10deg)
}

.sand2 {
    position: absolute;
    top: 18vh;
    left: 10%;
    border-radius: 40%;
    z-index: 0;
}

.sand2::before {
    content: "";
    position: absolute;
    top: 9%;
    left: 10%;
}

/* ===== Ahead Sign ===== */

.sign-ahead {
    position: absolute;
    bottom: 35vh;
    left: 100%;
    background: rgb(225, 225, 225);
    height: fit-content;
    padding: 20px 5px;
    width: fit-content;
    align-content: center;
    text-align: center;
    border-radius: 5px;
    font-size: clamp(10px, 1vw, 20px);
    box-sizing: border-box;
    font-weight: bold;
    border: 2px solid black;
    animation: sign 50s infinite linear;
}

.sign-ahead::before {
    content: "";
    position: absolute;
    top: 100%;
    right: 49%;
    height: 15vh;
    width: 5px;
    background: linear-gradient(
        to bottom,
        #9a9a9a 0%,
        #545454 40%,
        #3a3a3a 80%,
        #8e8e8e 100%
    );
}

.sign-ahead-sand {
    position: absolute;
    top: 20vh;
    left: -20%;
}