/**
 * Page Designer — Motion & FX: Painted Backgrounds runtime CSS  (pd-mfx-rt-pnt-*)
 *
 * Layer sits fixed at z-index 0 behind body content. Mode-specific CSS
 * fallback patterns (Firefox / Safari) live here; Chromium overrides
 * background with the paint() function via inline style.
 */

#pd-mfx-rt-pnt-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    isolation: isolate;
    --pd-mfx-rt-pnt-tint: var(--pd-link-color, #635bff); /* v3.7.20 — Global Links accent, not admin token */
    --pd-mfx-rt-pnt-intensity: 0.35;
}

/* CSS fallbacks per mode — kick in when paint() returns nothing
   (non-Chromium) OR until the worklet module finishes loading. */
#pd-mfx-rt-pnt-layer[data-pd-mfx-rt-pnt-mode="dots"] {
    background-image: radial-gradient(
        color-mix(in srgb, var(--pd-mfx-rt-pnt-tint) calc(var(--pd-mfx-rt-pnt-intensity) * 100%), transparent) 1.6px,
        transparent 2px);
    background-size: 22px 22px;
}
#pd-mfx-rt-pnt-layer[data-pd-mfx-rt-pnt-mode="waves"] {
    background: repeating-linear-gradient(135deg,
        color-mix(in srgb, var(--pd-mfx-rt-pnt-tint) calc(var(--pd-mfx-rt-pnt-intensity) * 50%), transparent) 0 12px,
        transparent 12px 24px);
}
#pd-mfx-rt-pnt-layer[data-pd-mfx-rt-pnt-mode="mesh"] {
    background:
        radial-gradient(at 25% 20%, color-mix(in srgb, var(--pd-mfx-rt-pnt-tint) calc(var(--pd-mfx-rt-pnt-intensity) * 70%), transparent), transparent 55%),
        radial-gradient(at 85% 75%, color-mix(in srgb, var(--pd-mfx-rt-pnt-tint) calc(var(--pd-mfx-rt-pnt-intensity) * 50%), transparent), transparent 55%),
        radial-gradient(at 60% 30%, color-mix(in srgb, var(--pd-mfx-rt-pnt-tint) calc(var(--pd-mfx-rt-pnt-intensity) * 30%), transparent), transparent 60%);
}
#pd-mfx-rt-pnt-layer[data-pd-mfx-rt-pnt-mode="grain"] {
    background-image:
        radial-gradient(rgba(0,0,0,calc(var(--pd-mfx-rt-pnt-intensity) * 0.18)) 0.5px, transparent 1px),
        radial-gradient(rgba(0,0,0,calc(var(--pd-mfx-rt-pnt-intensity) * 0.12)) 0.5px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1px 1px;
}

/* Body must allow the layer to sit underneath. Don't force overflow:hidden
   — that would break sticky elements + scroll. The layer is position:fixed
   anyway so it's already viewport-local. */
body { position: relative; }

@media (prefers-reduced-motion: reduce) {
    /* Painted backgrounds are static (no animation), so reduced-motion is
       not a hard kill — but lighten intensity for visual calm. */
    #pd-mfx-rt-pnt-layer { opacity: 0.6; }
}