/* ============================================================
   China constellation network, Search & Evaluation page
   Abstract intelligence network on a subtle spatial grid.
   No country outline. Premium dark-navy enterprise visual.
   ============================================================ */

.cnmap-wrap{margin-top:72px;}
.cnmap-h{font-family:var(--oz-font-display);font-size:34px;line-height:1.1;letter-spacing:-0.02em;font-weight:500;color:var(--oz-midnight);margin:0 0 8px;text-wrap:balance;}
.cnmap-h em{font-style:italic;color:var(--oz-steel);font-weight:500;}
.cnmap-sub{font-size:15px;line-height:1.55;color:var(--oz-fg-2);margin:0 0 32px;max-width:760px;}

/* outer card, dark navy enterprise surface */
.cnmap{position:relative;
  background:
    radial-gradient(70% 60% at 18% 0%,   rgba(6,182,212,0.10),  transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(47,191,107,0.06), transparent 65%),
    radial-gradient(80% 70% at 50% 50%,  rgba(42,74,107,0.35),  transparent 75%),
    #0A1628;
  border:1px solid rgba(244,240,230,0.10);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 24px 56px rgba(10,22,40,0.30);
}

/* stage */
.cnmap-stage{position:relative;height:580px;}

/* subtle spatial grid backdrop */
.cnmap-stage::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(244,240,230,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,240,230,0.045) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask:radial-gradient(circle at 50% 45%, #000, transparent 88%);
          mask:radial-gradient(circle at 50% 45%, #000, transparent 88%);
  pointer-events:none;
}
.cnmap-stage::after{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(244,240,230,0.06) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask:radial-gradient(circle at 50% 45%, #000, transparent 75%);
          mask:radial-gradient(circle at 50% 45%, #000, transparent 75%);
  pointer-events:none;
}

/* network SVG */
.cnet-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}

/* edges + traveling pulses */
.cnet-line{stroke:rgba(6,182,212,0.20);stroke-width:1;fill:none;stroke-linecap:round;}
.cnet-pulse{
  stroke:var(--oz-cyan);
  stroke-width:1.6;
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:10 360;
  filter:drop-shadow(0 0 4px rgba(6,182,212,0.7));
  animation:cnet-flow 4.6s linear infinite;
}
.cnet-pulse.green{stroke:#2FBF6B;filter:drop-shadow(0 0 4px rgba(47,191,107,0.65));}
.cnet-pulse.d1{animation-duration:5.2s;animation-delay:.5s;}
.cnet-pulse.d2{animation-duration:4.8s;animation-delay:1.1s;}
.cnet-pulse.d3{animation-duration:5.6s;animation-delay:1.7s;}
.cnet-pulse.d4{animation-duration:4.4s;animation-delay:2.3s;}
.cnet-pulse.d5{animation-duration:5.0s;animation-delay:2.9s;}
.cnet-pulse.d6{animation-duration:4.6s;animation-delay:3.5s;}
@keyframes cnet-flow{
  0%   {stroke-dashoffset:370;}
  100% {stroke-dashoffset:0;}
}

/* glowing source nodes */
.cnet-node{fill:var(--oz-cyan);filter:drop-shadow(0 0 6px rgba(6,182,212,0.85));}
.cnet-node-halo{fill:none;stroke:rgba(6,182,212,0.35);stroke-width:1;}
.cnet-node-pulse{fill:none;stroke:var(--oz-cyan);stroke-width:1.2;transform-origin:center;animation:cnet-node-ping 3.6s ease-out infinite;}
.cnet-node-pulse.b{animation-delay:0s;}
.cnet-node-pulse.s{animation-delay:.45s;}
.cnet-node-pulse.u{animation-delay:.9s;}
.cnet-node-pulse.h{animation-delay:1.35s;}
.cnet-node-pulse.w{animation-delay:1.8s;}
.cnet-node-pulse.c{animation-delay:2.25s;}
.cnet-node-pulse.g{animation-delay:2.7s;}
.cnet-node-pulse.z{animation-delay:3.15s;}
@keyframes cnet-node-ping{
  0%   {r:6;opacity:0.55;}
  100% {r:24;opacity:0;}
}

/* HTML node labels under each dot */
.cnet-lab{position:absolute;transform:translate(-50%, 14px);pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:3px;}
.cnet-lab .nm{font-family:var(--oz-font-sans);font-size:13px;font-weight:600;color:var(--oz-bone);letter-spacing:-0.005em;text-shadow:0 1px 3px rgba(0,0,0,0.5);}
.cnet-lab .sub{font-family:var(--oz-font-mono);font-size:9.5px;color:rgba(244,240,230,0.55);letter-spacing:0.10em;text-transform:uppercase;}

/* ─── Signal cards (emergent glass) ─────────────────────── */
.cnmap-wisp{position:absolute;transform:translate(-50%, 0);pointer-events:none;}

.cnmap-wisp-card{
  position:absolute;
  left:50%;bottom:60px;
  transform:translate(-50%, 10px) scale(0.94);
  background:rgba(10,22,40,0.72);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(6,182,212,0.35);
  border-radius:12px;
  padding:11px 14px;
  display:flex;flex-direction:column;gap:4px;
  min-width:180px;max-width:240px;
  box-shadow:
    0 14px 36px rgba(0,0,0,0.40),
    0 0 0 1px rgba(6,182,212,0.06),
    0 0 24px rgba(6,182,212,0.18);
  opacity:0;
  animation:cn-card 4.6s ease-out forwards;
}
.cnmap-wisp-card.green{
  border-color:rgba(47,191,107,0.40);
  box-shadow:
    0 14px 36px rgba(0,0,0,0.40),
    0 0 0 1px rgba(47,191,107,0.06),
    0 0 24px rgba(47,191,107,0.20);
}
.cnmap-wisp-card .k{font-family:var(--oz-font-mono);font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--oz-cyan);font-weight:700;}
.cnmap-wisp-card.green .k{color:#3FD27F;}
.cnmap-wisp-card .v{font-size:13px;font-weight:500;color:var(--oz-bone);line-height:1.35;letter-spacing:-0.005em;}
@keyframes cn-card{
  0%   {opacity:0;transform:translate(-50%, 10px) scale(0.94);}
  18%  {opacity:0;transform:translate(-50%, 10px) scale(0.94);}
  34%  {opacity:1;transform:translate(-50%, 0) scale(1);}
  78%  {opacity:1;transform:translate(-50%, -10px) scale(1);}
  100% {opacity:0;transform:translate(-50%, -32px) scale(0.96);}
}

/* near the top edge, render the card BELOW the node so it stays fully visible */
.cnmap-wisp.below .cnmap-wisp-card{bottom:auto;top:60px;animation-name:cn-card-below;}
@keyframes cn-card-below{
  0%   {opacity:0;transform:translate(-50%, -10px) scale(0.94);}
  18%  {opacity:0;transform:translate(-50%, -10px) scale(0.94);}
  34%  {opacity:1;transform:translate(-50%, 0) scale(1);}
  78%  {opacity:1;transform:translate(-50%, 10px) scale(1);}
  100% {opacity:0;transform:translate(-50%, 32px) scale(0.96);}
}

/* origin spark at the source node when a signal emerges */
.cnmap-wisp::after{
  content:"";
  position:absolute;left:50%;top:0;
  width:9px;height:9px;border-radius:9999px;
  background:var(--c, var(--oz-cyan));
  transform:translate(-50%, -50%) scale(0.4);
  box-shadow:0 0 0 4px color-mix(in oklch, var(--c, var(--oz-cyan)) 24%, transparent);
  opacity:0;
  animation:cn-origin 4.6s ease-out forwards;
}
@keyframes cn-origin{
  0%   {opacity:0;transform:translate(-50%, -50%) scale(0.4);}
  16%  {opacity:1;transform:translate(-50%, -50%) scale(1.6);}
  60%  {opacity:0.4;}
  100% {opacity:0;}
}

/* One Zyme convergence panel, sits in the corner */
.cnmap-core{
  position:absolute;left:24px;bottom:24px;
  background:rgba(6,182,212,0.06);
  -webkit-backdrop-filter:blur(14px);
          backdrop-filter:blur(14px);
  border:1px solid rgba(6,182,212,0.30);
  border-radius:14px;padding:14px 18px;
  display:flex;flex-direction:column;gap:6px;
  max-width:300px;
  box-shadow:0 12px 36px rgba(0,0,0,0.30);
}
.cnmap-core .b{font-family:var(--oz-font-mono);font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--oz-cyan);font-weight:600;}
.cnmap-core .t{font-family:var(--oz-font-display);font-size:17px;font-weight:500;line-height:1.2;letter-spacing:-0.01em;color:var(--oz-bone);}
.cnmap-core .now{font-family:var(--oz-font-mono);font-size:10px;color:rgba(244,240,230,0.65);letter-spacing:0.06em;margin-top:2px;display:flex;align-items:center;gap:7px;}
.cnmap-core .now::before{content:"";width:6px;height:6px;border-radius:9999px;background:var(--oz-cyan);box-shadow:0 0 0 3px var(--oz-cyan-soft);flex-shrink:0;}

@media (max-width:1000px){
  .cnmap-stage{height:520px;}
  .cnmap-core{position:relative;left:auto;bottom:auto;margin:18px 22px;max-width:none;}
}
@media (max-width:720px){
  .cnmap-h{font-size:26px;}
  .cnmap-stage{height:480px;}
  .cnmap-wisp-card{min-width:150px;max-width:210px;}
  .cnmap-wisp-card .v{font-size:11.5px;}
  .cnet-lab .nm{font-size:12px;}
  .cnet-lab .sub{font-size:9px;}
}
@media (prefers-reduced-motion: reduce){
  .cnet-pulse,.cnet-node-pulse{animation:none;}
  .cnmap-wisp,.cnmap-wisp-card,.cnmap-wisp::after{animation:none;}
  .cnmap-wisp-card{opacity:1;transform:translate(-50%, 0) scale(1);}
  .cnmap-wisp::after{opacity:0.6;transform:translate(-50%, -50%) scale(1);}
}