/**
 * Fluid Simulation Particle Effect - Transparent Version
 *
 * Transparent variant: the canvas has no solid background. Particle trails
 * fade to full transparency (instead of black), so any CSS background-image,
 * background-color, or child <video>/<img> shows through beneath the effect.
 *
 * Selectors  (choose one):
 *   ID  →  id="particles-transparent"           (interactive)
 *   ID  →  id="particles-no-mouse-transparent"  (non-interactive / autoplay only)
 *   Class → class="particles-transparent"
 *   Class → class="particles-no-mouse-transparent"
 *
 * Layer order (low → high):
 *   0 – container background / bg-media element
 *   2 – animation canvas  (transparent, pointer-events: none)
 *   3 – Elementor content columns / child widgets
 */

/* ── Container ──────────────────────────────────────────────────────────────*/
#particles-transparent,
#particles-no-mouse-transparent,
.particles-transparent,
.particles-no-mouse-transparent {
    position: relative;
    overflow: hidden;
    /* No background — set your own in CSS or Elementor */
}

/* ── Canvas ─────────────────────────────────────────────────────────────────*/
#particles-transparent canvas,
#particles-no-mouse-transparent canvas,
.particles-transparent canvas,
.particles-no-mouse-transparent canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;             /* Above Elementor bg overlay (z-index: 0) */
    pointer-events: none;   /* Mouse/touch events fall through to container */
    display: block;
}

/* ── Background media helper ────────────────────────────────────────────────
   Add class="bg-media" to a <video> or <img> placed inside the container.
   Elementor background video is handled automatically via the rules below.   */
#particles-transparent > .bg-media,
#particles-no-mouse-transparent > .bg-media,
.particles-transparent > .bg-media,
.particles-no-mouse-transparent > .bg-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

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

/* ── Elementor compatibility ────────────────────────────────────────────────
   Keep Elementor's own overlay / video behind the canvas,
   and lift its content columns above the canvas.                             */
#particles-transparent .elementor-background-overlay,
#particles-no-mouse-transparent .elementor-background-overlay,
.particles-transparent .elementor-background-overlay,
.particles-no-mouse-transparent .elementor-background-overlay {
    z-index: 0 !important;
}

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

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

/* ── Optional semi-transparent text overlay ─────────────────────────────────
   Add class .with-overlay to the container for better text readability.      */
#particles-transparent.with-overlay::before,
#particles-no-mouse-transparent.with-overlay::before,
.particles-transparent.with-overlay::before,
.particles-no-mouse-transparent.with-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
    pointer-events: none;
}

/* ── Mobile optimisation ────────────────────────────────────────────────────*/
@media (max-width: 768px) {
    #particles-transparent canvas,
    #particles-no-mouse-transparent canvas,
    .particles-transparent canvas,
    .particles-no-mouse-transparent canvas {
        opacity: 0.8;
    }
}