.mcusa-hero.has-network-hero::after {
  background:
    radial-gradient(700px 480px at 82% 12%, rgba(37, 99, 235, 0.12), transparent 70%),
    linear-gradient(90deg, rgba(5, 11, 22, 0.98) 0%, rgba(5, 11, 22, 0.93) 31%, rgba(5, 11, 22, 0.58) 52%, rgba(5, 11, 22, 0.03) 82%),
    linear-gradient(180deg, rgba(5, 11, 22, 0.02) 48%, rgba(5, 11, 22, 0.76) 100%);
}

.mcusa-hero__network {
  --mcusa-network-globe-offset-y: clamp(18px, 4vh, 44px);
  background: #050c18;
  inset: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  transition: opacity 420ms var(--mcusa-ease);
  z-index: 1;
}

.mcusa-hero__visual.is-network-ready .mcusa-hero__network {
  opacity: 1;
}

.mcusa-network__globe {
  display: block;
  height: 100%;
  inset: 0;
  mask-composite: intersect;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.04) 33%, rgba(0, 0, 0, 0.42) 48%, #000 63%),
    linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, 0.66) 84%, transparent 100%);
  opacity: 0.82;
  position: absolute;
  transform: translateY(var(--mcusa-network-globe-offset-y));
  width: 100%;
  -webkit-mask-composite: source-in;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.04) 33%, rgba(0, 0, 0, 0.42) 48%, #000 63%),
    linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, 0.66) 84%, transparent 100%);
}

.mcusa-network__globe path,
.mcusa-network__globe circle,
.mcusa-network__globe ellipse {
  vector-effect: non-scaling-stroke;
}

.mcusa-network__globe-disc {
  fill: rgba(10, 38, 71, 0.44);
}

.mcusa-network__globe-rim {
  fill: none;
  filter: drop-shadow(0 0 16px rgba(37, 99, 235, 0.42));
  stroke: url("#mcusa-network-globe-shell");
  stroke-width: 2;
}

.mcusa-network__wireframe {
  fill: none;
  opacity: 0.58;
  stroke: #37628e;
  stroke-width: 0.85;
}

.mcusa-network__wireframe ellipse:nth-child(2n) {
  opacity: 0.55;
  stroke: #4f8df9;
}

.mcusa-network__continents {
  opacity: 0.58;
}

.mcusa-network__land-map {
  mix-blend-mode: screen;
}

.mcusa-network__route-base {
  fill: none;
  opacity: 0;
  stroke-dasharray: 5 9;
  stroke-linecap: round;
  stroke-width: 1.35;
  transition: opacity 850ms ease;
}

.mcusa-network__route-base.is-visible {
  opacity: 0.58;
}

.mcusa-network__route-base.tone-blue {
  stroke: #4f8df9;
}

.mcusa-network__route-base.tone-red {
  stroke: #d62929;
}

.mcusa-network__route-base.tone-gold {
  stroke: #f1b31c;
}

.mcusa-network__route-base.tone-ocean {
  stroke: #2dd4bf;
}

.mcusa-network__ocean-route-base {
  stroke-dasharray: 2 11;
  stroke-width: 1.55;
}

.mcusa-network__ocean-route-base.is-visible {
  opacity: 0.52;
}

.mcusa-network__route-base.is-blocked.is-visible {
  opacity: 0.72;
}

.mcusa-network__route-base.is-reroute.is-visible {
  opacity: 0.9;
  stroke-width: 1.8;
}

.mcusa-network__shipment {
  opacity: 0;
  transition: opacity 850ms ease 120ms;
}

.mcusa-network__shipment.is-visible {
  opacity: 1;
}

.mcusa-network__shipment path {
  animation: mcusa-network-shipment-travel var(--shipment-duration) linear var(--shipment-delay) infinite;
  fill: none;
  stroke-linecap: round;
}

.mcusa-network__shipment-tail {
  opacity: 0.72;
  stroke-dasharray: 8 92;
  stroke-dashoffset: 100;
  stroke-width: 5;
}

.mcusa-network__shipment-core {
  stroke-dasharray: 1.4 98.6;
  stroke-dashoffset: 100;
  stroke-width: 2.8;
}

