/* Traffic Car Animation */
.traffic-car {
    width: 30px;
    height: 50px;
    position: absolute;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    z-index: 1;
    pointer-events: none;
}

.traffic-car::before { /* Windshield */
    content: '';
    position: absolute;
    top: 35px; /* Front is facing up? If moving up, front is top. */
    left: 3px;
    right: 3px;
    height: 8px;
    background: #111;
    border-radius: 2px;
}

/* If car moves UP, top is front. So windshield at top. */
/* Let's adjust: */
.traffic-car.moving-up::before {
    top: 5px; /* Front windshield */
}
.traffic-car.moving-up::after {
    bottom: 5px; /* Rear window */
    content: '';
    position: absolute;
    left: 3px;
    right: 3px;
    height: 8px;
    background: #111;
    border-radius: 2px;
}

/* Lights */
.traffic-car-light {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 2px;
}
.light-fl { top: 2px; left: 2px; background: #ffe; box-shadow: 0 0 5px #ffe; }
.light-fr { top: 2px; right: 2px; background: #ffe; box-shadow: 0 0 5px #ffe; }
.light-rl { bottom: 2px; left: 2px; background: #f00; }
.light-rr { bottom: 2px; right: 2px; background: #f00; }