/* =========================================================================
   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 custom properties:

     --px-bg-x        horizontale center-positie van het patroon (% van breedte)
     --px-bg-top-w    verticale center-positie t.o.v. de sectie-TOP, in % van de
                      sectie-BREEDTE (via margin-top; % marges rekenen tegen de
                      breedte). Hoogte-onafhankelijk: het venster verschuift dus
                      niet wanneer de live sectiehoogte afwijkt van Figma.
                      Modules die dit zetten, zetten --px-bg-y op 0%.
     --px-bg-y        LEGACY verticale center-positie (% van hoogte). Alleen nog
                      als fallback voor niet-gemigreerde plekken.
     --px-bg-scale    breedte van het patroon t.o.v. de sectie
     --px-bg-image    patroon-bestand; default de zwarte master. Zet de lichte
                      variant (diagonal-pattern-light.svg) voor lichte strepen
                      op donkere vlakken (bv. px-cta dark paneel). In module-CSS
                      ALTIJD een absolute /wp-content/... URL gebruiken (BB
                      bundelt module-CSS, relatieve paden breken dan).
     --px-bg-opacity  transparantie van het patroon (0–1)

   VENSTER-WAARDES BEREKENEN (3-7-2026, wiskundig geverifieerd tegen renders):
   uit de Figma-sectie + de "Vector"-node (AABB = absoluteBoundingBox):
     inkt_breedte = AABB.width x 0.715306   (de SVG bevat alleen de inkt-bounds,
                                             niet de wiskundige AABB van de
                                             geroteerde vector!)
     inkt_center  = AABB-center - 0.00484 x AABB.width  (beide assen)
     --px-bg-x     = (inkt_cx - sectie_x) / sectie_breedte
     --px-bg-top-w = (inkt_cy - sectie_y) / sectie_breedte
     --px-bg-scale = inkt_breedte / sectie_breedte
   Zie backups/bg-pattern-20260703/README.md voor het bewijs. Fijnslijpen kan
   daarna visueel met de bg-tool (?bg-tool=1, alleen lokaal).

   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%);
    margin-top: var(--px-bg-top-w, 0%);
    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: var(--px-bg-image, url('../images/diagonal-pattern.svg'));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

/* =========================================================================
   px-bg-pattern--reveal — GEDEELDE patroon-reveal (#11/#12/#59/#60/#85).

   Eén definitie voedt twee modules met exact dezelfde beweging + tuning:
     · px-testimonials (en andere donkere secties):
           .px-reveal-ready .px-bg-pattern--reveal::before
     · px-photo-banner:
           .px-reveal-ready .px-photo-banner--reveal .px-photo-banner__overlay
   Beide selectors staan telkens in hetzelfde regelblok, zodat het patroon in
   de foto-banner precies meebeweegt met de testimonials (de "gelinkt"-eis van
   #85). Afstellen doe je centraal met de vier tokens in base.css
   (--px-ease-pattern-reveal / --px-pattern-reveal-shift / --px-pattern-reveal-scale
   + --px-duration-pattern-reveal / --px-delay-pattern-reveal).

   Zonder JS wordt .px-reveal-ready nooit gezet, dus dan staat het patroon
   gewoon meteen vol in beeld (geen verborgen begintoestand).

   DEFAULT-beweging = "Diagonale veeg": het patroon staat stil terwijl een
   schuine gradient-mask het van LINKSBOVEN naar rechtsonder in beeld veegt
   (afgeleid uit de Figma-voorbeelden 261:30241 / 261:30249). Een andere
   beweging kies je per sectie met data-reveal op de root; zie onderaan.
   ========================================================================= */

/* Begintoestand — de mask verbergt het patroon: het transparante deel van de
   schuine gradient ligt over het venster, het opake deel staat rechtsonder. */
