/* Native image buttons keep a fixed transparent stage while the car moves inside it. */
.car-drive-button { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1; padding: 0; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; overflow: hidden; overflow: clip; -webkit-tap-highlight-color: transparent; }
.car-drive-button:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
.car-drive-button:disabled { opacity: 1; cursor: default; }
.car-traveler { display: block; width: 100%; height: 100%; pointer-events: none; transform: translate(0, 0); }
.car-scene { display: block; width: 100%; height: 100%; overflow: visible; }
.car-wheel-spin { transform-box: view-box; transform-origin: 0px 0px; }
.car-drive-button.is-driving .car-traveler { animation: car-drive-round-trip 1650ms both; }
.car-drive-button.is-driving .car-wheel-spin { animation: car-wheel-round-trip 1650ms both; }
@keyframes car-drive-round-trip {
  0% { transform: translate(0, 0); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .75, .45); }
  38% { transform: translate(-115%, 8%); opacity: 1; }
  38.1% { transform: translate(-115%, 8%); opacity: 0; }
  39.9% { transform: translate(115%, -8%); opacity: 0; }
  40% { transform: translate(115%, -8%); opacity: 1; animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
  100% { transform: translate(0, 0); opacity: 1; }
}
@keyframes car-wheel-round-trip {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.5, 0, .75, .45); }
  38%, 40% { transform: rotate(-720deg); animation-timing-function: cubic-bezier(.2, .6, .35, 1); }
  100% { transform: rotate(-1440deg); }
}
@media (prefers-reduced-motion: reduce) {
  .car-drive-button.is-driving .car-traveler, .car-drive-button.is-driving .car-wheel-spin { animation: none; }
}