.roadway{position:relative;margin:50px 0 0;background:var(--cream);border:4px solid var(--red);border-radius:22px;overflow:hidden;height:clamp(170px,26vw,330px);box-shadow:inset 0 0 0 4px var(--cream),inset 0 0 0 7px var(--ink)}
.roadway .road{position:absolute;left:0;right:0;bottom:16%;height:5px;background:var(--ink)}
.roadway .road::after{content:"";position:absolute;left:0;right:0;top:12px;height:3px;background:repeating-linear-gradient(90deg,var(--red) 0 34px,transparent 34px 60px)}
.truck{position:absolute;left:50%;bottom:calc(16% - 3px);width:min(560px,82%);margin-left:calc(min(560px,82%) / -2)}
.truck .truck-svg{display:block;width:100%;height:auto;overflow:visible;margin-bottom:-3.6%}
.wheel{transform-box:fill-box;transform-origin:50% 50%}
.speed{position:absolute;right:92%;top:28%;width:60%;height:50%;opacity:0;pointer-events:none}
.speed i{position:absolute;right:0;height:4px;border-radius:3px;background:var(--red)}
.speed i:nth-child(1){top:5%;width:70%}.speed i:nth-child(2){top:30%;width:100%}.speed i:nth-child(3){top:55%;width:55%}.speed i:nth-child(4){top:82%;width:85%}
.dust{position:absolute;bottom:2%;width:13%;aspect-ratio:1;border-radius:50%;background:#d8c9a8;opacity:0;pointer-events:none}
.dust.d1{left:4%}.dust.d2{left:14%;width:9%}.dust.d3{left:54%;width:10%}
.vroom{position:absolute;left:5%;top:8%;font:400 clamp(30px,6vw,78px)/1 Anton,Impact,sans-serif;color:var(--red);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink);transform:rotate(-6deg);opacity:0;letter-spacing:1px;pointer-events:none}
.js .roadway:not(.go) .truck{transform:translateX(-140vw)}
.roadway.go .truck{animation:driveIn 1.25s cubic-bezier(.12,.75,.25,1) both}
.roadway.go .truck-body{animation:bounce .7s ease-out 1.05s both;transform-box:fill-box;transform-origin:50% 100%}
.roadway.go .wheel{animation:spin .18s linear 0s 7}
.roadway.go .speed{animation:speed 1.25s ease-out both}
.roadway.go .dust{animation:puff .9s ease-out 1.05s both}.roadway.go .dust.d2{animation-delay:1.12s}.roadway.go .dust.d3{animation-delay:1.08s}
.roadway.go .vroom{animation:vroom 1.9s ease-out .15s both}
@keyframes driveIn{0%{transform:translateX(-140vw)}100%{transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bounce{0%{transform:none}20%{transform:translateY(-3%) rotate(-1.6deg)}45%{transform:translateY(1%) rotate(.8deg)}70%{transform:translateY(-.6%) rotate(-.3deg)}100%{transform:none}}
@keyframes speed{0%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes puff{0%{opacity:.9;transform:scale(.3) translateY(0)}100%{opacity:0;transform:scale(2.2) translate(-30%,-30%)}}
@keyframes vroom{0%{opacity:0;transform:rotate(-6deg) scale(.6)}15%{opacity:1;transform:rotate(-6deg) scale(1.08)}60%{opacity:1;transform:rotate(-6deg) scale(1)}100%{opacity:0;transform:rotate(-6deg) translateX(30px) scale(1)}}
@media (prefers-reduced-motion:reduce){.roadway.go .truck,.roadway.go .truck-body,.roadway.go .wheel,.roadway.go .speed,.roadway.go .dust,.roadway.go .vroom{animation:none}}