/* Motion for the speeding cartoon. Everything stops for visitors who ask for reduced motion. */
.toon .mk{font-family:'Permanent Marker','Comic Sans MS',cursive}
.toon .tw{font-family:'Special Elite','Courier New',monospace}
.toon .sg{font-family:Arial,Helvetica,sans-serif;font-weight:700}
.toon .wheel{transform-box:fill-box;transform-origin:center;animation:toon-spin .45s linear infinite}
.toon .bob{animation:toon-bob .22s ease-in-out infinite alternate}
.toon .tie{transform-box:fill-box;transform-origin:left center;animation:toon-flap .3s ease-in-out infinite alternate}
.toon .tk{transform-box:fill-box;transform-origin:center;animation:toon-flut 1.1s ease-in-out infinite alternate}
.toon .rd{animation:toon-road .35s linear infinite}
.toon .zip{animation:toon-zip .5s ease-in-out infinite alternate}
.toon .puff{transform-box:fill-box;transform-origin:center;animation:toon-puff .6s ease-in-out infinite alternate}
.toon .drive{animation:toon-drive 1.3s cubic-bezier(.16,.84,.3,1) both}
@keyframes toon-spin{to{transform:rotate(360deg)}}
@keyframes toon-bob{to{transform:translateY(-2.5px)}}
@keyframes toon-flap{from{transform:rotate(-6deg)}to{transform:rotate(5deg)}}
@keyframes toon-flut{from{transform:translate(-4px,-3px) rotate(-3deg)}to{transform:translate(6px,4px) rotate(4deg)}}
@keyframes toon-road{to{stroke-dashoffset:64}}
@keyframes toon-zip{from{transform:translateX(8px);opacity:.9}to{transform:translateX(-10px);opacity:.35}}
@keyframes toon-puff{from{transform:scale(.85)}to{transform:scale(1.12)}}
@keyframes toon-drive{from{transform:translateX(860px)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){
  .toon .wheel,.toon .bob,.toon .tie,.toon .tk,.toon .rd,.toon .zip,.toon .puff,.toon .drive{animation:none}
}