/* FX Cursor Fluid Shockwave -- v1.0.0 */
/*
 * At runtime the script wraps each .fxe-cfs container in a sibling host
 * .fxe-cfs-host and appends the VFX-JS canvas inside THAT host (not inside
 * .fxe-cfs itself). Reason: VFX-JS sets opacity:0 on the target container
 * to reveal the distorted texture in its place — a child canvas would be
 * hidden too. The host stays fully opaque.
 */
.fxe-cfs-host {
    position: relative;
    overflow: hidden;
    display: block;
}
.fxe-cfs {
    position: relative;
}

/*
 * "Apply: Background" mode. The script injects a sibling .fxe-cfs-bg-proxy
 * inside the host that mirrors only the container's background-* / border /
 * radius / shadow. VFX-JS captures THAT proxy, not the container.
 *
 * Stacking inside .fxe-cfs-host (background mode):
 *   z=0  .fxe-cfs-bg-proxy   (opacity:0 after vfx.add — invisible)
 *   z=1  <canvas>            (the distorted background texture)
 *   z=2  .fxe-cfs            (the original container; children render crisp)
 *
 * "Apply: All (Background Layer)" mode — same .fxe-cfs-bg-proxy host but its
 * contents are a sanitized deep clone of the entire .fxe-cfs subtree
 * (headings, text, images included). VFX-JS captures the clone; the live
 * container stays fully visible on top of the canvas, so cursor distortion
 * ripples behind crisp DOM children rather than warping them.
 *
 * Stacking inside .fxe-cfs-host (all-background mode):
 *   z=0  .fxe-cfs-bg-proxy   (clone of container, hidden via opacity:0 by VFX-JS)
 *   z=1  <canvas>            (the distorted full-content texture)
 *   z=2  .fxe-cfs            (live container, fully visible, crisp interactive)
 *
 * In "Apply: All" mode no proxy is injected and the container is hidden by
 * VFX (opacity:0); its z-index:2 is harmless because opacity:0 takes it
 * out of the visual stack.
 */
.fxe-cfs-bg-proxy {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    box-sizing: border-box;
}
.fxe-cfs-host > .fxe-cfs {
    position: relative;
    z-index: 2;
}

/*
 * "Apply: All (Background Layer)" needs the live container's frame
 * (background, border, radius, shadow) hidden so the canvas behind
 * it shows through. Done via a class instead of inline styles so
 * Elementor's live-preview inline values (e.g. a bg-color set
 * via the panel) survive — we strip the class to read the live
 * cascaded color, then re-add it. Inline-style wipes would clobber
 * Elementor's inline values irreversibly because the shorthand
 * `background` setter expands and overwrites all longhand.
 */
.fxe-cfs-bg-wiped {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-top-width: 0 !important;
    border-right-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left-width: 0 !important;
    border-top-style: none !important;
    border-right-style: none !important;
    border-bottom-style: none !important;
    border-left-style: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: none !important;
}