/* ============================================================
   FEAR — Color Variables & Ambient
   /weather/css/fear.css
   ============================================================ */
:root {
    --storm-1: #8ab8c8;  --storm-2: #6a9db5;  --storm-3: #4a7f9a;  --storm-4: #2d5a72;
    --storm-bg-1: rgba(138,184,200,0.12);  --storm-bg-2: rgba(106,157,181,0.15);
    --storm-bg-3: rgba(74,127,154,0.18);   --storm-bg-4: rgba(45,90,114,0.22);
    --storm-border-1: rgba(138,184,200,0.25);  --storm-border-2: rgba(106,157,181,0.30);
    --storm-border-3: rgba(74,127,154,0.35);   --storm-border-4: rgba(45,90,114,0.40);
}
.storm-icon { filter: drop-shadow(0 4px 20px rgba(106,157,181,0.35)); }
.storm-title {
    background: linear-gradient(135deg, #b8dae8 0%, #8ab8c8 40%, #4a7f9a 100%);
    -webkit-background-clip: text; background-clip: text;
}

/* Fog wisps */
.ambient-wisp {
    position: absolute;
    width: 200px; height: 80px;
    background: radial-gradient(ellipse, rgba(180,190,200,0.08), transparent);
    border-radius: 50%; opacity: 0;
    animation: fogDrift var(--dur, 12s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}
@keyframes fogDrift {
    0% { opacity: 0; transform: translateX(-50px) scale(0.8); }
    30% { opacity: var(--brightness, 0.15); }
    70% { opacity: var(--brightness, 0.15); }
    100% { opacity: 0; transform: translateX(50px) scale(1.2); }
}