/* Synaplic · réseau synaptique 3D du hero (bleu canard, acier, signal lime) */
.synapse {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  --px: 0; --py: 0; --sy: 0;
}
.synapse canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.55) 38%, #000 66%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.55) 38%, #000 66%);
}

/* Pages intérieures: version légère, concentrée à droite pour laisser le texte respirer */
.synapse--lite canvas {
  opacity: .85;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 30%, #000 62%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.2) 30%, #000 62%);
}

/* Tilt 3D de la carte flux, piloté par le pointeur */
.hero .hero-grid { perspective: 1400px; }
.hero .runner {
  transform: rotateY(calc(var(--hx, 0) * -6deg)) rotateX(calc(var(--hy, 0) * 5deg)) translateZ(0);
  transition: transform .5s var(--ease);
  transform-style: preserve-3d; will-change: transform;
}
.hero .runner .runner-top { transform: translateZ(18px); }

@media (prefers-reduced-motion: reduce) {
  .hero .runner { transform: none !important; transition: none; }
}