/* ============================================================
   SADNESS — Color Variables & Ambient
   /weather/css/sadness.css
   ============================================================ */
:root {
    --storm-1: #7bafd4;  --storm-2: #5b8fb9;  --storm-3: #3a6f9e;  --storm-4: #264a6e;
    --storm-bg-1: rgba(123,175,212,0.12);  --storm-bg-2: rgba(91,143,185,0.15);
    --storm-bg-3: rgba(58,111,158,0.18);   --storm-bg-4: rgba(38,74,110,0.22);
    --storm-border-1: rgba(123,175,212,0.25);  --storm-border-2: rgba(91,143,185,0.30);
    --storm-border-3: rgba(58,111,158,0.35);   --storm-border-4: rgba(38,74,110,0.40);
}
.storm-icon { filter: drop-shadow(0 4px 20px rgba(52,152,219,0.3)); }
.storm-title {
    background: linear-gradient(135deg, #b8d4e8 0%, #7bafd4 40%, #3a6f9e 100%);
    -webkit-background-clip: text; background-clip: text;
}

/* Rain drops */
.ambient-drop {
    position: absolute;
    width: 1px; height: 12px;
    background: rgba(120,170,220,0.15);
    opacity: 0;
    animation: rainFall var(--dur, 1.5s) linear infinite;
    animation-delay: var(--delay, 0s);
}
@keyframes rainFall {
    0% { opacity: 0; transform: translateY(-20px); }
    10% { opacity: var(--brightness, 0.3); }
    90% { opacity: var(--brightness, 0.3); }
    100% { opacity: 0; transform: translateY(100vh); }
}