/* A pixel-sky transition with a legible two-lane road along its lower edge. */
.road-scene {
  width: 100%;
  overflow: hidden;
  padding: 0;
  background: #b8e6ed;
}

.road-world {
  position: relative;
  height: 148px;
  overflow: hidden;
  background:
    linear-gradient(180deg, #b8e6ed 0%, #b8e6ed 66%, #e3f1df 100%);
  image-rendering: pixelated;
}

.pixel-cloud {
  position: absolute;
  z-index: 1;
  display: block;
  width: 82px;
  height: 41px;
  object-fit: contain;
  image-rendering: pixelated;
  animation: cloud-drift 12s ease-in-out infinite alternate;
}

.pixel-cloud--one {
  top: 3px;
  left: 12%;
}

.pixel-cloud--two {
  top: 20px;
  left: 52%;
  width: 66px;
  height: 33px;
  opacity: .84;
  animation-duration: 15s;
  animation-delay: -8s;
}

.pixel-cloud--three {
  top: 9px;
  right: 16%;
  width: 48px;
  height: 24px;
  opacity: .72;
  animation-duration: 18s;
  animation-delay: -4s;
}

.pixel-road {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 72px;
  object-fit: fill;
  image-rendering: pixelated;
}

@keyframes cloud-drift {
  from { transform: translateX(-8px); }
  to { transform: translateX(14px); }
}

@media (max-width: 620px) {
  .road-world { height: 126px; }
  .pixel-cloud--one { top: 2px; left: 8%; width: 56px; height: 28px; }
  .pixel-cloud--two { top: 17px; left: 48%; width: 44px; height: 22px; }
  .pixel-cloud--three { top: 6px; right: 12%; width: 32px; height: 16px; }
  .pixel-road { height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .pixel-cloud { animation: none; }
}