/*
 * FxVPSPRO — the network map.
 *
 * The landmass is a CSS mask over a gradient, so the 59 KB dot file caches
 * once and its colour still comes from the theme.
 *
 * What animates, and why it is affordable:
 *   · five hub pings — transform + opacity, five elements
 *   · one scan sweep — transform, one element
 *   · the backbone lights — stroke-dashoffset on five 1px paths. That is a
 *     paint, not a composite. Five hairlines inside a 1000x500 box is a
 *     fraction of what the separators already repaint, and the alternative
 *     (offset-path) is not reliable across browsers.
 * The 35 route arcs and the 4,678 land dots never animate.
 */

.fxvps-globe-page .map{position:relative}

.fxvps-globe-page .map-frame{
  position:relative;aspect-ratio:1000/500;width:100%;overflow:hidden;
  border-radius:18px;border:1px solid var(--line);
  background:
    radial-gradient(70% 80% at 50% 10%, rgba(var(--accent-rgb),.06), transparent 70%),
    linear-gradient(180deg,rgba(12,18,38,.9),rgba(7,11,24,.95));
}

/* ── the land ─────────────────────────────────────────────────────────── */
.fxvps-globe-page .map-land{
  position:absolute;inset:0;display:block;pointer-events:none;
  background:linear-gradient(180deg,rgba(150,175,230,.30),rgba(var(--accent-rgb),.18));
  -webkit-mask:var(--map-dots) center/contain no-repeat;
  mask:var(--map-dots) center/contain no-repeat;
}

/* a slow light crossing the map, like a sweep across a status board */
.fxvps-globe-page .map-scan{
  position:absolute;top:0;bottom:0;left:0;width:36%;display:block;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.09) 45%,rgba(var(--accent-rgb),.14) 55%,transparent);
  transform:translateX(-120%);
  animation:fx-map-scan 14s cubic-bezier(.5,0,.4,1) infinite;
}
@keyframes fx-map-scan{
  0%,8%   {transform:translateX(-120%)}
  92%,100%{transform:translateX(400%)}
}

.fxvps-globe-page .map-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* ── routes ───────────────────────────────────────────────────────────── */
.fxvps-globe-page .map-route{
  fill:none;stroke:rgba(150,175,230,.22);stroke-width:.9;
  transition:stroke .2s ease,stroke-width .2s ease;
}
.fxvps-globe-page .map-route.is-on{stroke:var(--accent);stroke-width:1.6}

.fxvps-globe-page .map-trunk{
  fill:none;stroke:rgba(var(--accent-rgb),.5);stroke-width:1.2;
  stroke-dasharray:14 240;stroke-linecap:round;
  animation:fx-map-flow 7s linear infinite;
}
.fxvps-globe-page .map-trunk:nth-child(2){animation-delay:-1.4s}
.fxvps-globe-page .map-trunk:nth-child(3){animation-delay:-2.8s}
.fxvps-globe-page .map-trunk:nth-child(4){animation-delay:-4.2s}
.fxvps-globe-page .map-trunk:nth-child(5){animation-delay:-5.6s}
@keyframes fx-map-flow{
  from{stroke-dashoffset:254}
  to  {stroke-dashoffset:0}
}

/* ── pins ─────────────────────────────────────────────────────────────── */
.fxvps-globe-page .map-dot{fill:var(--accent);transition:r .2s ease,fill .2s ease}
.fxvps-globe-page .map-pin.is-hub .map-dot{fill:var(--gold)}
.fxvps-globe-page .map-hit{fill:transparent;cursor:pointer}

.fxvps-globe-page .map-ping{
  fill:none;stroke:var(--gold);stroke-width:1.4;transform-origin:center;transform-box:fill-box;
  animation:fx-map-ping 3.2s cubic-bezier(.22,.7,.2,1) infinite;
}
.fxvps-globe-page .map-pins > g:nth-child(3n) .map-ping{animation-delay:-1s}
.fxvps-globe-page .map-pins > g:nth-child(3n+1) .map-ping{animation-delay:-2s}
@keyframes fx-map-ping{
  0%  {transform:scale(.5);opacity:.85}
  70% {transform:scale(3.2);opacity:0}
  100%{transform:scale(3.2);opacity:0}
}

.fxvps-globe-page .map-pin.is-on .map-dot{r:6;fill:var(--accent)}
.fxvps-globe-page .map-pin.is-on{filter:drop-shadow(0 0 7px rgba(var(--accent-rgb),.9))}

/* ── the floating label ───────────────────────────────────────────────── */
.fxvps-globe-page .map-tip{
  position:absolute;z-index:3;pointer-events:none;
  transform:translate(-50%,-150%);
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  padding:7px 11px;border-radius:10px;
  background:rgba(7,11,24,.96);border:1px solid rgba(var(--accent-rgb),.35);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.9);
  font-size:12px;color:var(--ink);
}
.fxvps-globe-page .map-tip em{
  font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  padding:2px 5px;border-radius:5px;color:var(--accent);background:rgba(var(--accent-rgb),.14);
}
.fxvps-globe-page .map-tip span{font-size:11px;color:var(--muted-2)}

/* ── legend ───────────────────────────────────────────────────────────── */
.fxvps-globe-page .map-legend{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px;
  font-size:12px;color:var(--muted-2);
}
.fxvps-globe-page .map-legend span{display:inline-flex;align-items:center;gap:8px}
.fxvps-globe-page .map-legend b{color:var(--ink);font-weight:700}
.fxvps-globe-page .map-legend i{
  width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto;
}
.fxvps-globe-page .map-legend i.is-hub{background:var(--gold)}
.fxvps-globe-page .map-legend i.is-line{
  width:18px;height:2px;border-radius:2px;background:rgba(150,175,230,.4);
}
.fxvps-globe-page .map-live i{animation:fx-map-live 2.4s ease-in-out infinite}
@keyframes fx-map-live{0%,100%{opacity:1}50%{opacity:.25}}

/* ── chips ────────────────────────────────────────────────────────────── */
.fxvps-globe-page .map-chips{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:20px;
}
.fxvps-globe-page .map-chip{
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
  cursor:pointer;background:var(--glass);border:1px solid var(--line);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.fxvps-globe-page .map-chip:hover,
.fxvps-globe-page .map-chip.is-on{
  border-color:rgba(var(--accent-rgb),.45);background:var(--glass-2);transform:translateY(-1px);
}
.fxvps-globe-page .map-chip .fx-flag{width:17px;height:13px;border-radius:3px;display:block}
.fxvps-globe-page .map-chip b{font-size:12.5px;font-weight:600;color:var(--ink)}
.fxvps-globe-page .map-chip em{
  font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em;color:var(--muted-2);
}
.fxvps-globe-page .map-chip.is-hub em{color:var(--gold)}

@media (max-width:720px){
  .fxvps-globe-page .map-frame{border-radius:14px}
  .fxvps-globe-page .map-chips{max-height:190px;overflow-y:auto}
}

@media (prefers-reduced-motion:reduce){
  .fxvps-globe-page .map-scan,
  .fxvps-globe-page .map-ping,
  .fxvps-globe-page .map-live i{animation:none}
  .fxvps-globe-page .map-scan{display:none}
  .fxvps-globe-page .map-trunk{animation:none;stroke-dasharray:none}
}