/* Crop the actual tyres from the camper asset. Each circular disc rotates before
   its parent projects it into the original photographed wheel's ellipse. */
.camper-vehicle { animation: none; }
.camper-body { animation-duration: 5.2s; }
.rolling-wheel {
  position: absolute;
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) scaleX(var(--wheel-perspective));
}
.rolling-wheel-rear {
  left: 21.6796875%;
  top: 69.23828125%;
  width: 10.9375%;
  --wheel-perspective: .797619;
  --wheel-size: 1146.268657% 609.52381%;
  --wheel-position: 18.972896% 73.014019%;
}
.rolling-wheel-front {
  left: 76.82291667%;
  top: 71.38671875%;
  width: 12.36979167%;
  --wheel-perspective: .873684;
  --wheel-size: 925.301205% 538.947368%;
  --wheel-position: 80.072993% 76.258993%;
}
.wheel-disc {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: url('assets/camper.png');
  background-size: var(--wheel-size);
  background-position: var(--wheel-position);
  background-repeat: no-repeat;
  transform: rotate(var(--wheel-angle, 0deg));
  transform-origin: center;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .wheel-disc { transform: none; will-change: auto; }
}