section .traffic{
position:absolute; left:0; top:0; width:100%; height:100%;
overflow:visible; pointer-events:none;
}
@media (prefers-reduced-motion: reduce){ section .traffic{ display:none } }
section .traffic .shades{ opacity:calc(.30 * (1 - var(--night, 0)));
transition:opacity 1s linear }
@media (prefers-reduced-motion: reduce){ section .traffic .shades{ transition:none } }
section .traffic .beams{
opacity:var(--night, 0);
transition:opacity 1s linear;
}
@media (prefers-reduced-motion: reduce){ section .traffic .beams{ transition:none } }
section .traffic .shades{ fill:#000 }
section .traffic .cars{ transition:filter 1s linear }
:root[data-mode="night"] section .traffic .cars,
:root[data-theme="dark"]:not([data-mode="day"]) section .traffic .cars{
filter:brightness(.10) saturate(.20);
}
@media (prefers-color-scheme: dark){
:root:not([data-mode="day"]):not([data-theme="light"]) section .traffic .cars{
filter:brightness(.10) saturate(.20);
}
}
@media (prefers-reduced-motion: reduce){ section .traffic .cars{ transition:none } }
section .traffic{ -webkit-touch-callout:none; -webkit-user-select:none; user-select:none }