.mcusa-network__shipment.tone-blue path {
  filter: url("#mcusa-network-glow-blue");
  stroke: #4f8df9;
}

.mcusa-network__shipment.tone-red path {
  filter: url("#mcusa-network-glow-red");
  stroke: #d62929;
}

.mcusa-network__shipment.tone-gold path {
  filter: url("#mcusa-network-glow-gold");
  stroke: #f1b31c;
}

.mcusa-network__ocean-shipment.tone-ocean path {
  animation: none;
  filter: url("#mcusa-network-glow-blue");
  stroke: #2dd4bf;
}

.mcusa-network__ocean-shipment.is-visible path {
  animation: mcusa-network-ocean-shipment-travel var(--shipment-duration) linear 0s 1 both;
}

.mcusa-network__ocean-shipment .mcusa-network__shipment-tail {
  opacity: 0.58;
  stroke-dasharray: 12 88;
  stroke-width: 4.2;
}

.mcusa-network__ocean-shipment .mcusa-network__shipment-core {
  stroke-dasharray: 1.8 98.2;
  stroke-width: 2.2;
}

.mcusa-network__port {
  color: #4f8df9;
  opacity: 0.24;
  transition: opacity 650ms ease;
}

.mcusa-network__port.is-active {
  opacity: 1;
}

.mcusa-network__port.tone-red {
  color: #d62929;
}

.mcusa-network__port circle {
  fill: #06101f;
  stroke: currentColor;
  transform-box: fill-box;
  transform-origin: center;
}

.mcusa-network__port-ring {
  opacity: 0.76;
  stroke-width: 1.5;
}

.mcusa-network__port-core {
  fill: currentColor !important;
  stroke-width: 0;
}

.mcusa-network__port-label {
  fill: #a9bdd9;
  font-family: var(--mcusa-font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.72;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgba(5, 12, 24, 0.92);
  stroke-linejoin: round;
  stroke-width: 3px;
}

.mcusa-network__delivery {
  opacity: 0;
  pointer-events: none;
  transition: opacity 650ms ease;
}

.mcusa-network__delivery.is-visible {
  opacity: 1;
}

.mcusa-network__delivery > circle {
  fill: rgba(24, 160, 88, 0.3);
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.6));
  stroke: #34d399;
  stroke-width: 1.2;
}

.mcusa-network__delivery-check {
  color: #b7f7d4;
  filter: drop-shadow(0 0 4px rgba(52, 211, 153, 0.7));
  overflow: visible;
}

.mcusa-network__reroute {
  color: #d62929;
  opacity: 0;
  transition: opacity 600ms ease 300ms;
}

.mcusa-network__reroute.is-visible {
  opacity: 1;
}

.mcusa-network__reroute-pulse {
  fill: rgba(214, 41, 41, 0.08);
  stroke: #d62929;
  stroke-width: 1.2;
}

.mcusa-network__reroute-x {
  fill: none;
  stroke: #ff6a5e;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.mcusa-network__globe.is-paused .mcusa-network__shipment path {
  animation-play-state: paused;
}

@keyframes mcusa-network-shipment-travel {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes mcusa-network-ocean-shipment-travel {
  0% {
    stroke-dashoffset: 100;
  }
  86%,
  100% {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 900px) {
  .mcusa-hero__network {
    --mcusa-network-globe-offset-y: clamp(10px, 2.5vh, 24px);
  }

  .mcusa-network__globe {
    left: -22%;
    width: 128%;
  }
}

@media (max-width: 640px) {
  .mcusa-hero.has-network-hero::after {
    background:
      linear-gradient(90deg, rgba(5, 11, 22, 0.96) 0%, rgba(5, 11, 22, 0.78) 72%, rgba(5, 11, 22, 0.5) 100%),
      linear-gradient(180deg, rgba(5, 11, 22, 0.28) 0%, rgba(5, 11, 22, 0.78) 100%);
  }

  .mcusa-network__globe {
    left: -96%;
    width: 225%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mcusa-network__shipment path {
    animation-play-state: paused !important;
  }
}