/**
 * Attraction Particles Animation - Transparent Version
 * 
 * Transparent variant: animation canvas floats above any background
 * image or video set on the container.
 *
 * Usage:
 *   <div id="attraction-particles-transparent">
 *     <!-- Optional: background image via CSS background-image, or a <video> / <img> child -->
 *     <!-- Optional: child content sits above the animation via z-index: 2 -->
 *   </div>
 *
 * Layer order (low → high):
 *   0 – container background-image / background-color (CSS)
 *   0 – <video> or <img> background media (absolute, object-fit:cover)
 *   1 – animation canvas (transparent, pointer-events:none)
 *   2 – any other child content
 */

#attraction-particles-transparent,
.attraction-particles-transparent {
    position: relative;
    overflow: hidden;
    /* No background-color here — set your own in Elementor or CSS */
}

/* Canvas floats above background media */
#attraction-particles-transparent canvas,
.attraction-particles-transparent canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Clicks pass through to background */
    z-index: 2; /* Above Elementor's bg overlay (z-index: 0) */
}

/* Background media helper (optional <video> or <img> inside the container) */
#attraction-particles-transparent > .bg-media,
.attraction-particles-transparent > .bg-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

/* Child content stays above the animation canvas */
#attraction-particles-transparent > *:not(canvas):not(.bg-media),
.attraction-particles-transparent > *:not(canvas):not(.bg-media) {
    position: relative;
    z-index: 3;
}

/* ── Elementor compatibility ────────────────────────────────────────────── */
#attraction-particles-transparent .elementor-background-overlay,
.attraction-particles-transparent .elementor-background-overlay {
    z-index: 0 !important;
}

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

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