body{
    margin:0;
    overflow-x:hidden;
}

/* MAIN SCENE */

.scene{
    position:relative;
    width:100%;
    height:650px;
    overflow:hidden;
    background:linear-gradient(to top,#06131f,#102d46,#3f87c5);
}

/* SUN */

.sun{
    position:absolute;
    top:60px;
    right:100px;

    width:90px;
    height:90px;

    border-radius:50%;

    background:#ffd93d;

    box-shadow:0 0 60px #ffd93d;
}

/* CLOUD SERVER */

.cloud-server{
    position:absolute;
    top:30px;
    left:50%;

    transform:translateX(-50%);

    padding:18px 40px;

    background:rgba(255,255,255,0.12);

    border:2px solid cyan;

    border-radius:60px;

    color:white;

    font-size:22px;
    font-weight:bold;

    backdrop-filter:blur(6px);

    box-shadow:0 0 25px cyan;

    animation:pulseCloud 2s infinite;
}

/* DRONE */

.drone{
    position:absolute;

    width:60px;
    height:20px;

    background:#ddd;

    border-radius:20px;

    top:160px;
    left:-100px;

    box-shadow:0 0 15px cyan;

    animation:flyDrone 18s linear infinite;
}

.drone::before,
.drone::after{
    content:'';

    position:absolute;

    width:25px;
    height:3px;

    background:white;

    top:-6px;
}

.drone::before{
    left:-10px;
}

.drone::after{
    right:-10px;
}

/* ROAD */

.road{
    position:absolute;
    bottom:0;

    width:200%;
    height:160px;

    background:
        repeating-linear-gradient(
            to right,
            #222 0px,
            #222 120px,
            #333 120px,
            #333 240px
        );

    animation:moveRoad 4s linear infinite;
}

.road::before{
    content:'';

    position:absolute;

    top:72px;

    width:100%;
    height:8px;

    background:
        repeating-linear-gradient(
            to right,
            white 0px,
            white 60px,
            transparent 60px,
            transparent 120px
        );
}

/* RSU */

.rsu{
    position:absolute;

    width:18px;
    height:140px;

    background:#666;

    bottom:160px;
}

.rsu1{
    left:25%;
}

.rsu2{
    right:25%;
}

.rsu::before{
    content:'';

    position:absolute;

    top:-25px;
    left:-16px;

    width:50px;
    height:50px;

    border:3px solid cyan;

    border-radius:50%;

    animation:pulse 2s infinite;
}

/* CARS */

.car{
    position:absolute;

    width:180px;

    bottom:70px;
}

/* CAR 1 */

.car1{
    left:-250px;

    animation:
        moveCar1 12s linear infinite,
        bounce 0.6s infinite alternate;
}

/* CAR 2 */

.car2{
    left:-500px;

    animation:
        moveCar2 18s linear infinite,
        bounce 0.8s infinite alternate;
}

/* ATTACKER */

.attacker{
    left:-700px;

    filter:drop-shadow(0 0 18px red);

    animation:
        moveAttacker 14s linear infinite,
        dangerBlink 0.4s infinite;
}

/* AMBULANCE */

.ambulance{
    left:-1000px;

    animation:
        moveAmbulance 10s linear infinite,
        bounce 0.4s infinite alternate;
}

/* SIGNALS */

.signal{
    position:absolute;

    height:3px;

    background:
        repeating-linear-gradient(
            to right,
            cyan 0px,
            cyan 10px,
            transparent 10px,
            transparent 20px
        );

    animation:dataFlow 1s linear infinite;
}

.signal1{
    width:180px;

    left:26%;
    bottom:300px;
}

.signal2{
    width:180px;

    right:26%;
    bottom:300px;
}

/* SHIELDS */

.shield{
    position:absolute;

    width:130px;
    height:130px;

    border:3px solid lime;

    border-radius:50%;

    box-shadow:0 0 25px lime;

    animation:shieldPulse 1.5s infinite;
}

.shield1{
    left:120px;
    bottom:45px;
}

.shield2{
    left:480px;
    bottom:45px;
}

/* TRAFFIC LIGHT */

.traffic-light{
    position:absolute;

    right:60px;
    bottom:160px;

    width:45px;
    height:130px;

    background:#222;

    border-radius:12px;

    padding:10px;
}

.traffic-light span{
    display:block;

    width:24px;
    height:24px;

    border-radius:50%;

    margin:10px auto;
}

.red{
    background:red;
}

.yellow{
    background:yellow;
}

.green{
    background:lime;

    box-shadow:0 0 20px lime;
}

/* ANIMATIONS */

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

    to{
        transform:translateX(-50%);
    }
}

@keyframes moveCar1{
    from{
        left:-250px;
    }

    to{
        left:110%;
    }
}

@keyframes moveCar2{
    from{
        left:-500px;
    }

    to{
        left:110%;
    }
}

@keyframes moveAttacker{
    from{
        left:-700px;
    }

    to{
        left:110%;
    }
}

@keyframes moveAmbulance{
    from{
        left:-1000px;
    }

    to{
        left:110%;
    }
}

@keyframes bounce{
    from{
        transform:translateY(0px);
    }

    to{
        transform:translateY(-4px);
    }
}

@keyframes pulse{
    0%{
        transform:scale(0.7);
        opacity:1;
    }

    100%{
        transform:scale(1.5);
        opacity:0;
    }
}

@keyframes shieldPulse{
    0%{
        transform:scale(0.9);
        opacity:0.8;
    }

    100%{
        transform:scale(1.1);
        opacity:0.1;
    }
}

@keyframes dataFlow{
    from{
        background-position:0px;
    }

    to{
        background-position:40px;
    }
}

@keyframes dangerBlink{
    from{
        opacity:1;
    }

    to{
        opacity:0.5;
    }
}

@keyframes pulseCloud{
    0%{
        box-shadow:0 0 10px cyan;
    }

    50%{
        box-shadow:0 0 35px cyan;
    }

    100%{
        box-shadow:0 0 10px cyan;
    }
}

@keyframes flyDrone{
    from{
        left:-100px;
    }

    to{
        left:110%;
    }
}