/* Shared logistics animation (coming-soon + home hero) */
.logistics-scene {
  position: relative;
  width: 100%;
  min-height: 260px;
}

.cs-main .logistics-scene {
  min-height: 280px;
}

.cs-main .logistics-scene__svg {
  max-height: min(52vh, 380px);
}

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

.logistics-scene__route--back {
  stroke-dasharray: 8 10;
  animation: logistics-route-flow 2.5s linear infinite;
}

.logistics-scene__route--front {
  animation: logistics-route-flow 3.2s linear infinite reverse;
}

@keyframes logistics-route-flow {
  to {
    stroke-dashoffset: -36;
  }
}

.logistics-scene__hub-pulse {
  fill: rgba(255, 209, 0, 0.35);
  transform-origin: center;
  animation: logistics-hub-pulse 2.4s ease-out infinite;
}

.logistics-scene__hub--b .logistics-scene__hub-pulse {
  animation-delay: 0.8s;
}

.logistics-scene__hub--c .logistics-scene__hub-pulse {
  animation-delay: 1.6s;
}

@keyframes logistics-hub-pulse {
  0% {
    transform: scale(0.35);
    opacity: 0.9;
  }

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

.logistics-scene__truck {
  transform-box: fill-box;
  transform-origin: center;
  offset-path: path("M40 220 C120 160, 200 280, 280 200 S440 120, 600 180");
  offset-rotate: auto;
  animation: logistics-truck-run 14s linear infinite;
}

@keyframes logistics-truck-run {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

.logistics-scene__plane {
  transform-box: fill-box;
  offset-path: path("M80 80 C200 40, 360 60, 560 50");
  offset-rotate: auto 90deg;
  animation: logistics-plane-fly 9s ease-in-out infinite;
}

@keyframes logistics-plane-fly {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

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

.logistics-scene__ship {
  transform-box: fill-box;
  offset-path: path("M60 300 C200 320, 400 280, 580 300");
  offset-rotate: auto 0deg;
  animation: logistics-ship-sail 16s ease-in-out infinite;
}

@keyframes logistics-ship-sail {
  0% {
    offset-distance: 0%;
  }

  50% {
    offset-distance: 55%;
  }

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

.logistics-scene__crate--1 {
  animation: logistics-crate-bob 3.2s ease-in-out infinite;
}

.logistics-scene__crate--2 {
  animation: logistics-crate-bob 3.8s ease-in-out infinite 0.6s;
}

@keyframes logistics-crate-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }

  50% {
    transform: translateY(-8px) rotate(3deg);
  }
}

.lx-hero__frame--scene {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(280px, 36vw, 380px);
  padding: 1.25rem 1rem 1rem;
  background: linear-gradient(145deg, #fff 0%, #f1f5f9 100%);
}

.lx-hero__frame--scene .logistics-scene {
  min-height: 0;
}

.lx-hero__frame--scene .logistics-scene__svg {
  max-height: min(340px, 42vw);
}

@media (prefers-reduced-motion: reduce) {
  .logistics-scene__route--back,
  .logistics-scene__route--front,
  .logistics-scene__hub-pulse,
  .logistics-scene__truck,
  .logistics-scene__plane,
  .logistics-scene__ship,
  .logistics-scene__crate--1,
  .logistics-scene__crate--2 {
    animation: none;
  }
}