/* Helveron hero-network, opmaaklaag. Voeg dit toe aan je globale stylesheet. */

/* De hero-container. overflow verbergt het canvas netjes binnen de sectie. */
[data-hero-network] { position: relative; overflow: hidden; }

/* Het canvas ligt achter alles, vult de hero en vangt geen muis.
   De mask laat het netwerk aan alle randen zacht in de achtergrond faden
   (site-breed, besluit Shyen 02-08). */
.hero-net-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 92% 92% at 50% 42%, #000 50%, transparent 98%);
  mask-image: radial-gradient(ellipse 92% 92% at 50% 42%, #000 50%, transparent 98%);
}

/* Optionele leessluier: donker links, zodat je tekst contrast houdt boven het netwerk.
   Plaats <div class="hero-net-scrim"></div> als eerste kind na het canvas. */
.hero-net-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,10,.9), rgba(10,10,10,.55) 42%, transparent 74%);
}

/* Zet je hero-inhoud boven het canvas en de sluier. */
[data-hero-network] > :not(.hero-net-canvas):not(.hero-net-scrim) { position: relative; z-index: 1; }