/**
 * Particle Network - Interactive / Background-Flow Version
 *
 * TWO-CANVAS setup:
 *   Layer 1 (bg canvas)       – background image/video displaced along the
 *                               mouse path by the fluid velocity field.
 *                               Only the area near the mouse moves; the rest
 *                               stays still.
 *   Layer 2 (particle canvas) – the fluid particle trails (transparent base).
 *
 * Selectors:
 *   id="particles-interactive"              ← mouse/touch interactive
 *   id="particles-no-mouse-interactive"     ← auto-flow only
 *   class="particles-interactive"
 *   class="particles-no-mouse-interactive"
 *
 * Layer order (low → high):
 *   0 – Elementor bg overlay / bg video
 *   1 – bg-flow canvas  (background displaced by fluid field)
 *   2 – particle canvas (transparent, pointer-events: none)
 *   3 – Elementor content columns
 */

#particles-interactive,
#particles-no-mouse-interactive,
.particles-interactive,
.particles-no-mouse-interactive {
    position: relative;
    overflow: hidden;
}

#particles-interactive canvas.pni-bg-canvas,
#particles-no-mouse-interactive canvas.pni-bg-canvas,
.particles-interactive canvas.pni-bg-canvas,
.particles-no-mouse-interactive canvas.pni-bg-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block; z-index: 1;
    pointer-events: none;
}

#particles-interactive canvas.pni-particle-canvas,
#particles-no-mouse-interactive canvas.pni-particle-canvas,
.particles-interactive canvas.pni-particle-canvas,
.particles-no-mouse-interactive canvas.pni-particle-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block; z-index: 2;
    pointer-events: none;
}

#particles-interactive > .bg-media,
#particles-no-mouse-interactive > .bg-media,
.particles-interactive > .bg-media,
.particles-no-mouse-interactive > .bg-media {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; z-index: 0; pointer-events: none;
}

#particles-interactive > *:not(canvas):not(.bg-media),
#particles-no-mouse-interactive > *:not(canvas):not(.bg-media),
.particles-interactive > *:not(canvas):not(.bg-media),
.particles-no-mouse-interactive > *:not(canvas):not(.bg-media) {
    position: relative; z-index: 3;
}

#particles-interactive .elementor-background-overlay,
#particles-no-mouse-interactive .elementor-background-overlay,
.particles-interactive .elementor-background-overlay,
.particles-no-mouse-interactive .elementor-background-overlay,
#particles-interactive .elementor-background-video-container,
#particles-no-mouse-interactive .elementor-background-video-container,
.particles-interactive .elementor-background-video-container,
.particles-no-mouse-interactive .elementor-background-video-container { z-index: 0 !important; }

#particles-interactive .elementor-container,
#particles-interactive .elementor-row,
#particles-interactive .elementor-column,
#particles-interactive .elementor-widget-wrap,
#particles-interactive .e-con-inner,
#particles-no-mouse-interactive .elementor-container,
#particles-no-mouse-interactive .elementor-row,
#particles-no-mouse-interactive .elementor-column,
#particles-no-mouse-interactive .elementor-widget-wrap,
#particles-no-mouse-interactive .e-con-inner,
.particles-interactive .elementor-container,
.particles-interactive .elementor-row,
.particles-interactive .elementor-column,
.particles-interactive .elementor-widget-wrap,
.particles-interactive .e-con-inner,
.particles-no-mouse-interactive .elementor-container,
.particles-no-mouse-interactive .elementor-row,
.particles-no-mouse-interactive .elementor-column,
.particles-no-mouse-interactive .elementor-widget-wrap,
.particles-no-mouse-interactive .e-con-inner { position: relative; z-index: 3; }

#particles-interactive.with-overlay::before,
#particles-no-mouse-interactive.with-overlay::before,
.particles-interactive.with-overlay::before,
.particles-no-mouse-interactive.with-overlay::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(0,0,0,0.3); z-index: 1; pointer-events: none;
}