/*
 * EcuaSports - Hero Section Visual Effects
 * Hero gradient + glow accents only
 * Compatible with Elementor - NO CONFLICTS
 */

/* ============================================
   BASE: Force position relative on containers
   ============================================ */

.elementor-element.ecua-hero-gradient,
.elementor-element.ecua-glow-accents,
.ecua-hero-gradient,
.ecua-glow-accents {
    position: relative !important;
    overflow: hidden !important;
}

/* ============================================
   HERO GRADIENT + GLOW ACCENTS
   ============================================ */

/* Hero gradient uses ::before */
.ecua-hero-gradient::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background:
        radial-gradient(ellipse 80% 50% at 20% 80%, rgba(255, 215, 0, 0.3) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(0, 102, 204, 0.25) 0%, transparent 55%),
        radial-gradient(ellipse 50% 50% at 60% 60%, rgba(227, 24, 55, 0.2) 0%, transparent 50%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    animation: gradientPulse 6s ease-in-out infinite !important;
}

/* Glow accents uses ::after for subtle ambient glow */
.ecua-glow-accents::after {
    content: '' !important;
    position: absolute !important;
    width: 800px !important;
    height: 800px !important;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 30%, transparent 60%) !important;
    border-radius: 50% !important;
    top: -300px !important;
    right: -300px !important;
    pointer-events: none !important;
    z-index: 2 !important;
    filter: blur(60px) !important;
    animation: orbFloat 15s ease-in-out infinite !important;
    box-shadow:
        -800px 600px 300px 100px rgba(0, 102, 204, 0.25),
        -600px 400px 200px 80px rgba(0, 102, 204, 0.15) !important;
}

/* ============================================
   KEYFRAMES
   ============================================ */

@keyframes gradientPulse {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.03);
    }
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    25% {
        transform: translate(40px, -30px) scale(1.1);
    }
    50% {
        transform: translate(20px, 30px) scale(0.95);
    }
    75% {
        transform: translate(-30px, 15px) scale(1.05);
    }
}

/* ============================================
   PERFORMANCE & ACCESSIBILITY
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .ecua-hero-gradient::before,
    .ecua-glow-accents::after {
        animation: none !important;
    }
}

@media (max-width: 768px) {
    .ecua-glow-accents::after {
        width: 300px !important;
        height: 300px !important;
        opacity: 0.25 !important;
        box-shadow:
            -400px 300px 150px 50px rgba(0, 102, 204, 0.2) !important;
    }
}