/* hj-map v2 — factory network overlay on the Asia map (factories overview page). Image 1254x1254; all marker/arc coords are image px. */
.factory-map-stage.hj-net { container-type: inline-size; --hot: #ff4f7e; --hot-2: #ff9bb5; --cool: #8fe3ff;
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; isolation: isolate; background: #071426; }
.hj-net .hj-net-canvas { --rx: 278; --ry: 484; --rw: 600; --rh: 450; position: absolute; left: calc(var(--rx) / var(--rw) * -100%); top: calc(var(--ry) / var(--rh) * -100%);
  width: calc(1254 / var(--rw) * 100%); height: calc(1254 / var(--rh) * 100%); }
.hj-net .hj-net-canvas > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; max-width: none;
  transform: none !important; translate: none !important; scale: none !important; filter: saturate(1.05) brightness(.92); }
.hj-net::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(4,10,22,.55) 100%); }
.hj-net .hj-net-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }

/* arcs */
.hjm-arc path { fill: none; stroke-linecap: round; }
.hjm-arc .hjm-arc-base { stroke: rgba(255, 110, 150, .4); stroke-width: 2.8; }
.hjm-arc .hjm-arc-flow { stroke: var(--hot-2); stroke-width: 1.8; stroke-dasharray: 1.2 2.2; opacity: .85; animation: hjFlow 7s linear infinite; }
.hjm-arc .hjm-arc-comet-glow { stroke: var(--hot); stroke-width: 11; opacity: .4; stroke-dasharray: 16 300; stroke-dashoffset: 16;
  animation: hjComet 3.4s cubic-bezier(.45,.05,.35,1) infinite; animation-delay: calc(var(--i) * -.55s); }
.hjm-arc .hjm-arc-comet { stroke: #fff; stroke-width: 2.6; stroke-dasharray: 9 300; stroke-dashoffset: 12.5;
  animation: hjCometCore 3.4s cubic-bezier(.45,.05,.35,1) infinite; animation-delay: calc(var(--i) * -.55s); }
.hjm-arc-twin .hjm-arc-comet, .hjm-arc-twin .hjm-arc-comet-glow { display: none; }
@keyframes hjFlow { to { stroke-dashoffset: -34; } }
@keyframes hjComet { 0% { stroke-dashoffset: 16; } 100% { stroke-dashoffset: -100; } }
@keyframes hjCometCore { 0% { stroke-dashoffset: 12.5; } 100% { stroke-dashoffset: -103.5; } }

/* intro (only after JS armed it) */
.hj-net.is-armed .hjm-arc .hjm-arc-base { stroke-dasharray: 100 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1); transition-delay: calc(.35s + var(--i) * .12s); }
.hj-net.is-armed .hjm-arc .hjm-arc-flow, .hj-net.is-armed .hjm-arc .hjm-arc-comet, .hj-net.is-armed .hjm-arc .hjm-arc-comet-glow { opacity: 0; transition: opacity .6s ease; transition-delay: calc(1.4s + var(--i) * .12s); }
.hj-net.is-armed.is-live .hjm-arc .hjm-arc-base { stroke-dashoffset: 0; }
.hj-net.is-armed.is-live .hjm-arc .hjm-arc-flow { opacity: .85; }
.hj-net.is-armed.is-live .hjm-arc .hjm-arc-comet { opacity: 1; }
.hj-net.is-armed.is-live .hjm-arc .hjm-arc-comet-glow { opacity: .4; }
.hj-net.is-armed .hj-node, .hj-net.is-armed .hj-node-sub { opacity: 0; transform: translate(-50%, -50%) scale(.4); transition: opacity .5s ease, transform .7s cubic-bezier(.2,1.4,.4,1); }
.hj-net.is-armed .hj-node-dg { transition-delay: .15s; } .hj-net.is-armed .hj-node-gx { transition-delay: .55s; } .hj-net.is-armed .hj-node-vn { transition-delay: .7s; }
.hj-net.is-armed .hj-node-th { transition-delay: .85s; } .hj-net.is-armed .hj-node-my { transition-delay: 1s; } .hj-net.is-armed .hj-node-sub { transition-delay: .6s; }
.hj-net.is-armed.is-live .hj-node, .hj-net.is-armed.is-live .hj-node-sub { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* particles (created by JS) */
.hj-net-particles circle.p-core { fill: #fff; }
.hj-net-particles circle.p-halo { fill: url(#hjHalo); }

/* nodes */
.hj-net .hj-node, .hj-net .hj-node-sub { position: absolute; left: var(--x); top: var(--y); z-index: 2; transform: translate(-50%, -50%); width: 0; height: 0; text-decoration: none; }
.hj-net .hj-node::before { content: ""; position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; } /* tap target */
.hj-node-dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--hot), 0 0 14px 4px rgba(255,79,126,.75); }
.hj-node-dot::before, .hj-node-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(255,110,150,.85); animation: hjPulse 2.6s ease-out infinite; }
.hj-node-dot::after { animation-delay: 1.3s; }
.hj-node.is-hub .hj-node-dot { left: -8px; top: -8px; width: 16px; height: 16px; background: var(--hot); box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(255,79,126,.55), 0 0 26px 8px rgba(255,79,126,.7); }
.hj-node-sub i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--hot), 0 0 10px 3px rgba(255,79,126,.6); }
@keyframes hjPulse { 0% { transform: scale(.6); opacity: .95; } 100% { transform: scale(3.1); opacity: 0; } }

