/**
 * Orb Animation Styles
 * Canvas-based background animation for Elementor containers
 * 
 * Usage: Add id="orb-animation" to any Elementor container
 * The animation renders as a background layer, allowing content above it
 * 
 * @package ExpoXR
 * @version 2.1.0
 */

/* Container with orb animation needs relative positioning */
#orb-animation {
    position: relative;
    overflow: hidden; /* Prevent canvas from overflowing */
    /* Force container to establish a containing block for absolute positioning */
    isolation: isolate;
}

/* Canvas positioned absolutely as background layer - does NOT affect container size */
#orb-animation .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 content */
    pointer-events: none !important; /* Don't block clicks on content above */
    display: block !important;
    /* Prevent canvas from contributing to container dimensions */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    /* Ensure canvas fills container exactly */
    object-fit: cover;
    /* Prevent canvas from affecting layout calculations */
    contain: strict;
    overflow: hidden;
}

/* Ensure all content appears above the canvas */
#orb-animation > *:not(.orb-canvas) {
    position: relative;
    z-index: 1;
}

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

/* Ensure widget content is above canvas */
#orb-animation .elementor-widget {
    position: relative;
    z-index: 1;
}

/* RESPONSIVE: Mobile optimizations */
@media (max-width: 767px) {
    /* Reduce canvas complexity on mobile by using CSS filter instead */
    #orb-animation .orb-canvas {
        /* Performance optimization for mobile */
        will-change: transform;
    }
}

/* RESPONSIVE: Tablet optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
    #orb-animation .orb-canvas {
        will-change: transform;
    }
}

/* Desktop optimization */
@media (min-width: 1025px) {
    #orb-animation .orb-canvas {
        /* Better quality on desktop */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}