.px-reveal-ready .px-bg-pattern--reveal::before,
.px-reveal-ready .px-photo-banner--reveal .px-photo-banner__overlay {
    -webkit-mask-image: linear-gradient(135deg, #000 0 35%, transparent 64%);
            mask-image: linear-gradient(135deg, #000 0 35%, transparent 64%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 260% 260%;
            mask-size: 260% 260%;
    -webkit-mask-position: 100% 100%;
            mask-position: 100% 100%;
    transition:
        -webkit-mask-position var(--px-duration-pattern-reveal) var(--px-ease-pattern-reveal) var(--px-delay-pattern-reveal),
                mask-position var(--px-duration-pattern-reveal) var(--px-ease-pattern-reveal) var(--px-delay-pattern-reveal);
}

/* Eindtoestand — de mask schuift het opake deel over het venster: het patroon
   wordt vrijgegeven vanuit de hoek linksboven. */
.px-reveal-ready .px-bg-pattern--reveal.is-inview::before,
.px-reveal-ready .px-photo-banner--reveal.is-inview .px-photo-banner__overlay {
    -webkit-mask-position: 0% 0%;
            mask-position: 0% 0%;
}

/* ---- #60 · LINKERZIJDE VRIJ VAN PATROON --------------------------------
   In het ontwerp is aan de linkerkant (bijna) geen streep zichtbaar. Deze
   scrim dekt de linkerzijde af met de EIGEN sectie-gradient (identiek aan de
   sectie-bg), zodat daar geen patroon doorkomt. Twee tokens regelen de
   overgang; alles rechts van --px-bg-fade-end toont het patroon volledig.
   De scrim ligt op z-index -1 en, als latere pseudo-laag, boven het patroon
   (::before) maar onder de content. */
.px-bg-pattern--fade-left::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--section-bg, var(--Gradient-Primary));
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 var(--px-bg-fade-solid, 8%), transparent var(--px-bg-fade-end, 38%));
            mask-image: linear-gradient(90deg, #000 0, #000 var(--px-bg-fade-solid, 8%), transparent var(--px-bg-fade-end, 38%));
}

/* Toegankelijkheid: wie minder beweging wil, krijgt het patroon meteen op zijn
   plek (px-reveal.js zet .is-inview direct, dus zonder overgang = zichtbaar). */
@media (prefers-reduced-motion: reduce) {
    .px-reveal-ready .px-bg-pattern--reveal::before,
    .px-reveal-ready .px-photo-banner--reveal .px-photo-banner__overlay {
        transition: none !important;
    }
}

/* BB-editor: nooit een verborgen begintoestand tonen — patroon altijd vol in
   beeld zodat de klant de sectie normaal ziet en kan bewerken. */
.fl-builder-edit .px-bg-pattern--reveal::before,
.fl-builder-edit .px-photo-banner--reveal .px-photo-banner__overlay {
    opacity: var(--px-bg-opacity, 1) !important;
    -webkit-mask-image: none !important;
            mask-image: none !important;
    transform: translate(-50%, -50%) !important;
    transition: none !important;
}

/* =========================================================================
   ALTERNATIEVE BEWEGINGEN (opt-in via data-reveal op de sectie-root).

   De DEFAULT (hierboven, geen attribuut nodig) is "Diagonale veeg" (wipe).
   Wil je een andere beweging, zet dan data-reveal="…" op de module-root:

     data-reveal="slide"  → horizontaal inschuiven van rechts (oorspronkelijk
                            #59/#60-voorstel: patroon komt van rechts in beeld).
     data-reveal="diag"   → diagonaal inschuiven (blok-fade langs de schuine as).
     data-reveal="streak" → strepen waaieren open (lange mask + kleine drift).
     data-reveal="zoom"   → inzoomen tot rust (begint groter + verschoven).

   Elke variant leest exact dezelfde vier tokens, dus testimonials én foto-
   banner blijven gelinkt. De transform-varianten worden overgeslagen wanneer
   ook de drift (bg_motion) aan staat (:not(.px-bg-pattern--drift)), zodat de
   transform niet dubbel wordt aangestuurd; dan blijft de default-veeg over.
   ========================================================================= */

