/* Effect: dunne rasterlijnen (rasterlijnen) — v0.1.0
   Fijne constructielijnen over een held-sectie, zoals op een podiumtekening, met kruisjes op de
   snijpunten. Alleen CSS; lijnen vervagen naar de randen (mask).
   Herbruikbaar: <div class="raster" style="--raster-x:58%;--raster-y:56%"><i class="kruis" style="--x:..;--y:.."></i></div>
   Kost: laag (statische laag, geen animatie). */
.raster {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  --raster-kleur: rgba(255, 255, 255, 0.07);
  --raster-kolommen: 6;
  background-image:
    linear-gradient(to right, var(--raster-kleur) 1px, transparent 1px),
    linear-gradient(to bottom, var(--raster-kleur) 1px, transparent 1px);
  background-size: calc(100% / var(--raster-kolommen)) 100%, 100% calc(100% / 4);
  background-position: 0 0, 0 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at var(--raster-x, 60%) var(--raster-y, 52%), #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at var(--raster-x, 60%) var(--raster-y, 52%), #000 20%, transparent 78%);
}
/* twee accentlijnen door het midden van het 3D-voorwerp */
.raster::before, .raster::after { content: ""; position: absolute; background: rgba(255, 140, 60, 0.16); }
.raster::before { left: var(--raster-x, 60%); top: 0; bottom: 0; width: 1px; }
.raster::after { top: var(--raster-y, 52%); left: 0; right: 0; height: 1px; }
.raster .kruis { position: absolute; left: var(--x); top: var(--y); width: 11px; height: 11px; transform: translate(-50%, -50%); }
.raster .kruis::before, .raster .kruis::after { content: ""; position: absolute; background: rgba(255, 255, 255, 0.38); }
.raster .kruis::before { left: 5px; top: 0; width: 1px; height: 11px; }
.raster .kruis::after { top: 5px; left: 0; height: 1px; width: 11px; }
@media (max-width: 959px) { .raster { --raster-kolommen: 4; } }