/**
 * Orb Animation — Interactive Styles
 *
 * Mirrors orb-animation.css but targets the interactive variant.
 * The container gets a crosshair cursor to signal interactivity;
 * links and buttons inside restore the default pointer cursor.
 *
 * Usage: Add id="orb-animation-interactive"
 *        OR class="orb-animation-interactive"
 *        to any Elementor Section / Container.
 *
 * @package ExpoXR
 * @version 1.0.0
 */

/* ── Container ──────────────────────────────────────────────────────────────── */
#orb-animation-interactive,
.orb-animation-interactive {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* Crosshair signals that the section is interactive */
    cursor: crosshair;
}

/* ── Canvas (background drawing layer) ──────────────────────────────────────── */
#orb-animation-interactive .orb-canvas,
.orb-animation-interactive .orb-canvas {
    position: absolute !important;
    top:       0 !important;
    left:      0 !important;
    width:     100% !important;
    height:    100% !important;
    max-width:  100% !important;
    max-height: 100% !important;
    z-index:       0 !important;    /* Behind all content */
    pointer-events: none !important; /* Events go to the container, not the canvas */
    display: block !important;
    margin:  0 !important;
    padding: 0 !important;
    border:  none !important;
    object-fit: cover;
    contain:    strict;
    overflow:   hidden;
}

/* ── Content sits above the canvas ──────────────────────────────────────────── */
#orb-animation-interactive > *:not(.orb-canvas),
.orb-animation-interactive > *:not(.orb-canvas) {
    position: relative;
    z-index:  1;
}

/* ── Elementor inner element stacking ───────────────────────────────────────── */
#orb-animation-interactive .elementor-element,
#orb-animation-interactive .e-con,
#orb-animation-interactive .e-con-inner,
#orb-animation-interactive .elementor-widget-wrap,
#orb-animation-interactive .elementor-container,
.orb-animation-interactive .elementor-element,
.orb-animation-interactive .e-con,
.orb-animation-interactive .e-con-inner,
.orb-animation-interactive .elementor-widget-wrap,
.orb-animation-interactive .elementor-container {
    position: relative;
    z-index:  1;
}

#orb-animation-interactive .elementor-widget,
.orb-animation-interactive .elementor-widget {
    position: relative;
    z-index:  1;
}

/* ── Restore normal cursor for clickable elements inside the container ───────── */
#orb-animation-interactive a,
#orb-animation-interactive button,
#orb-animation-interactive [role="button"],
.orb-animation-interactive a,
.orb-animation-interactive button,
.orb-animation-interactive [role="button"] {
    cursor: pointer;
}

/* ── Responsive: mobile ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    #orb-animation-interactive .orb-canvas,
    .orb-animation-interactive .orb-canvas {
        will-change: transform;
    }
}

/* ── Responsive: tablet ─────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    #orb-animation-interactive .orb-canvas,
    .orb-animation-interactive .orb-canvas {
        will-change: transform;
    }
}

/* ── Responsive: desktop ────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
    #orb-animation-interactive .orb-canvas,
    .orb-animation-interactive .orb-canvas {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}