.transport-scene {
  height: 100px;
  margin: 0 0 30px;
  border-radius: 8px;
  background: #f0f6fb;
  overflow: hidden;
}
.transport-scene svg {
  display: block;
  width: 100%;
  height: 100%;
}
.air-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.air-freight-plane {
  display: block;
  width: 90%;
  height: 100%;
  object-fit: contain;
  animation: air-freight-flight 4s ease-in-out infinite;
  transform-origin: center;
}
.cargo-ship {
  animation: ship-bob 3s ease-in-out infinite;
  transform-origin: 120px 60px;
}
.waves {
  animation: wave-drift 2.5s linear infinite;
}
.truck {
  animation: truck-drive 3s ease-in-out infinite;
}
.road-dashes {
  animation: road-move 0.9s linear infinite;
}
.animation-controls {
  display: flex;
  justify-content: flex-end;
  margin: -25px 0 18px;
}
.animation-controls button {
  font: inherit;
  font-size: 12px;
  color: #073766;
  background: #fff;
  border: 1px solid #bbccdc;
  padding: 9px 14px;
  border-radius: 5px;
  cursor: pointer;
}
.animations-paused .transport-scene * {
  animation-play-state: paused !important;
}
@keyframes air-freight-flight {
  0%,
  100% {
    transform: translate(-8px, 3px) rotate(1deg);
  }
  50% {
    transform: translate(8px, -4px) rotate(-2deg);
  }
}
@keyframes ship-bob {
  0%,
  100% {
    transform: translateY(1px) rotate(-1.5deg);
  }
  50% {
    transform: translateY(-3px) rotate(1.5deg);
  }
}
@keyframes wave-drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-60px);
  }
}
@keyframes truck-drive {
  0%,
  100% {
    transform: translate(-6px, 0);
  }
  50% {
    transform: translate(7px, -1px);
  }
}
@keyframes road-move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-40px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .transport-scene * {
    animation: none !important;
  }
  .animation-controls {
    display: none;
  }
}