/* constellation.css — S4/S5 SVG interaction layer.
 * Namespace: --zwc-* / .zwc-* only. Palette comes from --zw-* tokens. */
:root {
  --zwc-mobile-w: 920px;
  --zwc-arch-mobile-w: 900px;
  --zwc-raise: -4px;
}

.zw-mount { position: relative; isolation: isolate; }
#zw-constellation > img,
#zw-constellation > svg { aspect-ratio: 1120 / 620; }
#zw-ecosystem > img,
#zw-ecosystem > svg { aspect-ratio: 1120 / 620; }
.zwc-diagram { overflow: visible; }
.zwc-diagram * { transform-box: fill-box; transform-origin: center; }

.zwc-inline .zwc-product-node,
.zwc-inline .zwc-arch-card {
  cursor: pointer;
  outline: none;
}
.zwc-inline .zwc-product-node .zwc-card-shell,
.zwc-inline .zwc-arch-card .zwc-product-shell {
  transition:
    stroke-width var(--zw-dur-fast) var(--zw-ease),
    filter var(--zw-dur-base) var(--zw-ease);
}
.zwc-inline .zwc-product-node:hover .zwc-card-shell,
.zwc-inline .zwc-product-node:focus-visible .zwc-card-shell,
.zwc-inline .zwc-arch-card:hover .zwc-product-shell,
.zwc-inline .zwc-arch-card:focus-visible .zwc-product-shell {
  stroke-width: 3;
  filter: drop-shadow(0 10px 16px var(--zw-brand-soft));
}

/* S4: active constellation branch */
.zwc-inline.zwc-constellation [data-zwc-product] {
  transition:
    opacity var(--zw-dur-base) var(--zw-ease),
    transform var(--zw-dur-base) var(--zw-ease),
    filter var(--zw-dur-base) var(--zw-ease),
    stroke-width var(--zw-dur-base) var(--zw-ease);
}
.zwc-inline.zwc-constellation[data-active] .zwc-product-branch,
.zwc-inline.zwc-constellation[data-active] .zwc-skill-node,
.zwc-inline.zwc-constellation[data-active] .zwc-product-card,
.zwc-inline.zwc-constellation[data-active] .zwc-ability {
  opacity: .2;
}
.zwc-inline.zwc-constellation[data-active] .zwc-hub,
.zwc-inline.zwc-constellation[data-active="tuve"] [data-zwc-product="tuve"],
.zwc-inline.zwc-constellation[data-active="agenttable"] [data-zwc-product="agenttable"] {
  opacity: 1;
}
.zwc-inline.zwc-constellation[data-active] .zwc-flow-line {
  opacity: .18;
  animation-play-state: paused;
}
.zwc-inline.zwc-constellation[data-active="tuve"] .zwc-flow-line[data-zwc-product="tuve"],
.zwc-inline.zwc-constellation[data-active="agenttable"] .zwc-flow-line[data-zwc-product="agenttable"] {
  opacity: 1;
  stroke-width: 4;
  animation-play-state: running;
  animation-duration: 1.2s;
}
.zwc-inline.zwc-constellation[data-active="tuve"] .zwc-ability[data-zwc-product="tuve"],
.zwc-inline.zwc-constellation[data-active="agenttable"] .zwc-ability[data-zwc-product="agenttable"] {
  transform: translateY(var(--zwc-raise));
  filter: drop-shadow(0 10px 14px var(--zw-brand-soft));
}
.zwc-inline.zwc-constellation[data-active="tuve"] .zwc-product-card[data-zwc-product="tuve"] .zwc-card-shell,
.zwc-inline.zwc-constellation[data-active="agenttable"] .zwc-product-card[data-zwc-product="agenttable"] .zwc-card-shell {
  stroke-width: 3;
}

/* S5: light architecture focus */
.zwc-inline.zwc-ecosystem [data-zwc-arch] {
  transition:
    opacity var(--zw-dur-base) var(--zw-ease),
    transform var(--zw-dur-base) var(--zw-ease),
    filter var(--zw-dur-base) var(--zw-ease),
    stroke-width var(--zw-dur-base) var(--zw-ease);
}
.zwc-inline.zwc-ecosystem[data-active] [data-zwc-arch] {
  opacity: .24;
}
.zwc-inline.zwc-ecosystem[data-active] .zwc-base-layer,
.zwc-inline.zwc-ecosystem[data-active="tuve"] [data-zwc-arch="tuve"],
.zwc-inline.zwc-ecosystem[data-active="agenttable"] [data-zwc-arch="agenttable"],
.zwc-inline.zwc-ecosystem[data-active="ziwei"] [data-zwc-arch="ziwei"] {
  opacity: 1;
}
.zwc-inline.zwc-ecosystem[data-active] .zwc-lift-line,
.zwc-inline.zwc-ecosystem[data-active] .zwc-skill-line,
.zwc-inline.zwc-ecosystem[data-active] .zwc-orch-line {
  opacity: .18;
  animation-play-state: paused;
}
.zwc-inline.zwc-ecosystem[data-active="tuve"] [data-zwc-arch="tuve"].zwc-lift-line,
.zwc-inline.zwc-ecosystem[data-active="agenttable"] [data-zwc-arch="agenttable"].zwc-lift-line,
.zwc-inline.zwc-ecosystem[data-active="ziwei"] [data-zwc-arch="ziwei"].zwc-lift-line,
.zwc-inline.zwc-ecosystem[data-active="tuve"] [data-zwc-arch="tuve"].zwc-skill-line,
.zwc-inline.zwc-ecosystem[data-active="agenttable"] [data-zwc-arch="agenttable"].zwc-skill-line,
.zwc-inline.zwc-ecosystem[data-active="ziwei"] [data-zwc-arch="ziwei"].zwc-orch-line {
  opacity: 1;
  stroke-width: 3;
  animation-play-state: running;
  animation-duration: 1.4s;
}
.zwc-inline.zwc-ecosystem[data-active="tuve"] .zwc-arch-card[data-zwc-arch="tuve"],
.zwc-inline.zwc-ecosystem[data-active="agenttable"] .zwc-arch-card[data-zwc-arch="agenttable"],
.zwc-inline.zwc-ecosystem[data-active="ziwei"] .zwc-arch-card[data-zwc-arch="ziwei"] {
  transform: translateY(var(--zwc-raise));
  filter: drop-shadow(0 12px 18px var(--zw-brand-soft));
}

@media (max-width: 900px) {
  #zw-constellation > img,
  #zw-constellation > svg {
    width: var(--zwc-mobile-w);
    min-width: var(--zwc-mobile-w);
    max-width: none;
  }
  #zw-ecosystem > img,
  #zw-ecosystem > svg {
    width: var(--zwc-arch-mobile-w);
    min-width: var(--zwc-arch-mobile-w);
    max-width: none;
  }
}

@media (max-width: 560px) {
  :root {
    --zwc-mobile-w: 860px;
    --zwc-arch-mobile-w: 840px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zwc-diagram *,
  .zwc-diagram .zwc-flow-line,
  .zwc-diagram .zwc-orch-line,
  .zwc-diagram .zwc-skill-line {
    animation: none !important;
    transition: none !important;
  }
  .zwc-inline.zwc-constellation .zwc-ability,
  .zwc-inline.zwc-ecosystem .zwc-arch-card {
    transform: none !important;
  }
}