/**
 * ExpoXR Animated Background Effect
 * Version: 1.0.0
 * 
 * Usage:
 * Add class="animated_bg_effect" to any container (section, div, etc.)
 * The background will follow mouse movement with smooth color gradients
 * 
 * Features:
 * - Mouse-reactive gradient animation
 * - Theme colors integration (Primary, Secondary, Accent)
 * - Smooth blend modes for visual depth
 * - CSS custom properties for dynamic positioning
 * - Full viewport height support
 */

.animated_bg_effect {
    position: relative;
    margin: 0;
    overflow: hidden;
    
    /* CSS Custom Properties for mouse position */
    --x: 0px;
    --y: 0px;
    
    /* Multi-layered gradient background with theme colors */
    /* Primary: rgb(42, 172, 226) - Blue */
    /* Secondary: rgb(128, 98, 170) - Purple */
    /* Accent: rgb(69, 85, 165) - Dark Blue */
    background-image: 
        linear-gradient(115deg, rgba(42, 172, 226, 0.3), rgba(0, 0, 0, 0.8)), 
        radial-gradient(
            90% 100% at calc(50% + var(--x)) calc(0% + var(--y)), 
            rgba(128, 98, 170, 0.4), 
            rgba(22, 0, 45, 0.9)
        ), 
        radial-gradient(
            100% 100% at calc(80% - var(--x)) calc(0% - var(--y)), 
            rgba(42, 172, 226, 0.5), 
            rgba(36, 0, 0, 0.8)
        ), 
        radial-gradient(
            150% 210% at calc(100% + var(--x)) calc(0% + var(--y)), 
            rgba(69, 85, 165, 0.6), 
            rgba(0, 10, 255, 0.3)
        ), 
        radial-gradient(
            100% 100% at calc(100% - var(--x)) calc(30% - var(--y)), 
            rgba(128, 98, 170, 0.5), 
            rgba(42, 172, 226, 0.4)
        ), 
        linear-gradient(60deg, rgba(42, 172, 226, 0.7), rgba(69, 85, 165, 0.8));
    
    /* Blend modes create depth and visual interest */
    background-blend-mode: overlay, overlay, difference, difference, difference, normal;
    
    /* Smooth transition for mouse movement */
    transition: --x 0.3s ease-out, --y 0.3s ease-out;
}

/* Alternative version with more vibrant colors */
.animated_bg_effect.vibrant {
    background-image: 
        linear-gradient(115deg, rgba(42, 172, 226, 0.5), rgba(0, 0, 0, 0.6)), 
        radial-gradient(
            90% 100% at calc(50% + var(--x)) calc(0% + var(--y)), 
            rgba(128, 98, 170, 0.7), 
            rgba(22, 0, 45, 0.8)
        ), 
        radial-gradient(
            100% 100% at calc(80% - var(--x)) calc(0% - var(--y)), 
            rgba(42, 172, 226, 0.8), 
            rgba(36, 0, 0, 0.7)
        ), 
        radial-gradient(
            150% 210% at calc(100% + var(--x)) calc(0% + var(--y)), 
            rgba(69, 85, 165, 0.9), 
            rgba(0, 10, 255, 0.5)
        ), 
        radial-gradient(
            100% 100% at calc(100% - var(--x)) calc(30% - var(--y)), 
            rgba(128, 98, 170, 0.8), 
            rgba(42, 172, 226, 0.6)
        ), 
        linear-gradient(60deg, rgba(42, 172, 226, 0.9), rgba(69, 85, 165, 1.0));
}

/* Subtle version with less intensity */
.animated_bg_effect.subtle {
    background-image: 
        linear-gradient(115deg, rgba(42, 172, 226, 0.2), rgba(0, 0, 0, 0.9)), 
        radial-gradient(
            90% 100% at calc(50% + var(--x)) calc(0% + var(--y)), 
            rgba(128, 98, 170, 0.2), 
            rgba(22, 0, 45, 0.95)
        ), 
        radial-gradient(
            100% 100% at calc(80% - var(--x)) calc(0% - var(--y)), 
            rgba(42, 172, 226, 0.3), 
            rgba(36, 0, 0, 0.9)
        ), 
        radial-gradient(
            150% 210% at calc(100% + var(--x)) calc(0% + var(--y)), 
            rgba(69, 85, 165, 0.4), 
            rgba(0, 10, 255, 0.2)
        ), 
        radial-gradient(
            100% 100% at calc(100% - var(--x)) calc(30% - var(--y)), 
            rgba(128, 98, 170, 0.3), 
            rgba(42, 172, 226, 0.2)
        ), 
        linear-gradient(60deg, rgba(42, 172, 226, 0.5), rgba(69, 85, 165, 0.6));
}

/* Ensure content stays above background */
.animated_bg_effect > * {
    position: relative;
    z-index: 1;
}

/* Mobile optimization - reduce complexity */
@media (max-width: 768px) {
    .animated_bg_effect {
        background-image: 
            linear-gradient(115deg, rgba(42, 172, 226, 0.3), rgba(0, 0, 0, 0.8)), 
            radial-gradient(
                100% 100% at 50% 50%, 
                rgba(128, 98, 170, 0.4), 
                rgba(22, 0, 45, 0.9)
            ), 
            linear-gradient(60deg, rgba(42, 172, 226, 0.7), rgba(69, 85, 165, 0.8));
        background-blend-mode: overlay, normal, normal;
    }
}

/* Performance optimization */
@media (prefers-reduced-motion: reduce) {
    .animated_bg_effect {
        transition: none;
    }
}