/* 081 — Gravity Links
   Constellation SVG : nœuds + liaisons quadratiques. anim.js courbe les
   liaisons vers le curseur (falloff smoothstep + spring élastique). */

.gravity-links {
  position: relative;
  width: min(320px, 100%);
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 50% -10%, rgba(124, 140, 255, 0.08), transparent 55%),
    var(--ml-surface, #151a24);
  border: 1px solid rgba(124, 140, 255, 0.14);
}

.gravity-links__svg {
  display: block;
  width: 100%;
  aspect-ratio: 340 / 240;
  touch-action: none;
}

.gravity-links__link {
  fill: none;
  stroke: var(--gravity-links-line, var(--ml-accent, #7c8cff));
  stroke-width: 1;
  stroke-linecap: round;
}

.gravity-links__node {
  fill: var(--gravity-links-node, var(--ml-fg, #e8eaf2));
}

.gravity-links__node--accent {
  fill: var(--gravity-links-node-accent, var(--ml-accent-2, #2dd4bf));
}

.gravity-links__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  margin: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ml-muted, #8b91a3);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  /* La toile reste statique : anim.js n'attache aucun listener et ne
     déforme rien. Règle présente pour expliciter le contrat. */
  .gravity-links__svg {
    touch-action: auto;
  }
}