/* A conceptual route map: each website connects to the same support team. */
.global-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.global-route {
  fill: none;
  stroke: #a0d9c5;
  stroke-width: 1.15;
  opacity: 0.28;
}
.global-route-signal {
  fill: none;
  stroke: #c1ffe8;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 26 974;
  stroke-dashoffset: 26;
  opacity: 0;
}
.global-route-signal.is-soft {
  stroke: #70c1a5;
  stroke-width: 7;
  stroke-opacity: 0.18;
  opacity: 0;
}
.global-network .route-sc {
  --route-delay: 3.6s;
}
.global-network .route-prime {
  --route-delay: 7.2s;
}
.global-node-halo {
  fill: #70c1a5;
  opacity: 0.12;
}
.global-node-dot {
  fill: #c1ffe8;
}
.global-node-ring {
  fill: none;
  stroke: #70c1a5;
  stroke-width: 1;
  opacity: 0.4;
}
.global-hub-ring {
  fill: none;
  stroke: #8bdbc0;
  stroke-width: 1;
  opacity: 0.3;
  transform-box: fill-box;
  transform-origin: center;
}
.global-hub-core {
  fill: #09231e;
  stroke: #94ceb6;
  stroke-width: 1.2;
}
.global-hub-icon {
  fill: none;
  stroke: #c4f5e2;
  stroke-width: 1.25;
}
.global-orb .global-label {
  white-space: nowrap;
  padding: 14px 18px;
  background: #081812ed;
  border-color: #88c5a736;
  box-shadow:
    0 12px 32px #0003,
    inset 0 1px 0 #d4f6e506;
}
.global-orb .global-label-ae {
  top: 28.3%;
  left: 72.8%;
  right: auto;
}
.global-orb .global-label-sc {
  top: 58%;
  left: 73%;
  right: auto;
}
.global-orb .global-label-prime {
  top: 52%;
  right: 76%;
  left: auto;
}
.global-hub-caption {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #c0e2d3;
  padding: 6px 10px;
  background: #08120dd9;
  border-radius: 4px;
  white-space: nowrap;
}
/* The shared section lifecycle starts these only while the globe is visible. */
.section-motion .global-route-signal {
  animation: globe-route-packet 10.8s linear infinite;
  animation-delay: var(--route-delay, 0s);
  animation-play-state: paused;
}
.section-motion .global-hub-ring {
  animation: globe-hub-receive 3.6s ease-out infinite;
  animation-delay: 2.9s;
  animation-play-state: paused;
}
.section-motion .global-hub-ring.is-outer {
  animation-delay: 3.15s;
}
.global-visual.is-section-running .global-route-signal,
.global-visual.is-section-running .global-hub-ring {
  animation-play-state: running;
}
.motion-paused .global-network *,
.page-hidden .global-network * {
  animation-play-state: paused !important;
}
@keyframes globe-route-packet {
  0% {
    stroke-dashoffset: 26;
    opacity: 0;
  }
  2% {
    opacity: 0.9;
  }
  26% {
    stroke-dashoffset: -950;
    opacity: 0.9;
  }
  30%,
  100% {
    stroke-dashoffset: -1000;
    opacity: 0;
  }
}
@keyframes globe-hub-receive {
  0% {
    transform: scale(0.88);
    opacity: 0.5;
  }
  65%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
@media (min-width: 2000px) {
  .global-hub-caption {
    font-size: 12px;
  }
}
@media (max-width: 767px) {
  .global-orb .global-label {
    padding: 8px 10px;
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  .global-orb .global-label > span {
    font-size: 6px;
    margin-top: 4px;
  }
  .global-orb .global-label-ae {
    top: 24%;
    left: 62%;
  }
  .global-orb .global-label-sc {
    top: 62%;
    left: 62%;
  }
  .global-orb .global-label-prime {
    top: 53%;
    right: 62%;
  }
  .global-hub-caption {
    font-size: 6px;
    padding: 4px 6px;
  }
  .global-route {
    stroke-width: 1.4;
  }
  .global-route-signal {
    stroke-width: 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .global-network * {
    animation: none !important;
  }
}
