@charset "UTF-8";
.road{--w:44px;position:fixed;right:14px;top:18vh;bottom:14vh;width:var(--w);z-index:4;pointer-events:none;opacity:0;animation:road-in 1.6s ease 1.6s forwards}
.road__canvas{position:absolute;inset:0;width:100%;height:100%}
.road__car{position:absolute;left:0;top:0;width:4px;height:10px;margin:-5px 0 0 -2px;border-radius:2px;background:rgba(51,51,51,.62);transform:translate(calc(var(--w)/2),0);will-change:transform}
.road__car::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:34px;margin-left:-9px;background:linear-gradient(to bottom,rgba(51,51,51,.17),rgba(51,51,51,0));clip-path:polygon(32% 0,68% 0,100% 100%,0 100%);transform-origin:50% 0;transform:scaleY(var(--dir,1));transition:transform .5s ease}
.road__sign{position:absolute;left:calc(var(--w)/2 - 44px);top:-34px;width:30px;height:auto;opacity:.75;transition:opacity .8s ease}
.road.is-away .road__sign{opacity:0}
@keyframes road-in{to{opacity:1}}
@media(max-width:1024px){.road{right:0}}
@media(max-width:700px){.road{--w:15px;right:9px;top:20vh;bottom:10vh}.road__sign{display:none}}
@media(prefers-reduced-motion:reduce){.road{animation:none;opacity:1}.road__car::after,.road__sign{transition:none}}
@media print{.road{display:none}}