/* ============================================================
   GRIEF — Color Variables & Ambient
   /weather/css/grief.css
   ============================================================ */
:root {
    --storm-1: #8da4c8;  --storm-2: #6b86b8;  --storm-3: #4e68a0;  --storm-4: #334878;
    --storm-bg-1: rgba(141,164,200,0.12);  --storm-bg-2: rgba(107,134,184,0.15);
    --storm-bg-3: rgba(78,104,160,0.18);   --storm-bg-4: rgba(51,72,120,0.22);
    --storm-border-1: rgba(141,164,200,0.25);  --storm-border-2: rgba(107,134,184,0.30);
    --storm-border-3: rgba(78,104,160,0.35);   --storm-border-4: rgba(51,72,120,0.40);
}
.storm-icon { filter: drop-shadow(0 4px 20px rgba(78,104,160,0.35)); }
.storm-title {
    background: linear-gradient(135deg, #bcc8e0 0%, #8da4c8 40%, #4e68a0 100%);
    -webkit-background-clip: text; background-clip: text;
}

/* Snowflakes */
.ambient-flake {
    position: absolute;
    width: 3px; height: 3px;
    background: rgba(200,210,230,0.10);
    border-radius: 50%; opacity: 0;
    animation: snowFall var(--dur, 8s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}
@keyframes snowFall {
    0% { opacity: 0; transform: translateY(-20px) translateX(0); }
    15% { opacity: var(--brightness, 0.3); }
    85% { opacity: var(--brightness, 0.3); }
    100% { opacity: 0; transform: translateY(100vh) translateX(40px); }
}