/* ==========================================================================
   Smart Connected Vehicle Network — animated SVG section
   Palette: Orange (#FF6A00 family) + White only, per design requirement.
   ========================================================================== */

.network-animation-section {
  width: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 106, 0, 0.10) 55%, rgba(255, 106, 0, 0.18) 100%);
  padding: 56px 0 40px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid rgba(255, 106, 0, 0.2);
  border-radius: 24px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.18);
}

.network-animation-section__head {
  max-width: 1100px;
  margin: 0 auto 28px;
  padding: 0 24px;
  text-align: center;
}

.network-animation-section__head h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 3.4vw, 40px);
  font-weight: 700;
  color: var(--rl-white);
  letter-spacing: 0.3px;
}

.network-animation-section__head p {
  margin: 0;
  font-size: clamp(14px, 1.6vw, 17px);
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.6;
}

.network-animation-stage {
  width: 100%;
  display: block;
}

.network-animation-stage svg {
  display: block;
  width: 100%;
  height: auto;
}

.network-animation-legend {
  max-width: 1100px;
  margin: 22px auto 0;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  justify-content: center;
}

.network-animation-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 500;
}

.network-animation-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rl-orange);
  flex-shrink: 0;
}

.network-animation-legend__dot--soft {
  background: #ffb067;
}

.network-animation-legend__dash {
  width: 22px;
  height: 0;
  border-top: 3px dashed var(--rl-orange);
  flex-shrink: 0;
}

@keyframes van-spin {
  to { transform: rotate(360deg); }
}
.van-wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: van-spin 1s linear infinite;
}

@keyframes van-pulse-arc {
  0%   { opacity: .15; transform: scale(.8); }
  45%  { opacity: .95; transform: scale(1.05); }
  100% { opacity: .15; transform: scale(.8); }
}
.van-pulse-arc {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: van-pulse-arc 2.2s ease-in-out infinite;
}
.van-pulse-arc-1 { animation-delay: 0s; }
.van-pulse-arc-2 { animation-delay: .28s; }
.van-pulse-arc-3 { animation-delay: .56s; }

@keyframes van-beacon {
  0%, 100% { opacity: .55; transform: scale(.75); }
  50%      { opacity: 1;   transform: scale(1.3); }
}
.van-beacon {
  transform-box: fill-box;
  transform-origin: center;
  animation: van-beacon 1.5s ease-in-out infinite;
}

@keyframes van-flow {
  to { stroke-dashoffset: -60; }
}
.van-flow {
  stroke-dasharray: 12 10;
  animation: van-flow 1s linear infinite;
}
@keyframes van-flow-long {
  to { stroke-dashoffset: -400; }
}
.van-flow-long {
  stroke-dasharray: 14 12;
  animation: van-flow-long 6s linear infinite;
}

@keyframes van-road-dash {
  to { stroke-dashoffset: -108; }
}
.van-road-lane {
  stroke-dasharray: 36 28;
  animation: van-road-dash .85s linear infinite;
}

@keyframes van-cloud-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.van-cloud {
  transform-box: fill-box;
  transform-origin: center;
  animation: van-cloud-float 4.5s ease-in-out infinite;
}

@keyframes van-tower-light {
  0%, 100% { opacity: .35; }
  50%      { opacity: 1; }
}
.van-tower-light {
  animation: van-tower-light 1.1s ease-in-out infinite;
}

@media (max-width: 640px) {
  .network-animation-section { padding: 36px 0 28px; }
}