/* data-reveal="slide" — van rechts inschuiven + faden. */
.px-reveal-ready [data-reveal="slide"].px-bg-pattern--reveal:not(.px-bg-pattern--drift)::before,
.px-reveal-ready [data-reveal="slide"].px-photo-banner--reveal .px-photo-banner__overlay {
    -webkit-mask-image: none;
            mask-image: none;
    opacity: 0;
    transform: translate(-50%, -50%) translateX(var(--px-pattern-reveal-shift, 48px));
    transition:
        opacity   var(--px-duration-pattern-reveal) var(--px-ease-pattern-reveal) var(--px-delay-pattern-reveal),
        transform var(--px-duration-pattern-reveal) var(--px-ease-pattern-reveal) var(--px-delay-pattern-reveal);
}
.px-reveal-ready [data-reveal="slide"].px-bg-pattern--reveal.is-inview:not(.px-bg-pattern--drift)::before,
.px-reveal-ready [data-reveal="slide"].px-photo-banner--reveal.is-inview .px-photo-banner__overlay {
    opacity: var(--px-bg-opacity, 1);
    transform: translate(-50%, -50%) translateX(0);
}

/* data-reveal="diag" — diagonaal inschuiven (blok-fade). */
.px-reveal-ready [data-reveal="diag"].px-bg-pattern--reveal:not(.px-bg-pattern--drift)::before,
.px-reveal-ready [data-reveal="diag"].px-photo-banner--reveal .px-photo-banner__overlay {
    -webkit-mask-image: none;
            mask-image: none;
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--px-pattern-reveal-shift, 48px), var(--px-pattern-reveal-shift, 48px));
    transition:
        opacity   var(--px-duration-pattern-reveal) var(--px-ease-pattern-reveal) var(--px-delay-pattern-reveal),
        transform var(--px-duration-pattern-reveal) var(--px-ease-pattern-reveal) var(--px-delay-pattern-reveal);
}
.px-reveal-ready [data-reveal="diag"].px-bg-pattern--reveal.is-inview:not(.px-bg-pattern--drift)::before,
.px-reveal-ready [data-reveal="diag"].px-photo-banner--reveal.is-inview .px-photo-banner__overlay {
    opacity: var(--px-bg-opacity, 1);
    transform: translate(-50%, -50%) translate(0, 0);
}

