/* =========================================
   CHARLESTON HERO BACKGROUND OPTIONS
   ========================================= */

/* Option 1: Rainbow Row - Colorful Historic Houses */
.hero-section.rainbow-row {
    background-image: 
        linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, rgba(26, 26, 46, 0.9) 100%),
        url('https://images.unsplash.com/photo-1583175842743-24fe9a2a3765?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
}

/* Option 2: Charleston Harbor at Dusk */
.hero-section.harbor-dusk {
    background-image: 
        linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, rgba(26, 26, 46, 0.85) 100%),
        url('https://images.unsplash.com/photo-1609945141925-c6b96ec70e7a?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
}

/* Option 3: Historic Charleston Street with Gas Lamps */
.hero-section.gas-lamps {
    background-image: 
        linear-gradient(180deg, rgba(10, 10, 10, 0.4) 0%, rgba(26, 26, 46, 0.85) 100%),
        url('https://images.unsplash.com/photo-1570213489059-84f6f5a71a8f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
}

/* Option 4: Boone Hall Plantation Avenue of Oaks */
.hero-section.avenue-oaks {
    background-image: 
        linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, rgba(26, 26, 46, 0.9) 100%),
        url('https://images.unsplash.com/photo-1564068789563-90e29e51f58e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
}

/* Option 5: Charleston Church Steeples */
.hero-section.church-steeples {
    background-image: 
        linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, rgba(26, 26, 46, 0.85) 100%),
        url('https://images.unsplash.com/photo-1567703648203-5df7dde30e59?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
}

/* Option 6: Magnolia Cemetery */
.hero-section.magnolia-cemetery {
    background-image: 
        linear-gradient(180deg, rgba(10, 10, 10, 0.3) 0%, rgba(26, 26, 46, 0.8) 100%),
        url('https://images.unsplash.com/photo-1566232355426-fb5e79e0a0d7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
}

/* Option 7: Old Exchange Building at Night */
.hero-section.old-exchange {
    background-image: 
        linear-gradient(180deg, rgba(10, 10, 10, 0.4) 0%, rgba(26, 26, 46, 0.85) 100%),
        url('https://images.unsplash.com/photo-1589397559323-5be8ba02fe3a?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
}

/* Option 8: Pineapple Fountain Waterfront Park */
.hero-section.pineapple-fountain {
    background-image: 
        linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, rgba(26, 26, 46, 0.9) 100%),
        url('https://images.unsplash.com/photo-1571167266479-47fb5be572f4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
}

/* Option 9: Battery Mansions */
.hero-section.battery-mansions {
    background-image: 
        linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, rgba(26, 26, 46, 0.85) 100%),
        url('https://images.unsplash.com/photo-1588698468255-65e36c8e6073?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
}

/* Option 10: Charleston Spanish Moss Trees */
.hero-section.spanish-moss {
    background-image: 
        linear-gradient(180deg, rgba(10, 10, 10, 0.4) 0%, rgba(26, 26, 46, 0.9) 100%),
        url('https://images.unsplash.com/photo-1568402102990-bc541580b59f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
}

/* Default Charleston Background - Spooky Gothic Church/Cemetery */
.hero-section {
    background-image: 
        radial-gradient(ellipse at center, rgba(10, 10, 10, 0.4) 0%, rgba(26, 26, 46, 0.95) 100%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, rgba(26, 26, 46, 0.8) 100%),
        url('https://images.unsplash.com/photo-1542295827-681de925ef20?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Spooky Charleston Options */
.hero-section.spooky-charleston {
    background-image: 
        radial-gradient(ellipse at center, rgba(10, 10, 10, 0.3) 0%, rgba(26, 26, 46, 0.9) 100%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, rgba(75, 0, 130, 0.3) 100%),
        url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
}

/* Dark Cemetery with Fog */
.hero-section.dark-cemetery {
    background-image: 
        radial-gradient(ellipse at center, rgba(10, 10, 10, 0.2) 0%, rgba(26, 26, 46, 0.85) 100%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.5) 0%, rgba(26, 26, 46, 0.9) 100%),
        url('https://images.unsplash.com/photo-1515162816999-a0c47dc192f7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
}

/* Gothic Architecture at Night */
.hero-section.gothic-night {
    background-image: 
        radial-gradient(ellipse at center, rgba(10, 10, 10, 0.3) 0%, rgba(26, 26, 46, 0.95) 100%),
        linear-gradient(180deg, rgba(10, 10, 10, 0.4) 0%, rgba(138, 43, 226, 0.2) 100%),
        url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80');
}

/* Local Charleston Park Image - Enhanced Spooky Effect */
.hero-section.local-image {
    background-image: 
        linear-gradient(180deg, rgba(10, 10, 10, 0.6) 0%, rgba(26, 26, 46, 0.9) 100%),
        radial-gradient(ellipse at 30% 40%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 60%, rgba(75, 0, 130, 0.1) 0%, transparent 50%),
        url('../images/charleston-hero.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
}

/* Add extra dark vignette for local image */
.hero-section.local-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 20%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Enhanced overlay for better text readability */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Ensure content appears above background */
.hero-content {
    position: relative;
    z-index: 10;
}

/* Dark vignette effect for dramatic look */
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Special effect for haunted theme */
@keyframes hauntedPulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 0.3; }
}

.hero-section.haunted::before {
    background: radial-gradient(circle at 20% 80%, rgba(138, 43, 226, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(75, 0, 130, 0.2) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(147, 112, 219, 0.1) 0%, transparent 50%);
    animation: hauntedPulse 8s ease-in-out infinite;
}