/**
 * Matrix BG - Interactive / Background-Reflect Version
 *
 * Characters are drawn in the INVERTED colour sampled from whatever
 * background sits behind each column (image, video or CSS bg).
 * The canvas is transparent so the real background shows between characters.
 *
 * Selectors:
 *   id="matrix-bg-interactive"   or   class="matrix-bg-interactive"
 *
 * Layer order (low → high):
 *   0 – container bg / Elementor bg image/video
 *   2 – interactive canvas  (transparent base, pointer-events: none)
 *   3 – Elementor content columns
 *
 * Optional: add class .with-overlay for a dark semi-transparent overlay.
 */

#matrix-bg-interactive,
.matrix-bg-interactive {
    position: relative;
    overflow: hidden;
}

/* ── Canvas ──────────────────────────────────────────────────────────────── */
#matrix-bg-interactive canvas,
.matrix-bg-interactive 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;
}

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

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

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

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

/* ── Optional overlay ────────────────────────────────────────────────────── */
#matrix-bg-interactive.with-overlay::before,
.matrix-bg-interactive.with-overlay::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(0,0,0,0.3); z-index: 1; pointer-events: none;
}

@media (max-width: 768px) {
    #matrix-bg-interactive canvas,
    .matrix-bg-interactive canvas { opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
    #matrix-bg-interactive canvas, .matrix-bg-interactive canvas { display: none !important; }
}