/**
 * ExpoXR Matrix Background Effect - Wave Interactive Version
 * Version: 2.2.0-wave
 *
 * Mouse/touch hover propagates a radial sine-wave through the falling
 * character columns. The wavefront expands outward from the cursor; every
 * character inside the ring is displaced sideways (and slightly vertically)
 * and then returns to its column once the wave has passed.
 *
 * Usage:
 *   <section id="matrix-bg-wave"> … </section>
 *   — or —
 *   <section class="matrix-bg-wave"> … </section>
 *
 * Layer order (low → high):
 *   0 – container background / bg-media element
 *   2 – animation canvas (transparent, pointer-events: none)
 *   3 – Elementor content / other children
 */

#matrix-bg-wave,
.matrix-bg-wave {
    position: relative;
    overflow: hidden;
    cursor: crosshair;
}

/* Canvas fills container and stays transparent */
#matrix-bg-wave canvas,
.matrix-bg-wave canvas {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Optional background media helper */
#matrix-bg-wave > .bg-media,
.matrix-bg-wave > .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-wave > *:not(canvas):not(.bg-media),
.matrix-bg-wave > *:not(canvas):not(.bg-media) {
    position: relative;
    z-index: 3;
}

/* Optional solid dark background — add class "with-dark-bg" to the section */
#matrix-bg-wave.with-dark-bg,
.matrix-bg-wave.with-dark-bg {
    background-color: #0a0a0f;
}

/* ── Elementor compatibility ──────────────────────────────────────────────── */
#matrix-bg-wave .elementor-background-overlay,
.matrix-bg-wave  .elementor-background-overlay {
    z-index: 0 !important;
}

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