/**
 * WebGL Fluid Effect – fixed overlay, full viewport, pointer-events: none.
 * Effect sits on top of the page; clicks and hovers pass through to content.
 */

.fluid-effect-container {
    position: fixed;
    inset: 0;
    z-index: -1; /* Render behind main site content */
    pointer-events: none;
}

.fluid-effect-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let fluid lighten the earth background below without covering it */
    mix-blend-mode: screen;
    background: transparent;
}

/* Lift common Kadence / generic wrappers above the background canvas */
.has-fluid-effect #wrapper,
.has-fluid-effect .site,
.has-fluid-effect .wp-site-blocks,
.has-fluid-effect #page,
.has-fluid-effect main {
    position: relative;
    z-index: 1;
}

/**
 * Scoped / per-block mode.
 *
 * Add the class "fluid-effect-block" to any block/section you want to
 * have its own local fluid overlay (when the plugin is set to per-block mode).
 */
.fluid-effect-block {
    position: relative;
}

.fluid-effect-block .fluid-effect-scoped-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.fluid-effect-block .fluid-effect-scoped-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
    background: transparent;
}