.im-route-scene {
  position: relative;
  width: 100%;
  min-height: clamp(210px, 36vw, 320px);
}

.im-route-scene__svg {
  display: block;
  width: 100%;
  height: auto;
}

.im-route-scene__ambient {
  animation: im-ambient-pulse 5.5s ease-in-out infinite;
}

@keyframes im-ambient-pulse {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.95;
  }
}

.im-route-scene__arc--ground,
.im-route-scene__arc--mid {
  animation: im-track-flow 2.2s linear infinite;
}

.im-route-scene__arc--mid {
  animation-delay: 0.35s;
}

.im-route-scene__arc--sky {
  animation: im-sky-drift 6s ease-in-out infinite;
}

@keyframes im-track-flow {
  to {
    stroke-dashoffset: -44;
  }
}

@keyframes im-sky-drift {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 0.7;
  }
}

.im-route-scene__pulse {
  fill: rgba(255, 209, 0, 0.28);
  transform-origin: center;
  animation: im-node-pulse 2.6s ease-out infinite;
}

.im-route-scene__pulse--dest {
  fill: rgba(3, 105, 161, 0.3);
  animation-delay: 1.1s;
}

.im-route-scene__pulse--hub {
  fill: rgba(3, 105, 161, 0.35);
  animation-delay: 0.55s;
}

@keyframes im-node-pulse {
  0% {
    transform: scale(0.45);
    opacity: 0.9;
  }

  100% {
    transform: scale(1.75);
    opacity: 0;
  }
}

.im-route-scene__plane {
  animation: im-plane-glide 5s ease-in-out infinite;
}

@keyframes im-plane-glide {
  0%,
  100% {
    transform: translate(280px, 95px);
    opacity: 0.35;
  }

  15% {
    opacity: 1;
  }

  50% {
    transform: translate(520px, 95px);
    opacity: 1;
  }

  85% {
    opacity: 0.35;
  }
}

.im-route-scene__box--ground {
  transform-box: fill-box;
  offset-path: path("M72 210 L280 210 L400 188 L520 210 L728 210");
  offset-rotate: auto;
  animation: im-box-ground 7s ease-in-out infinite;
}

.im-route-scene__box--air {
  transform-box: fill-box;
  offset-path: path("M280 210 Q400 165 520 210");
  offset-rotate: auto;
  animation: im-box-air 5.5s ease-in-out infinite;
  animation-delay: 1.2s;
}

@keyframes im-box-ground {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@keyframes im-box-air {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

.im-route-scene__badge {
  animation: im-badge-float 4.2s ease-in-out infinite;
}

@keyframes im-badge-float {
  0%,
  100% {
    transform: translate(400px, 300px) translateY(0);
  }

  50% {
    transform: translate(400px, 300px) translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .im-route-scene__ambient,
  .im-route-scene__arc--ground,
  .im-route-scene__arc--mid,
  .im-route-scene__arc--sky,
  .im-route-scene__pulse,
  .im-route-scene__plane,
  .im-route-scene__box--ground,
  .im-route-scene__box--air,
  .im-route-scene__badge {
    animation: none;
  }
}