/* data-reveal="streak" — lange gefeatherde mask + kleine diagonale drift. */
.px-reveal-ready [data-reveal="streak"].px-bg-pattern--reveal:not(.px-bg-pattern--drift)::before,
.px-reveal-ready [data-reveal="streak"].px-photo-banner--reveal .px-photo-banner__overlay {
    opacity: 0;
    transform: translate(-50%, -50%) translate(calc(var(--px-pattern-reveal-shift, 48px) * 0.6), calc(var(--px-pattern-reveal-shift, 48px) * 0.6));
    -webkit-mask-image: linear-gradient(135deg, #000 0 8%, transparent 80%);
            mask-image: linear-gradient(135deg, #000 0 8%, transparent 80%);
    -webkit-mask-size: 300% 300%;
            mask-size: 300% 300%;
    -webkit-mask-position: 100% 100%;
            mask-position: 100% 100%;
    transition:
        opacity   var(--px-duration-pattern-reveal) var(--px-ease-pattern-reveal) var(--px-delay-pattern-reveal),
        transform var(--px-duration-pattern-reveal) var(--px-ease-pattern-reveal) var(--px-delay-pattern-reveal),
        -webkit-mask-position calc(var(--px-duration-pattern-reveal) * 1.25) var(--px-ease-pattern-reveal) var(--px-delay-pattern-reveal),
                mask-position calc(var(--px-duration-pattern-reveal) * 1.25) var(--px-ease-pattern-reveal) var(--px-delay-pattern-reveal);
}
.px-reveal-ready [data-reveal="streak"].px-bg-pattern--reveal.is-inview:not(.px-bg-pattern--drift)::before,
.px-reveal-ready [data-reveal="streak"].px-photo-banner--reveal.is-inview .px-photo-banner__overlay {
    opacity: var(--px-bg-opacity, 1);
    transform: translate(-50%, -50%) translate(0, 0);
    -webkit-mask-position: 0% 0%;
            mask-position: 0% 0%;
}

/* data-reveal="zoom" — inzoomen tot rust. */
.px-reveal-ready [data-reveal="zoom"].px-bg-pattern--reveal:not(.px-bg-pattern--drift)::before,
.px-reveal-ready [data-reveal="zoom"].px-photo-banner--reveal .px-photo-banner__overlay {
    -webkit-mask-image: none;
            mask-image: none;
    opacity: 0;
    transform: translate(-50%, -50%) scale(var(--px-pattern-reveal-scale, 1.14)) translate(calc(var(--px-pattern-reveal-shift, 48px) * 0.35), calc(var(--px-pattern-reveal-shift, 48px) * 0.35));
    transition:
        opacity   var(--px-duration-pattern-reveal) var(--px-ease-pattern-reveal) var(--px-delay-pattern-reveal),
        transform var(--px-duration-pattern-reveal) var(--px-ease-pattern-reveal) var(--px-delay-pattern-reveal);
}
.px-reveal-ready [data-reveal="zoom"].px-bg-pattern--reveal.is-inview:not(.px-bg-pattern--drift)::before,
.px-reveal-ready [data-reveal="zoom"].px-photo-banner--reveal.is-inview .px-photo-banner__overlay {
    opacity: var(--px-bg-opacity, 1);
    transform: translate(-50%, -50%) scale(1) translate(0, 0);
}

/* =========================================================================
   px-bg-pattern--drift — OPTIONELE, subtiele beweging (opt-in).

   Zet je los aan via het veld "Bewegend achtergrondpatroon" op de module.
   Zonder deze modifier blijft het patroon exact zoals het was (statisch).

   Twee dingen gebeuren er:
     1. het patroon faadt zachtjes in bij het laden;
     2. het patroon schuift daarna heel langzaam en oneindig heen en weer.

   Belangrijk voor de samenstelling met --px-bg-x/y/scale: die zetten left/top/
   width op de pseudo-laag, niet de transform. De centrering blijft in elk
   keyframe de eerste translate (translate(-50%, -50%)); de beweging is een
   APARTE, tweede translate erachteraan. Zo wordt de per-sectie-positie nooit
   overschreven. Begin- en eindframe staan op 0px, dus die vallen samen met de
   statische stand. We animeren de transform zelf (niet losse custom properties),
   zodat de drift vloeiend interpoleert zonder @property-registratie.

   Alleen de decoratieve pseudo-laag beweegt; er verschuift geen layout
   (het patroon ligt op z-index -1 en pointer-events: none).
   ========================================================================= */
.px-bg-pattern--drift::before {
    /* Infaden bij laden + traag, oneindig schuiven. Timing uit de duur-tokens:
       infaden = normaal; schuiven = een ruim veelvoud van slow voor een rustige drift.
       De drift-keyframes nemen de centrering translate(-50%, -50%) telkens mee als
       eerste deel, zodat de per-sectie-positie (left/top/width via --px-bg-x/y/scale)
       intact blijft. Begin- en eindframe vallen samen met de statische stand. */
    animation:
        px-bg-pattern-fade var(--px-duration-normal) var(--px-ease-out) both,
        px-bg-pattern-drift calc(var(--px-duration-slow) * 80) var(--px-ease-in-out) infinite;
}

@keyframes px-bg-pattern-fade {
    from { opacity: 0; }
    to   { opacity: var(--px-bg-opacity, 1); }
}

@keyframes px-bg-pattern-drift {
    0%, 100% {
        transform: translate(-50%, -50%) translate(0px, 0px);
    }
    50% {
        transform: translate(-50%, -50%) translate(var(--D2), var(--D1));
    }
}

/* Toegankelijkheid: wie minder beweging wil, krijgt de statische stand terug. */
@media (prefers-reduced-motion: reduce) {
    .px-bg-pattern--drift::before {
        transform: translate(-50%, -50%);
        animation: none;
    }
}