/**
 * Weather-Based Dynamic Background Styles
 * Animates rain, clouds, sun, fog, snow based on live weather
 */

.weather-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    transition: background 0.3s ease;
}

/* Clear / Sunny */
.weather-bg.weather-clear {
    background: linear-gradient(180deg, #87CEEB 0%, #E0F7FA 60%, #FFF8E1 100%);
}

.weather-bg.weather-clear.weather-night {
    background: linear-gradient(180deg, #0D1B2A 0%, #1B2838 60%, #2C3E50 100%);
}

/* Cloudy */
.weather-bg.weather-cloudy {
    background: linear-gradient(180deg, #B0BEC5 0%, #CFD8DC 50%, #ECEFF1 100%);
}

/* Rainy */
.weather-bg.weather-rainy,
.weather-bg.weather-drizzle {
    background: linear-gradient(180deg, #546E7A 0%, #78909C 50%, #90A4AE 100%);
}

/* Stormy */
.weather-bg.weather-stormy {
    background: linear-gradient(180deg, #263238 0%, #37474F 50%, #455A64 100%);
}

/* Foggy */
.weather-bg.weather-foggy {
    background: linear-gradient(180deg, #CFD8DC 0%, #ECEFF1 50%, #F5F5F5 100%);
}

/* Snowy */
.weather-bg.weather-snowy {
    background: linear-gradient(180deg, #B0BEC5 0%, #E0E0E0 50%, #F5F5F5 100%);
}

/* ========== Sun ========== */
.wb-sun {
    position: absolute;
    top: 30px;
    right: 60px;
    width: 80px;
    height: 80px;
}

.wb-sun-partial {
    opacity: 0.5;
    right: 80px;
    top: 20px;
}

.wb-sun-core {
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: radial-gradient(circle, #FFF176, #FFD54F, #FF8F00);
    box-shadow: 0 0 40px rgba(255,193,7,0.6), 0 0 80px rgba(255,152,0,0.3);
    animation: sun-pulse 4s ease-in-out infinite;
}

.wb-sun-glow {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,235,59,0.3), transparent 70%);
    animation: sun-glow 6s ease-in-out infinite;
}

.wb-sun-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 50px;
    background: linear-gradient(to top, rgba(255,193,7,0.6), transparent);
    transform-origin: bottom center;
    animation: ray-rotate 20s linear infinite;
}

@keyframes sun-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes sun-glow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

@keyframes ray-rotate {
    from { transform: rotate(0deg) translateY(-30px); }
    to { transform: rotate(360deg) translateY(-30px); }
}

/* ========== Clouds ========== */
.wb-cloud {
    position: absolute;
    width: 200px;
    height: 60px;
    background: white;
    border-radius: 50px;
    animation: cloud-drift linear infinite;
}

.wb-cloud::before,
.wb-cloud::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
}

.wb-cloud::before {
    width: 70px;
    height: 70px;
    top: -30px;
    left: 30px;
}

.wb-cloud::after {
    width: 90px;
    height: 90px;
    top: -40px;
    left: 80px;
}

.weather-rainy .wb-cloud,
.weather-stormy .wb-cloud,
.weather-drizzle .wb-cloud {
    background: #90A4AE;
}

.weather-rainy .wb-cloud::before,
.weather-rainy .wb-cloud::after,
.weather-stormy .wb-cloud::before,
.weather-stormy .wb-cloud::after,
.weather-drizzle .wb-cloud::before,
.weather-drizzle .wb-cloud::after {
    background: #90A4AE;
}

@keyframes cloud-drift {
    from { transform: translateX(-250px); }
    to { transform: translateX(calc(100vw + 250px)); }
}

/* ========== Rain ========== */
.wb-rain {
    position: absolute;
    inset: 0;
}

.wb-raindrop {
    position: absolute;
    top: -20px;
    width: 2px;
    height: 20px;
    background: linear-gradient(to bottom, transparent, rgba(100,181,246,0.7));
    border-radius: 0 0 2px 2px;
    animation: rain-fall linear infinite;
}

.weather-stormy .wb-raindrop {
    height: 30px;
    background: linear-gradient(to bottom, transparent, rgba(66,165,245,0.9));
}

@keyframes rain-fall {
    from { transform: translateY(-20px); }
    to { transform: translateY(100vh); }
}

/* ========== Lightning ========== */
.wb-lightning {
    position: absolute;
    inset: 0;
    animation: lightning-flash 8s linear infinite;
    background: rgba(255,255,255,0);
}

@keyframes lightning-flash {
    0%, 89%, 91%, 93%, 100% { background: rgba(255,255,255,0); }
    90% { background: rgba(255,255,255,0.3); }
    92% { background: rgba(255,255,255,0.15); }
}

/* ========== Fog ========== */
.wb-fog {
    position: absolute;
    width: 200%;
    height: 100px;
    left: -50%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), rgba(255,255,255,0.6), rgba(255,255,255,0.4), transparent);
    animation: fog-drift 20s ease-in-out infinite alternate;
}

@keyframes fog-drift {
    from { transform: translateX(-20%); }
    to { transform: translateX(20%); }
}

/* ========== Snow ========== */
.wb-snow {
    position: absolute;
    inset: 0;
}

.wb-snowflake {
    position: absolute;
    top: -20px;
    color: white;
    text-shadow: 0 0 4px rgba(255,255,255,0.8);
    animation: snow-fall linear infinite;
}

@keyframes snow-fall {
    from { transform: translateY(-20px) rotate(0deg); }
    to { transform: translateY(100vh) rotate(360deg); }
}

/* ========== Ensure content stays above ========== */
.app-container,
.step-content,
header,
footer,
main {
    position: relative;
    z-index: 1;
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
    .weather-bg * {
        animation: none !important;
    }
    .wb-sun-core { box-shadow: 0 0 20px rgba(255,193,7,0.4); }
}