/* ============================================================
   ANGER — Color Variables & Ambient
   /weather/css/anger.css
   ============================================================ */
:root {
    --storm-1: #d4856a;  --storm-2: #c5593e;  --storm-3: #b33326;  --storm-4: #7a1a1a;
    --storm-bg-1: rgba(212,133,106,0.12);  --storm-bg-2: rgba(197,89,62,0.15);
    --storm-bg-3: rgba(179,51,38,0.18);    --storm-bg-4: rgba(122,26,26,0.22);
    --storm-border-1: rgba(212,133,106,0.25);  --storm-border-2: rgba(197,89,62,0.30);
    --storm-border-3: rgba(179,51,38,0.35);    --storm-border-4: rgba(122,26,26,0.40);
}
.storm-icon { filter: drop-shadow(0 4px 20px rgba(231,76,60,0.3)); }
.storm-title {
    background: linear-gradient(135deg, #f5c6aa 0%, #e8927c 40%, #c5593e 100%);
    -webkit-background-clip: text; background-clip: text;
}
/* Lightning flash */
.sky-bg::after {
    content: '';
    position: fixed; top: 0; left: 0; width: 100%; height: 40%;
    background: radial-gradient(ellipse at 30% 20%, rgba(255,200,150,0.06) 0%, transparent 60%);
    opacity: 0; pointer-events: none; z-index: 0;
    animation: lightningFlash 12s ease-in-out infinite 3s;
}
@keyframes lightningFlash {
    0%, 100% { opacity: 0; }
    48% { opacity: 0; }  49% { opacity: 1; }
    51% { opacity: 0; }  52% { opacity: 0.6; }  53% { opacity: 0; }
}