/* ---------- international moving: 3D world-map route artwork ---------- */
/* Loaded after main.css so it can override .split-media img / .route-art svg. */

.route-art {
  position: relative;
  aspect-ratio: 560 / 400;
  background: #0A2C19;
  isolation: isolate;
}

.route-art .globe-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center center;
  border-radius: 0;
  box-shadow: none;
  display: block;
}

.route-art .globe-routes {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
}

/* soft vignette adds depth without hiding the continents */
.route-art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 74% 70% at 50% 46%, transparent 54%, rgba(3, 24, 13, .55) 100%);
}

/* --- arcs: two long intercontinental sweeps + two short hub links --- */
.globe-arc-base {
  fill: none;
  stroke: url(#yyRoute);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: .62;
}
.globe-arc-soft { opacity: .3; }
.globe-arc-flow {
  fill: none;
  stroke: #FFB45A;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 3 11;
  opacity: .92;
  animation: yyFlow 1.8s linear infinite;
}
@keyframes yyFlow { to { stroke-dashoffset: -28; } }

/* --- pulsing hubs --- */
.globe-node-pulse {
  fill: none;
  stroke: #8CC63F;
  stroke-width: 1.4;
  opacity: 0;
  transform-origin: 0 0;
  animation: yyPulse 2.8s ease-out infinite;
}
.globe-node:nth-child(2) .globe-node-pulse { animation-delay: .9s; }
.globe-node:nth-child(3) .globe-node-pulse { animation-delay: 1.8s; }
@keyframes yyPulse {
  0%   { transform: scale(.35); opacity: .85; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* --- labels: real HTML text, so they stay legible on small screens --- */
.globe-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.globe-label {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px 6px 9px;
  border-radius: 7px;
  white-space: nowrap;
  background: rgba(6, 38, 21, .84);
  border: 1px solid rgba(140, 198, 63, .42);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  color: #F2FAE7;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  backdrop-filter: blur(3px);
}
.globe-label::before {
  content: '';
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: #F58220;
}
.globe-label i {
  font-style: normal;
  font-size: 14px;
  letter-spacing: .06em;
  color: #9BD35C;
}
.globe-label--shanghai { left: 71%; top: 37.5%; transform: translate(-54%, -150%); }
.globe-label--europe   { left: 47%;   top: 33%;  transform: translate(-50%, -175%); }
.globe-label--americas { left: 27%; top: 49%;  transform: translate(-50%, 14px); }

.globe-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(203, 235, 176, .78);
}
.globe-caption em { font-style: normal; color: #F5A45A; }
.globe-caption--top { top: 16px; }
.globe-caption--bottom {
  bottom: 14px;
  justify-content: flex-start;
  font-size: 14px;
  letter-spacing: .1em;
  color: rgba(203, 235, 176, .58);
}

@media (max-width: 600px) {
  .globe-label { font-size: 14px; padding: 3px 6px; gap: 4px; }
  .globe-label i { display: none; }
  .globe-label--shanghai { transform: translate(-62%, -155%); }
  .globe-caption { left: 12px; right: 12px; font-size: 14px; letter-spacing: .12em; }
  .globe-caption--top { top: 10px; }
  .globe-caption--bottom { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .globe-arc-flow, .globe-node-pulse { animation: none; }
  .globe-node-pulse { opacity: .45; }
}