/* labels: text lives in data-* (rendered via ::before/::after) so page translators never touch it */
.hj-node-label { position: absolute; top: 0; display: flex; flex-direction: column; gap: 2px; padding: 6px 10px 7px; white-space: nowrap; border-radius: 6px;
  background: rgba(8, 18, 36, .78); border: 1px solid rgba(255,140,170,.42); box-shadow: 0 6px 22px rgba(0,0,0,.35), inset 0 0 12px rgba(255,79,126,.12);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; line-height: 1.15; transition: border-color .25s ease, background .25s ease; }
.hj-node-label::before { content: attr(data-t); font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.hj-node-label::after { content: attr(data-s); font-size: 11px; font-weight: 600; color: rgba(255, 205, 218, .85); letter-spacing: .03em; }
.hj-node:hover .hj-node-label, .hj-node:focus-visible .hj-node-label { border-color: var(--hot); background: rgba(40, 10, 24, .9); }
.hj-node:focus-visible { outline: none; } .hj-node:focus-visible .hj-node-dot { outline: 2px solid #fff; outline-offset: 6px; }
.hj-node.is-hub .hj-node-label { background: linear-gradient(135deg, rgba(168,56,98,.95), rgba(120,24,60,.92)); border-color: rgba(255,190,205,.7); }
.hj-node.is-hub .hj-node-label::after { color: rgba(255,230,236,.92); }
/* placement (desktop) */
.hj-node-dg .hj-node-label { left: 18px; transform: translateY(-50%); }
.hj-node-gx .hj-node-label { right: -14px; bottom: 16px; top: auto; }
.hj-node-vn .hj-node-label { right: 16px; transform: translateY(-20%); }
.hj-node-th .hj-node-label { right: 16px; transform: translateY(-50%); }
.hj-node-my .hj-node-label { left: 16px; transform: translateY(-50%); }

/* legend */
.hj-net-legend { position: absolute; left: 16px; bottom: 14px; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  background: rgba(8,18,36,.66); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.88); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.hj-net-legend span::before { content: attr(data-t); }
.hj-net-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 0 3px rgba(255,79,126,.3); animation: hjBlink 1.6s ease-in-out infinite; }
@keyframes hjBlink { 50% { opacity: .35; } }

/* mid-size stage: title only */
@container (max-width: 560px) {
  .hj-node-label { padding: 5px 8px; }
  .hj-node-label::before { font-size: 12px; }
  .hj-node-label::after { display: none; }
}
/* small stage (phones): tighter crop + short labels */
@container (max-width: 430px) {
  .hj-net .hj-net-canvas { --rx: 298; --ry: 512; --rw: 560; --rh: 420; }
  .hj-node-label { padding: 4px 7px; border-radius: 5px; }
  .hj-node-label::before { content: attr(data-short); font-size: 11px; }
  .hj-node-dot { left: -5px; top: -5px; width: 10px; height: 10px; }
  .hj-node.is-hub .hj-node-dot { left: -6px; top: -6px; width: 12px; height: 12px; }
  .hj-node-dg .hj-node-label { left: 14px; }
  .hj-node-gx .hj-node-label { right: -10px; bottom: 11px; }
  .hj-node-vn .hj-node-label { right: 12px; transform: translateY(-10%); }
  .hj-node-th .hj-node-label { right: 12px; }
  .hj-node-my .hj-node-label { left: 12px; }
  .hjm-arc .hjm-arc-base { stroke-width: 3; } .hjm-arc .hjm-arc-flow { stroke-width: 2.2; }
  .hjm-arc .hjm-arc-comet { stroke-width: 3.4; } .hjm-arc .hjm-arc-comet-glow { stroke-width: 12; }
  .hj-net-legend { left: auto; right: 10px; bottom: 10px; padding: 4px 10px; font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .hjm-arc .hjm-arc-flow, .hjm-arc .hjm-arc-comet, .hjm-arc .hjm-arc-comet-glow, .hj-node-dot::before, .hj-node-dot::after, .hj-net-legend i { animation: none !important; }
  .hjm-arc .hjm-arc-comet, .hjm-arc .hjm-arc-comet-glow, .hj-node-dot::after { display: none; }
  .hj-node-dot::before { transform: scale(1.8); opacity: .45; }
  .hj-net.is-armed .hj-node, .hj-net.is-armed .hj-node-sub, .hj-net.is-armed .hjm-arc path { transition: none !important; }
}