.real-vehicle {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  transform-origin: 60% 80%;
  will-change: transform, opacity;
}

.real-vehicle img {
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 8px rgba(88,125,181,.28))
    drop-shadow(0 22px 28px rgba(0,0,0,.22));
}

.real-car {
  right: -5%;
  bottom: 74px;
  width: min(50vw, 700px);
  opacity: .68;
  animation: real-car-motion 10s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

.real-van {
  right: 14%;
  bottom: 250px;
  width: min(38vw, 530px);
  opacity: .35;
  animation: real-van-motion 12s cubic-bezier(.45,.05,.55,.95) infinite alternate;
}

.vehicle-road-glow {
  position: absolute;
  z-index: 0;
  right: -5%;
  bottom: 106px;
  width: 58%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(88,125,181,.12), rgba(254,254,254,.18), transparent);
  box-shadow: 0 18px 48px 8px rgba(88,125,181,.08);
  animation: road-glow-shift 5s ease-in-out infinite alternate;
}

@keyframes real-car-motion {
  0% { transform: translate3d(32px, 4px, 0) scale(.985); opacity: .56; }
  48%, 58% { opacity: .76; }
  100% { transform: translate3d(-16px, -3px, 0) scale(1.012); opacity: .66; }
}

@keyframes real-van-motion {
  0% { transform: translate3d(-16px, -2px, 0) scale(.988); opacity: .27; }
  50% { opacity: .43; }
  100% { transform: translate3d(24px, 3px, 0) scale(1.008); opacity: .33; }
}

@keyframes road-glow-shift {
  from { transform: translateX(5%); opacity: .45; }
  to { transform: translateX(-7%); opacity: 1; }
}

@media (max-width: 900px) {
  .real-car { width: 92vw; right: -38%; bottom: 72px; opacity: .5; }
  .real-van { width: 78vw; right: -8%; bottom: 190px; opacity: .25; }
  .vehicle-road-glow { width: 88%; right: -26%; bottom: 94px; }
}

@media (prefers-reduced-motion: reduce) {
  .real-car,
  .real-van,
  .vehicle-road-glow { animation: none; }
}
