* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; background: #4f4f52; }
.stage { position: relative; width: 100%; min-height: 100dvh; overflow: hidden; background: #4f4f52; }
.background {
  position: absolute;
  inset: 0;
  background: url('assets/background.webp') no-repeat 50% 50% / cover;
}

/* A single full-width, non-interactive waveform canvas behind the car. */
.visualizer {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms ease;
}
.visualizer.is-active { opacity: 1; }

/* The car is the ONLY interactive control. No hover scaling or tap scaling. */
.car-button {
  --beat: 0;
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(160px, 20vh, 230px);
  width: clamp(250px, 28vw, 440px);
  aspect-ratio: 933 / 394;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform-origin: 50% 50%;
  transform: translateX(-50%) scale(calc(1 + var(--beat) * .045));
  transition: transform 150ms ease-out;
}
.car-image, .car-silhouette {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}
.car-image {
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(0,0,0,.22));
  opacity: 1;
  transition: opacity 350ms ease;
}
/* Identical bitmap mask and identical position = no shifted silhouette. */
.car-silhouette {
  background: #7b25ff;
  -webkit-mask: url('assets/car.png') center center / 100% 100% no-repeat;
  mask: url('assets/car.png') center center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 350ms ease;
  filter: drop-shadow(0 12px 12px rgba(60,0,130,.28));
}
.car-button.is-playing .car-image,
.car-button.is-connecting .car-image { opacity: 0; }
.car-button.is-playing .car-silhouette,
.car-button.is-connecting .car-silhouette { opacity: 1; }
.car-button:focus-visible { outline: 2px dashed rgba(255,255,255,.9); outline-offset: 6px; border-radius: 14px; }

@media (max-width: 900px) {
  .background { background-position: 60% 50%; }
  .car-button { width: clamp(245px, 48vw, 360px); bottom: clamp(140px, 19vh, 210px); }
}
@media (max-width: 600px) {
  .background { background-position: 64% 50%; }
  .car-button { width: min(78vw, 350px); bottom: clamp(155px, 22vh, 260px); }
}
@media (prefers-reduced-motion: reduce) {
  .car-button, .car-image, .car-silhouette, .visualizer { transition: none; }
}