/* 
 * Dynamic Background CSS - Generated from template
 * This file handles dynamic background image for hero section
 */

/* Hero section with dynamic background */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    overflow: hidden;
}

/* Default mountain gradient background - Updated to use JPG */
.hero-section.default-bg {
    background: 
        linear-gradient(135deg, 
            rgba(40, 167, 69, 0.75) 0%,
            rgba(30, 126, 52, 0.85) 50%,
            rgba(21, 87, 36, 0.9) 100%
        ),
        url('/static/uploads/backgrounds/hero-bg.jpg') center/cover no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

/* When background image is available */
.hero-section.with-bg-image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Futuristic Green Overlay Effects */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Strong green overlay with futuristic gradient */
        linear-gradient(135deg, rgba(40, 167, 69, 0.85) 0%, rgba(30, 126, 52, 0.90) 30%, rgba(25, 100, 40, 0.95) 60%, rgba(34, 139, 58, 0.88) 100%),
        /* Enhanced futuristic radial gradients for depth */
        radial-gradient(circle at 20% 80%, rgba(34, 197, 94, 0.5) 0%, rgba(40, 167, 69, 0.3) 30%, transparent 60%),
        radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.45) 0%, rgba(34, 197, 94, 0.25) 35%, transparent 65%),
        radial-gradient(circle at 50% 50%, rgba(71, 219, 99, 0.25) 0%, rgba(34, 197, 94, 0.15) 40%, transparent 80%),
        /* Subtle grid pattern for tech feel */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 98px,
            rgba(34, 197, 94, 0.04) 100px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 98px,
            rgba(34, 197, 94, 0.04) 100px
        );
    z-index: 1;
    animation: futuristicPulse 8s ease-in-out infinite alternate;
}

/* Additional scanning effect overlay */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Scanning line effect */
        linear-gradient(
            0deg,
            transparent 0%,
            rgba(34, 197, 94, 0.08) 45%,
            rgba(34, 197, 94, 0.15) 50%,
            rgba(34, 197, 94, 0.08) 55%,
            transparent 100%
        );
    z-index: 1;
    animation: scanningLine 15s linear infinite;
}

/* Content should be above overlay with futuristic glow */
.hero-content {
    position: relative;
    z-index: 3;
    max-width: 800px;
    animation: fadeInUp 1s ease-out;
    text-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.7), 
        0 0 20px rgba(34, 197, 94, 0.3),
        0 0 40px rgba(34, 197, 94, 0.1);
}

/* Futuristic Animations */
@keyframes futuristicPulse {
    0% {
        filter: hue-rotate(0deg) brightness(1) saturate(1);
    }
    25% {
        filter: hue-rotate(3deg) brightness(1.03) saturate(1.1);
    }
    50% {
        filter: hue-rotate(0deg) brightness(1.07) saturate(1.2);
    }
    75% {
        filter: hue-rotate(-3deg) brightness(1.03) saturate(1.1);
    }
    100% {
        filter: hue-rotate(0deg) brightness(1) saturate(1);
    }
}

@keyframes scanningLine {
    0% {
        transform: translateY(-100vh) scaleY(0.5);
        opacity: 0;
    }
    5% {
        opacity: 0.3;
    }
    10% {
        transform: translateY(-50vh) scaleY(1);
        opacity: 1;
    }
    90% {
        transform: translateY(50vh) scaleY(1);
        opacity: 1;
    }
    95% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(100vh) scaleY(0.5);
        opacity: 0;
    }
}

/* Enhanced hero title with futuristic glow */
.hero-title {
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(34, 197, 94, 0.4),
        0 0 20px rgba(34, 197, 94, 0.2),
        0 0 30px rgba(34, 197, 94, 0.1);
    animation: titleGlow 4s ease-in-out infinite alternate;
}

@keyframes titleGlow {
    0% {
        text-shadow: 
            0 2px 4px rgba(0, 0, 0, 0.8),
            0 0 10px rgba(34, 197, 94, 0.4),
            0 0 20px rgba(34, 197, 94, 0.2);
    }
    100% {
        text-shadow: 
            0 2px 4px rgba(0, 0, 0, 0.8),
            0 0 15px rgba(34, 197, 94, 0.6),
            0 0 25px rgba(34, 197, 94, 0.3),
            0 0 35px rgba(34, 197, 94, 0.1);
    }
}