/**
 * Page Designer — SVG Filter FX Block CSS  (pd-blk-svgfx-*)
 *
 * Loaded inside iframe AND on published pages. Each container with
 * data-pd-svgfx-on="1" gets element.style.filter = "url(#pd-blk-svgfx-<preset>)"
 * applied by the runtime. This stylesheet provides:
 *   - the hidden SVG defs container styling
 *   - safety overflow visible (filters can paint outside the box)
 *   - reduced-motion media query (collapses every animated filter to
 *     hold-still since SMIL keeps running unless explicitly stopped)
 */
[data-pd-svgfx-on="1"] {
    overflow: visible;
}

/* Blend nested blocks — when data-pd-svgfx-blend-mode is anything except
   "off" (or absent), nested children blend with the filtered element
   underneath via the chosen CSS mix-blend-mode. */
[data-pd-svgfx-on="1"][data-pd-svgfx-blend-mode]:not([data-pd-svgfx-blend-mode=""]):not([data-pd-svgfx-blend-mode="off"]) > * {
    mix-blend-mode: var(--pd-svgfx-blend-content-mode, normal);
}
.pd-blk-svgfx-svg-defs {
    position: absolute;
    width: 0; height: 0;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
}

/* ── SFX (Text) CSS-effect presets ────────────────────────────────────
   Holographic + Halftone are delivered as background-clip:text CSS rules
   (written per-element by pd_dsp_sfx_text_filter.js and baked into the
   saved page) — SVG filters cannot produce a position-varying rainbow or a
   true dot lattice. Only the holo shimmer needs a keyframe; the gradient
   ends on the same hue it starts (red→red) so the scroll loops seamlessly. */
@keyframes pd-sfxt-holo-shimmer {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}