/**
 * public/css/weather.css
 * Dynamic Weather & Leyline Environmental Ambience Overlays (Step 7.2)
 */

/* Weather HUD Badges & Typography */
.weather-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: capitalize;
}

.weather-badge.weather-clear,
.weather-clear {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.weather-badge.weather-tempest,
.weather-tempest {
    color: #4fc3f7;
    text-shadow: 0 0 8px rgba(79, 195, 247, 0.5);
}

.weather-badge.weather-solar_surge,
.weather-solar_surge {
    color: #ff7043;
    text-shadow: 0 0 8px rgba(255, 112, 67, 0.5);
}

.weather-badge.weather-abyssal_fog,
.weather-abyssal_fog {
    color: #b388ff;
    text-shadow: 0 0 8px rgba(179, 136, 255, 0.5);
}

.weather-badge.weather-leyline_flux,
.weather-leyline_flux {
    color: #00e676;
    text-shadow: 0 0 8px rgba(0, 230, 118, 0.5);
}

.weather-badge.weather-eclipse,
.weather-eclipse {
    color: #ea80fc;
    text-shadow: 0 0 8px rgba(234, 128, 252, 0.6);
}

/* Atmospheric Overlays for Map & World Screens */
.weather-overlay-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

/* 1. Clear Skies */
.env-overlay-clear {
    background: radial-gradient(circle at 50% 10%, rgba(255, 230, 120, 0.04) 0%, transparent 70%);
}

/* 2. Elemental Tempest */
.env-overlay-tempest {
    background: linear-gradient(180deg, rgba(20, 60, 95, 0.15) 0%, rgba(10, 25, 45, 0.25) 100%);
    animation: tempestFlicker 6s infinite ease-in-out;
}
@keyframes tempestFlicker {
    0%, 100% { opacity: 0.8; }
    48% { opacity: 0.8; }
    50% { opacity: 1; background-color: rgba(180, 220, 255, 0.08); }
    52% { opacity: 0.8; }
}

/* 3. Solar Surge */
.env-overlay-solar,
.env-overlay-solar_surge {
    background: radial-gradient(circle at 50% -20%, rgba(255, 120, 40, 0.18) 0%, rgba(255, 60, 20, 0.05) 60%, transparent 100%);
    box-shadow: inset 0 0 100px rgba(255, 100, 0, 0.12);
}

/* 4. Abyssal Fog */
.env-overlay-fog,
.env-overlay-abyssal_fog {
    background: radial-gradient(circle at 50% 50%, transparent 20%, rgba(18, 12, 30, 0.6) 80%);
    backdrop-filter: blur(1.5px);
    animation: fogPulse 8s infinite alternate ease-in-out;
}
@keyframes fogPulse {
    0% { opacity: 0.7; }
    100% { opacity: 0.95; }
}

/* 5. Leyline Flux */
.env-overlay-flux,
.env-overlay-leyline_flux {
    background: radial-gradient(circle at 50% 50%, rgba(0, 255, 170, 0.05) 0%, transparent 75%);
    box-shadow: inset 0 0 80px rgba(0, 230, 118, 0.08);
    animation: fluxPulse 4s infinite ease-in-out;
}
@keyframes fluxPulse {
    0%, 100% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(40deg); }
}

/* 6. Lunar Eclipse */
.env-overlay-eclipse {
    background: radial-gradient(circle at 50% 20%, rgba(40, 10, 50, 0.4) 0%, rgba(10, 5, 20, 0.5) 80%);
    box-shadow: inset 0 0 120px rgba(180, 50, 255, 0.15);
}

/* Weather Banner Thematic Highlights */
.env-card-clear { border-color: rgba(255, 215, 0, 0.4) !important; }
.env-card-tempest { border-color: rgba(79, 195, 247, 0.4) !important; }
.env-card-solar_surge { border-color: rgba(255, 112, 67, 0.5) !important; }
.env-card-abyssal_fog { border-color: rgba(179, 136, 255, 0.4) !important; }
.env-card-leyline_flux { border-color: rgba(0, 230, 118, 0.4) !important; }
.env-card-eclipse { border-color: rgba(234, 128, 252, 0.5) !important; }