/**
 * ExpoXR Matrix Background Effect - Transparent Version
 * Version: 2.2.0-transparent
 *
 * Transparent variant: the canvas has no solid background. Falling characters
 * fade to full transparency (instead of black), allowing any CSS background-image,
 * background-color, or child <video>/<img> to show through beneath the rain.
 *
 * Usage:
 *   <div id="matrix-bg-transparent">
 *     <!-- Optional: background image via CSS, or a <video class="bg-media"> child -->
 *   </div>
 *   — or use the class: class="matrix-bg-transparent"
 *
 * Layer order (low → high):
 *   0 – container background / bg-media element
 *   1 – animation canvas (transparent, pointer-events:none)
 *   2 – any other child content
 */

#matrix-bg-transparent,
.matrix-bg-transparent {
    position: relative;
    overflow: hidden;
    /* No background set — apply your own in CSS or Elementor */
}

/* Canvas fills container and stays transparent */
#matrix-bg-transparent canvas,
.matrix-bg-transparent canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    z-index: 2 !important;  /* Above Elementor's bg overlay (z-index: 0) */
    pointer-events: none !important; /* Clicks/scrolls reach the background */
}

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

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

/* ── Elementor compatibility ───────────────────────────────────────────────
   Elementor's own background overlay sits below the canvas (keeps it visible)
   Elementor content columns/rows are lifted above the canvas (→ readable)
   ---------------------------------------------------------------------------*/
#matrix-bg-transparent .elementor-background-overlay,
.matrix-bg-transparent .elementor-background-overlay {
    z-index: 0 !important;
}

#matrix-bg-transparent .elementor-container,
#matrix-bg-transparent .elementor-row,
#matrix-bg-transparent .elementor-column,
#matrix-bg-transparent .elementor-widget-wrap,
#matrix-bg-transparent .e-con-inner,
#matrix-bg-transparent .elementor-background-video-container,
.matrix-bg-transparent .elementor-container,
.matrix-bg-transparent .elementor-row,
.matrix-bg-transparent .elementor-column,
.matrix-bg-transparent .elementor-widget-wrap,
.matrix-bg-transparent .e-con-inner {
    position: relative;
    z-index: 3;
}

.matrix-bg-transparent .elementor-background-video-container {
    z-index: 0 !important;
}

/* Optional overlay for better text readability (add class .with-overlay) */
#matrix-bg-transparent.with-overlay::before,
.matrix-bg-transparent.with-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1; /* Between media and content */
    pointer-events: none;
}

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