:root {
  color-scheme: dark;
  --bg-1: #050914;
  --bg-2: #0c1023;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: radial-gradient(circle at 45% 20%, var(--bg-2), var(--bg-1));
  overflow: hidden;
}

.car-stage {
  --origin-x: 50%;
  --origin-y: 50%;
  width: 100vw;
  height: 100vh;
  margin: 0;
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.car-stage.is-warping {
  cursor: grabbing;
}

.car-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  pointer-events: none;
  transform-origin: var(--origin-x) var(--origin-y);
  transition: filter 200ms ease;
  will-change: transform;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55));
}

.car-stage.is-warping .car-image {
  filter: drop-shadow(0 40px 65px rgba(0, 0, 0, 0.7));
}