/* ===== */
/* CAR */
/* ===== */

.car-wrap {
  position: absolute;
  left: 50%;
  bottom: 19%;
  transform: translateX(-50%) scale(1.1);
  z-index: 15;
  width: min(34vw, 134px);
  pointer-events: none;
}

.car-float {
  position: relative;
  z-index: 3;
  animation: car-bob calc(5.6s / var(--car-speed, 1)) ease-in-out infinite;
  animation-play-state: paused;
  transition: transform 0.35s ease;
}

.app.is-playing .car-float {
  animation-play-state: running;
}

.app.is-paused .car-float {
  animation: car-bob calc(16s / var(--car-speed, 1)) ease-in-out infinite;
  animation-play-state: running;
}

.road-car {
  display: block;
  width: min(28vw, 110px);
  height: auto;
  margin: 0 auto;
  pointer-events: none;
}

.road-car::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 4px;
  height: 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
}

.road-car::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 38px;
  height: 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
}

.car-image {
  display: none;
}

.car-glow {
  display: none;
}

.car-shadow {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  width: 60%;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  filter: blur(8px);
  z-index: 2;
}

@keyframes car-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ===================== */
/* CAR TYPE VARIANTS     */
/* ===================== */

.car-float[data-car="suv"] .road-car {
  width: min(32vw, 120px);
  height: auto;
}

.car-float[data-car="truck"] .road-car {
  width: min(34vw, 126px);
  height: auto;
}

@media (max-width: 480px) {
  .car-wrap {
    width: min(26vw, 100px);
    transform: translateX(-50%) scale(1.2);
  }

  .road-car {
    width: min(20vw, 82px);
  }

  .car-float[data-car="suv"] .road-car {
    width: min(23vw, 90px);
  }

  .car-float[data-car="truck"] .road-car {
    width: min(25vw, 96px);
  }
}