/* =========================================================================
   px-bg-pattern — Gedeelde diagonaal-patroon achtergrond.

   Eén master-SVG (assets/images/diagonal-pattern.svg); elke sectie toont daar
   een venster op. De positie van dat venster wordt per sectie (en per breakpoint)
   bepaald via drie custom properties:

     --px-bg-x        horizontale center-positie van het patroon (% van breedte)
     --px-bg-y        verticale center-positie            (% van hoogte)
     --px-bg-scale    breedte van het patroon t.o.v. de sectie
     --px-bg-opacity  transparantie van het patroon (0–1; dimt uniform bovenop
                      de in de SVG ingebakken variatie van volle/halve strepen)

   Bepaal die waardes visueel met de bg-tool: open een pagina met ?bg-tool=1
   (alleen lokaal), sleep/scroll het patroon op zijn plek en kopieer de CSS.

   De gekleurde gradient is een APARTE laag (de `background` van de sectie zelf),
   zodat die niet meerekt met het patroon.
   ========================================================================= */

.px-bg-pattern {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.px-bg-pattern::before {
    content: '';
    position: absolute;
    left: var(--px-bg-x, 50%);
    top: var(--px-bg-y, 50%);
    width: var(--px-bg-scale, 200%);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
    opacity: var(--px-bg-opacity, 1);
    background-image: url('../images/diagonal-pattern.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}