/* ══════════════════════════════════════════════════════════════
   TIME OF DAY EFFECTS
   ══════════════════════════════════════════════════════════════ */

.weather-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    transition: background 1s ease, opacity 1s ease;
}

/* Dawn - warm orange/pink tint */
.time-dawn .weather-overlay {
    background: linear-gradient(180deg,
        rgba(255, 180, 120, 0.2) 0%,
        rgba(255, 150, 100, 0.1) 50%,
        transparent 100%
    );
}

/* Day - no overlay, bright and clear */
.time-day .weather-overlay {
    background: transparent;
}

/* Dusk - golden/purple tint */
.time-dusk .weather-overlay {
    background: linear-gradient(180deg,
        rgba(255, 150, 100, 0.25) 0%,
        rgba(200, 100, 150, 0.15) 50%,
        rgba(100, 50, 100, 0.1) 100%
    );
}

/* Night - dark blue overlay */
.time-night .weather-overlay {
    background: linear-gradient(180deg,
        rgba(20, 30, 60, 0.5) 0%,
        rgba(30, 40, 80, 0.4) 50%,
        rgba(20, 30, 50, 0.3) 100%
    );
}

/* Night glow handled by .sunbeam-glow.moon-glow in sunbeam-currency.css */
.time-night .sun-glow {
    opacity: 0.15;
    background: radial-gradient(circle,
        rgba(180, 200, 255, 0.2) 0%,
        transparent 60%
    );
}

/* ══════════════════════════════════════════════════════════════
   WEATHER EFFECTS
   ══════════════════════════════════════════════════════════════ */

/* Cloudy - slight gray overlay */
.weather-cloudy .weather-overlay {
    background: rgba(150, 150, 150, 0.15);
}

.weather-cloudy .sun-glow {
    opacity: 0.4 !important;
}

/* Rainy - blue-gray overlay + rain animation */
.weather-rainy .weather-overlay {
    background: rgba(100, 120, 140, 0.2);
}

.weather-rainy::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    background: repeating-linear-gradient(
        transparent 0px,
        transparent 4px,
        rgba(150, 180, 200, 0.1) 4px,
        rgba(150, 180, 200, 0.1) 8px
    );
    animation: rain-fall 0.3s linear infinite;
}

@keyframes rain-fall {
    from { transform: translateY(-8px); }
    to { transform: translateY(0px); }
}

/* Snowy - white overlay + snow particles */
.weather-snowy .weather-overlay {
    background: rgba(220, 230, 240, 0.2);
}

/* Foggy - heavy blur/mist */
.weather-foggy .weather-overlay {
    background: rgba(200, 200, 200, 0.4);
    backdrop-filter: blur(2px);
}