/**
 * Weather widget — dynamic sky animations (.weather-bg-dynamic only).
 */

.weather-bg-dynamic .weather-animation-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.weather-bg-dynamic .weather-bg-layer,
.weather-bg-dynamic .weather-particles {
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.weather-bg-dynamic .weather-bg-layer {
    transition: background 0.6s ease;
}

/* Typography overrides — dynamic sky only */
.weather-bg-dynamic.weather-night .weather-content,
.weather-bg-dynamic.weather-night .sidebar-widget__toggle h3 {
    color: #f8fafc;
}

.weather-bg-dynamic.weather-night .text-gray-800,
.weather-bg-dynamic.weather-night .weather-layout-forecast-day__hi,
.weather-bg-dynamic.weather-night .weather-layout-collapsible__temp {
    color: #f8fafc !important;
}

.weather-bg-dynamic.weather-night .text-gray-600,
.weather-bg-dynamic.weather-night .text-gray-700,
.weather-bg-dynamic.weather-night .weather-location {
    color: #e2e8f0 !important;
}

.weather-bg-dynamic.weather-night .text-gray-500,
.weather-bg-dynamic.weather-night .weather-layout-forecast-day__lo {
    color: #cbd5e1 !important;
}

.weather-bg-dynamic .weather-layout-summary__forecast-day,
.weather-bg-dynamic .weather-layout-strip__forecast-day {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(4px);
}

.weather-bg-dynamic.weather-night .weather-layout-summary__forecast-day,
.weather-bg-dynamic.weather-night .weather-layout-strip__forecast-day {
    background: rgba(15, 23, 42, 0.28);
}

/* Sunny day */
.weather-bg-dynamic.weather-clear-day.weather-day .weather-bg-layer,
.weather-bg-dynamic.weather-sunny.weather-day .weather-bg-layer {
    background: linear-gradient(160deg, #fbbf24 0%, #fde68a 28%, #7dd3fc 72%, #38bdf8 100%);
}

/* Clear night */
.weather-bg-dynamic.weather-clear-day.weather-night .weather-bg-layer,
.weather-bg-dynamic.weather-sunny.weather-night .weather-bg-layer {
    background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 45%, #1d4ed8 100%);
}

/* Partly cloudy */
.weather-bg-dynamic.weather-partly-cloudy.weather-day .weather-bg-layer {
    background: linear-gradient(160deg, #93c5fd 0%, #e0f2fe 55%, #f8fafc 100%);
}

.weather-bg-dynamic.weather-partly-cloudy.weather-night .weather-bg-layer {
    background: linear-gradient(160deg, #0f172a 0%, #334155 60%, #1e40af 100%);
}

/* Cloudy */
.weather-bg-dynamic.weather-cloudy.weather-day .weather-bg-layer {
    background: linear-gradient(160deg, #94a3b8 0%, #cbd5e1 55%, #e2e8f0 100%);
}

.weather-bg-dynamic.weather-cloudy.weather-night .weather-bg-layer {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 55%, #334155 100%);
}

/* Rain / drizzle / sleet */
.weather-bg-dynamic.weather-rain.weather-day .weather-bg-layer,
.weather-bg-dynamic.weather-rainy.weather-day .weather-bg-layer,
.weather-bg-dynamic.weather-drizzle.weather-day .weather-bg-layer,
.weather-bg-dynamic.weather-sleet.weather-day .weather-bg-layer {
    background: linear-gradient(160deg, #64748b 0%, #94a3b8 45%, #cbd5e1 100%);
}

.weather-bg-dynamic.weather-rain.weather-night .weather-bg-layer,
.weather-bg-dynamic.weather-rainy.weather-night .weather-bg-layer,
.weather-bg-dynamic.weather-drizzle.weather-night .weather-bg-layer,
.weather-bg-dynamic.weather-sleet.weather-night .weather-bg-layer {
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

/* Snow */
.weather-bg-dynamic.weather-snow.weather-day .weather-bg-layer,
.weather-bg-dynamic.weather-snowy.weather-day .weather-bg-layer {
    background: linear-gradient(160deg, #bfdbfe 0%, #e0f2fe 50%, #f8fafc 100%);
}

.weather-bg-dynamic.weather-snow.weather-night .weather-bg-layer,
.weather-bg-dynamic.weather-snowy.weather-night .weather-bg-layer {
    background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 55%, #475569 100%);
}

/* Thunderstorm */
.weather-bg-dynamic.weather-thunderstorm .weather-bg-layer {
    background: linear-gradient(160deg, #020617 0%, #1e293b 55%, #334155 100%);
    animation: weather-lightning-flash 4s ease-in-out infinite;
}

/* Fog */
.weather-bg-dynamic.weather-fog.weather-day .weather-bg-layer,
.weather-bg-dynamic.weather-foggy.weather-day .weather-bg-layer {
    background: linear-gradient(160deg, #cbd5e1 0%, #e2e8f0 60%, #f8fafc 100%);
    animation: weather-fog-drift 14s ease-in-out infinite;
}

.weather-bg-dynamic.weather-fog.weather-night .weather-bg-layer,
.weather-bg-dynamic.weather-foggy.weather-night .weather-bg-layer {
    background: linear-gradient(160deg, #0f172a 0%, #334155 60%, #475569 100%);
    animation: weather-fog-drift 14s ease-in-out infinite;
}

/* Unknown / default */
.weather-bg-dynamic.weather-unknown .weather-bg-layer {
    background: linear-gradient(160deg, #7dd3fc 0%, #bae6fd 55%, #f0f9ff 100%);
}

/* Particle effects */
.weather-bg-dynamic .rain-drop {
    position: absolute;
    top: -12%;
    width: 2px;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(191, 219, 254, 0.85));
    animation: weather-rain-fall linear infinite;
}

.weather-bg-dynamic .snowflake {
    position: absolute;
    top: -8%;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    animation: weather-snow-fall linear infinite;
}

@keyframes weather-rain-fall {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(115vh);
        opacity: 0.2;
    }
}

@keyframes weather-snow-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(115vh) rotate(360deg);
        opacity: 0.3;
    }
}

@keyframes weather-lightning-flash {
    0%, 94%, 100% {
        filter: brightness(1);
    }
    95% {
        filter: brightness(1.8);
    }
    96% {
        filter: brightness(1);
    }
    97% {
        filter: brightness(2);
    }
}

@keyframes weather-fog-drift {
    0%, 100% {
        opacity: 0.92;
    }
    50% {
        opacity: 0.78;
    }
}

@media (prefers-reduced-motion: reduce) {
    .weather-bg-dynamic .weather-bg-layer,
    .weather-bg-dynamic .rain-drop,
    .weather-bg-dynamic .snowflake {
        animation: none !important;
    }
}