/* Stage 8 — constellation composition: scattered anchors + interconnected research flow. */

/* Give the central machinery its own clear territory. */
.transform-core {
  left:46%;
  top:39%;
  width:190px;
  height:166px;
  z-index:4;
}

/* Constellation links sit between the ambient trajectories and the foreground symbols. */
.hero-constellation {
  color:var(--accent);
  opacity:.9;
}
.connector-line {
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  opacity:.27;
  stroke-dasharray:4 10;
  animation:constellationFlow 14s linear infinite;
}
.line-core-protect,.line-represent-protect { opacity:.38; stroke-width:1.55; }
.line-core-represent { animation-duration:18s; animation-direction:reverse; }
.line-represent-protect { animation-duration:20s; }
.line-cross { opacity:.18; animation-duration:24s; animation-direction:reverse; }
.line-return { opacity:.14; animation-duration:27s; }
.connector-node {
  fill:currentColor;
  opacity:.62;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 44%,transparent));
  transform-box:fill-box;
  transform-origin:center;
  animation:constellationPulse 4.6s ease-in-out infinite;
}
.connector-node:nth-of-type(2n) { animation-delay:-1.4s; }
.connector-node:nth-of-type(3n) { animation-delay:-2.6s; }
@keyframes constellationFlow { to { stroke-dashoffset:-140; } }
@keyframes constellationPulse {
  0%,100% { opacity:.32; transform:scale(.76); }
  50% { opacity:.92; transform:scale(1.25); }
}

/* Scatter the three conceptual anchors rather than placing them as tidy blocks. */
.symbol-observe {
  left:0;
  top:7%;
  width:330px;
  height:150px;
  display:block;
  transform:translate(calc(var(--mx)*-2px),calc(var(--my)*-1px));
}
.symbol-observe .cluster-index { position:absolute; left:0; top:7px; }
.symbol-observe .symbol-orb-fingerprint { position:absolute; left:30px; top:13px; }
.symbol-observe .cluster-copy { position:absolute; left:166px; top:25px; }

.symbol-represent {
  left:18%;
  bottom:2%;
  width:390px;
  height:170px;
  display:block;
  transform:translate(calc(var(--mx)*2px),calc(var(--my)*-2px));
}
.symbol-represent .cluster-index { position:absolute; left:0; top:35px; }
.symbol-represent .representation-icons { position:absolute; left:28px; top:8px; width:235px; height:150px; }
.symbol-represent .symbol-orb-brain { left:0; top:8px; }
.symbol-represent .symbol-orb-network { right:0; bottom:1px; }
.symbol-represent .cluster-copy { position:absolute; left:230px; top:52px; min-width:210px; }

.symbol-protect {
  right:0;
  top:6%;
  width:350px;
  height:240px;
  display:block;
  transform:translate(calc(var(--mx)*3px),calc(var(--my)*2px));
}
.symbol-protect .cluster-index { position:absolute; left:0; top:12px; }
.symbol-protect .cluster-copy { position:absolute; left:42px; top:3px; min-width:250px; }
.symbol-protect .protection-icons { position:absolute; left:36px; right:0; top:64px; width:300px; height:165px; }
.symbol-protect .symbol-orb-shield { left:8px; top:8px; }
.symbol-protect .symbol-orb-key { right:5px; bottom:4px; }

/* Slightly reduce icon dominance so the relationships between objects remain visible. */
.symbol-orb-fingerprint i { font-size:8.2rem; }
.symbol-orb-brain i { font-size:6.1rem; }
.symbol-orb-network i { font-size:4.8rem; }
.symbol-orb-shield i { font-size:7rem; }
.symbol-orb-key i { font-size:4.6rem; }

/* Keep free-floating data points around the paths, not in a single band. */
.neural-cloud {
  left:16%;
  top:11%;
  width:72%;
  height:72%;
  opacity:.62;
  z-index:2;
}
.neural-cloud span:nth-child(1) { --x:13% !important; --y:32% !important; }
.neural-cloud span:nth-child(2) { --x:25% !important; --y:18% !important; }
.neural-cloud span:nth-child(3) { --x:34% !important; --y:44% !important; }
.neural-cloud span:nth-child(4) { --x:44% !important; --y:24% !important; }
.neural-cloud span:nth-child(5) { --x:51% !important; --y:58% !important; }
.neural-cloud span:nth-child(6) { --x:61% !important; --y:31% !important; }
.neural-cloud span:nth-child(7) { --x:68% !important; --y:67% !important; }
.neural-cloud span:nth-child(8) { --x:78% !important; --y:39% !important; }
.neural-cloud span:nth-child(9) { --x:86% !important; --y:61% !important; }
.neural-cloud span:nth-child(10) { --x:92% !important; --y:27% !important; }

/* More depth from the ambient tracks, but still secondary to the constellation. */
.hero-flow-band { opacity:.11; }
.hero-vector-layer { z-index:1; }
.data-path { opacity:.23; }
.accent-path { opacity:.34; }

@media (prefers-reduced-motion:reduce) {
  .connector-line,.connector-node { animation:none !important; }
}

@media (max-width:1180px) {
  .symbol-observe { transform:scale(.9) translate(calc(var(--mx)*-2px),calc(var(--my)*-1px)); transform-origin:left top; }
  .symbol-protect { transform:scale(.88) translate(calc(var(--mx)*3px),calc(var(--my)*2px)); transform-origin:right top; right:-2%; }
  .symbol-represent { transform:scale(.9) translate(calc(var(--mx)*2px),calc(var(--my)*-2px)); transform-origin:left bottom; }
  .transform-core { left:47%; }
}

@media (max-width:700px) {
  .hero-constellation { opacity:.62; }
  .symbol-observe { left:-3%; top:7%; }
  .symbol-protect { right:-16%; top:8%; }
  .symbol-represent { left:8%; bottom:-1%; }
  .transform-core { left:48%; top:41%; }
}