/* ============================================
   SERAPHIM WEATHER SYSTEM - CSS
   Integrates with existing site styles
   Weather effects, backgrounds, and day mode UI
   ============================================ */

/* ============================================
   WEATHER EFFECTS CONTAINER
   Inserted after bg-container
   ============================================ */
#weather-effects {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.weather-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

.weather-layer.active {
    opacity: 1;
}

/* ============================================
   BACKGROUND IMAGE OVERRIDE
   Weather backgrounds replace the default bg.png
   ============================================ */
.bg-image {
    transition: opacity 1.5s ease;
}

/* Weather-specific backgrounds via JS
   Uses WebP with PNG fallback via image-set() for modern browsers.
   The plain url() fallback ensures older browsers still get the PNG. */
html.time-night.weather-clear .bg-image,
html.time-night.weather-cloudy .bg-image,
html.time-night.weather-fog .bg-image {
    background-image: url('images/bg-night-clear.png') !important;
    background-image: image-set(
        url('images/bg-night-clear.webp') type('image/webp'),
        url('images/bg-night-clear.png') type('image/png')
    ) !important;
    background-size: cover !important;
    background-position: center !important;
}

html.time-night.weather-rain .bg-image,
html.time-night.weather-storm .bg-image {
    background-image: url('images/bg-night-rain.png') !important;
    background-image: image-set(
        url('images/bg-night-rain.webp') type('image/webp'),
        url('images/bg-night-rain.png') type('image/png')
    ) !important;
    background-size: cover !important;
    background-position: center !important;
}

html.time-night.weather-snow .bg-image {
    background-image: url('images/bg-night-snow.png') !important;
    background-image: image-set(
        url('images/bg-night-snow.webp') type('image/webp'),
        url('images/bg-night-snow.png') type('image/png')
    ) !important;
    background-size: cover !important;
    background-position: center !important;
}

html.time-day.weather-clear .bg-image,
html.time-day.weather-cloudy .bg-image,
html.time-day.weather-fog .bg-image {
    background-image: url('images/bg-day-clear.png') !important;
    background-image: image-set(
        url('images/bg-day-clear.webp') type('image/webp'),
        url('images/bg-day-clear.png') type('image/png')
    ) !important;
    background-size: cover !important;
    background-position: center !important;
}

html.time-day.weather-rain .bg-image,
html.time-day.weather-storm .bg-image {
    background-image: url('images/bg-day-rain.png') !important;
    background-image: image-set(
        url('images/bg-day-rain.webp') type('image/webp'),
        url('images/bg-day-rain.png') type('image/png')
    ) !important;
    background-size: cover !important;
    background-position: center !important;
}

html.time-day.weather-snow .bg-image {
    background-image: url('images/bg-day-snow.png') !important;
    background-image: image-set(
        url('images/bg-day-snow.webp') type('image/webp'),
        url('images/bg-day-snow.png') type('image/png')
    ) !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Adjust bg-image opacity — day is now much brighter */
html.time-day .bg-image {
    opacity: 0.7 !important;
}

html.time-day.weather-clear .bg-image {
    opacity: 0.75 !important;
    filter: saturate(1.15) brightness(1.05) !important;
}

html.time-day.weather-snow .bg-image {
    opacity: 0.72 !important;
}

html.time-night .bg-image {
    opacity: 0.4 !important;
}

/* ============================================
   DAYTIME ENVIRONMENT — Lighten bg-overlay
   The bg-overlay was always dark, making day
   indistinguishable from night. Now it lifts.
   ============================================ */
html.time-day .bg-overlay {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.08) 50%,
        rgba(0, 0, 0, 0.3) 100%) !important;
}

html.time-day.weather-clear .bg-overlay {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(10, 8, 0, 0.02) 40%,
        rgba(0, 0, 0, 0.0) 50%,
        rgba(10, 8, 0, 0.02) 60%,
        rgba(0, 0, 0, 0.2) 100%) !important;
}

html.time-day .bg-vignette {
    background: radial-gradient(ellipse at center,
        transparent 0%, rgba(0, 0, 0, 0.2) 100%) !important;
}

/* ============================================
   BACKGROUND SUN GLOW — Warm pulsing radial
   Lives inside bg-container, affects environment
   ============================================ */
.bg-sun-glow {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 2s ease;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 40%,
        rgba(255, 235, 160, 0.18) 0%,
        rgba(255, 215, 110, 0.1) 25%,
        rgba(255, 200, 80, 0.04) 50%,
        transparent 70%);
    animation: bgSunPulse 10s ease-in-out infinite;
}

html.time-day.weather-clear .bg-sun-glow {
    opacity: 1;
}

html.time-day.weather-cloudy .bg-sun-glow {
    opacity: 0.3;
}

@keyframes bgSunPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

/* ============================================
   DAWN / DUSK — Progressive transitional gradients
   Uses --dawn-progress / --dusk-progress (0.0–1.0)
   set by weather.js for smooth interpolation.
   Dawn:  progress 0 = near-night, 1 = near-day
   Dusk:  progress 1 = still light, 0 = near-night
   ============================================ */

/* --- DAWN -------------------------------------------------- */

/*
 * bg-image: opacity ramps from 0.3 (dark, near-night) to 0.7 (near-day)
 *           brightness from 0.55 to 0.95
 *           saturation  from 1.0  to 1.6
 */
html.time-dawn .bg-image {
    opacity: calc(0.3 + var(--dawn-progress, 0.5) * 0.4) !important;
    filter: saturate(calc(1 + var(--dawn-progress, 0.5) * 0.6))
            brightness(calc(0.55 + var(--dawn-progress, 0.5) * 0.4))
            hue-rotate(calc(-5deg * (1 - var(--dawn-progress, 0.5)))) !important;
}

/*
 * bg-overlay: dark purple fades out, warm orange fades in as progress rises.
 * At progress 0 the overlay is heavy & dark; at 1 it is lighter & warmer.
 * We use two gradient layers and blend their opacities via the progress value.
 *
 * Layer 1 (night-leaning): dark purple wash          → fades out
 * Layer 2 (dawn-warmth):   warm orange/amber tones   → fades in
 */
html.time-dawn .bg-overlay {
    background: linear-gradient(180deg,
        rgba(30, 10, 50,  calc(0.55 - var(--dawn-progress, 0.5) * 0.35)) 0%,
        rgba(200, 80, 30, calc(0.05 + var(--dawn-progress, 0.5) * 0.2))  20%,
        rgba(240, 140, 40, calc(0.04 + var(--dawn-progress, 0.5) * 0.16)) 45%,
        rgba(220, 100, 30, calc(0.05 + var(--dawn-progress, 0.5) * 0.18)) 70%,
        rgba(30, 10, 50,  calc(0.6 - var(--dawn-progress, 0.5) * 0.35))  100%) !important;
}

/*
 * bg-vignette: heavy dark vignette at progress 0, lighter at 1.
 */
html.time-dawn .bg-vignette {
    background: radial-gradient(ellipse at center,
        transparent 0%,
        rgba(100, 30, 50, calc(0.45 - var(--dawn-progress, 0.5) * 0.25)) 60%,
        rgba(40, 10, 40,  calc(0.65 - var(--dawn-progress, 0.5) * 0.3))  100%) !important;
}

/*
 * bg-sun-glow: barely visible at progress 0, full warm glow at 1.
 */
html.time-dawn .bg-sun-glow {
    opacity: calc(0.1 + var(--dawn-progress, 0.5) * 0.7);
    background: radial-gradient(ellipse at 50% 60%,
        rgba(255, 160, 60, calc(0.04 + var(--dawn-progress, 0.5) * 0.2))  0%,
        rgba(255, 120, 40, calc(0.02 + var(--dawn-progress, 0.5) * 0.12)) 35%,
        rgba(255, 80, 30,  calc(0.01 + var(--dawn-progress, 0.5) * 0.04)) 60%,
        transparent 80%) !important;
}

/* --- DUSK -------------------------------------------------- */

/*
 * bg-image: opacity ramps from 0.7 (progress 1, still light) to 0.3 (progress 0, near-night)
 *           brightness from 0.95 down to 0.55
 *           saturation  from 1.5  down to 1.0
 */
html.time-dusk .bg-image {
    opacity: calc(0.3 + var(--dusk-progress, 0.5) * 0.4) !important;
    filter: saturate(calc(1 + var(--dusk-progress, 0.5) * 0.5))
            brightness(calc(0.55 + var(--dusk-progress, 0.5) * 0.4)) !important;
}

/*
 * bg-overlay: at progress 1 (still light) the overlay is lighter/warmer;
 *             at progress 0 (near-night) the purple darkness dominates.
 */
html.time-dusk .bg-overlay {
    background: linear-gradient(180deg,
        rgba(20, 10, 40,  calc(0.5 - var(--dusk-progress, 0.5) * 0.3))  0%,
        rgba(160, 60, 30, calc(0.04 + var(--dusk-progress, 0.5) * 0.14)) 25%,
        rgba(200, 100, 40, calc(0.03 + var(--dusk-progress, 0.5) * 0.1))  45%,
        rgba(180, 70, 35, calc(0.04 + var(--dusk-progress, 0.5) * 0.1))  65%,
        rgba(30, 15, 50,  calc(0.55 - var(--dusk-progress, 0.5) * 0.3))  100%) !important;
}

/*
 * bg-vignette: heavier at progress 0, lighter at progress 1.
 */
html.time-dusk .bg-vignette {
    background: radial-gradient(ellipse at center,
        transparent 0%,
        rgba(60, 20, 50, calc(0.4 - var(--dusk-progress, 0.5) * 0.25)) 70%,
        rgba(30, 10, 40, calc(0.55 - var(--dusk-progress, 0.5) * 0.3))  100%) !important;
}

/*
 * bg-sun-glow: warm glow fades with the light.
 */
html.time-dusk .bg-sun-glow {
    opacity: calc(0.05 + var(--dusk-progress, 0.5) * 0.55);
    background: radial-gradient(ellipse at 50% 50%,
        rgba(255, 140, 50, calc(0.02 + var(--dusk-progress, 0.5) * 0.12)) 0%,
        rgba(200, 80, 30,  calc(0.01 + var(--dusk-progress, 0.5) * 0.06)) 40%,
        transparent 65%) !important;
}

/* ============================================
   RAIN EFFECT
   ============================================ */
.rain-layer {
    overflow: hidden;
}

.rain-layer .rain-drop {
    position: absolute;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(150, 200, 255, 0.4), transparent);
    animation: rainFall linear infinite;
    opacity: 0;
}

html.time-night .rain-layer .rain-drop {
    background: linear-gradient(180deg, transparent, rgba(150, 200, 255, 0.45), transparent);
    box-shadow: 0 0 2px rgba(0, 255, 136, 0.1);
}

@keyframes rainFall {
    0% {
        transform: translateY(-100px) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(20px);
        opacity: 0;
    }
}

.rain-layer::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(0deg, rgba(100, 150, 200, 0.1), transparent);
    opacity: 0.5;
}

/* ============================================
   SNOW EFFECT
   ============================================ */
.snow-layer {
    overflow: hidden;
}

.snow-layer .snowflake {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    animation: snowFall linear infinite;
    opacity: 0;
}

@keyframes snowFall {
    0% {
        transform: translateY(-20px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(100vh) translateX(100px) rotate(360deg);
        opacity: 0;
    }
}

/* ============================================
   FOG EFFECT - SUBTLE
   ============================================ */
.fog-layer {
    overflow: hidden;
}

.fog-layer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(150, 160, 180, 0.05) 40%,
        rgba(150, 160, 180, 0.07) 70%,
        transparent 100%
    );
    opacity: 0.5;
}

.fog-wisp {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.25;
}

.fog-wisp-1 {
    background: 
        radial-gradient(ellipse 80% 40% at 10% 60%, rgba(180, 190, 210, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 60% 30% at 90% 40%, rgba(180, 190, 210, 0.06) 0%, transparent 70%);
    animation: fogWisp1 25s ease-in-out infinite;
}

.fog-wisp-2 {
    background: 
        radial-gradient(ellipse 70% 35% at 80% 70%, rgba(180, 190, 210, 0.08) 0%, transparent 70%),
        radial-gradient(ellipse 90% 45% at 20% 30%, rgba(180, 190, 210, 0.06) 0%, transparent 70%);
    animation: fogWisp2 30s ease-in-out infinite;
}

@keyframes fogWisp1 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.2; }
    50% { transform: translateX(30px) translateY(-20px); opacity: 0.3; }
}

@keyframes fogWisp2 {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.15; }
    50% { transform: translateX(-40px) translateY(30px); opacity: 0.25; }
}

.fog-bank {
    position: absolute;
    bottom: -30px;
    left: -5%;
    right: -5%;
    height: 100px;
    background: linear-gradient(0deg, rgba(180, 190, 210, 0.08) 0%, transparent 100%);
    filter: blur(15px);
    opacity: 0.3;
    animation: fogBankRoll 20s ease-in-out infinite;
}

@keyframes fogBankRoll {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(20px); }
}

/* ============================================
   STORM EFFECT (LIGHTNING)
   ============================================ */
.storm-layer .lightning {
    position: absolute;
    inset: 0;
    background: rgba(200, 220, 255, 0.85);
    opacity: 0;
    animation: lightningFlash 8s ease-in-out infinite;
}

@keyframes lightningFlash {
    0%, 100% { opacity: 0; }
    1% { opacity: 0.6; }
    2% { opacity: 0; }
    3% { opacity: 0.4; }
    4% { opacity: 0; }
    52% { opacity: 0; }
    53% { opacity: 0.7; }
    54% { opacity: 0.1; }
    55% { opacity: 0.5; }
    56% { opacity: 0; }
}

/* ============================================
   STARS EFFECT (NIGHT CLEAR) - SUBTLE
   ============================================ */
.stars-layer {
    overflow: hidden;
}

.stars-layer .star {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: starTwinkle ease-in-out infinite;
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

.stars-layer .moon-glow {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, 
        rgba(200, 220, 255, 0.12) 0%, 
        rgba(200, 220, 255, 0.06) 30%,
        rgba(150, 180, 255, 0.03) 50%,
        transparent 70%);
    border-radius: 50%;
    animation: moonPulse 10s ease-in-out infinite;
}

/* Vertical beam for night - subtle version of day beam */
.stars-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(200, 220, 255, 0.03) 0%,
        rgba(200, 220, 255, 0.1) 35%,
        rgba(255, 255, 255, 0.2) 45%,
        rgba(255, 255, 255, 0.2) 55%,
        rgba(200, 220, 255, 0.1) 65%,
        rgba(200, 220, 255, 0.03) 100%
    );
    box-shadow: 
        0 0 40px 20px rgba(200, 220, 255, 0.05),
        0 0 80px 40px rgba(150, 180, 255, 0.03);
    animation: moonPulse 10s ease-in-out infinite;
}

@keyframes moonPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* ============================================
   SUN EFFECT (DAY CLEAR) - CENTER VERTICAL BEAM
   Matches the central vertical light column in day backgrounds
   Light source is at horizon/center, beaming up and down
   ============================================ */
.sun-layer {
    overflow: hidden;
}

/* Central vertical light beam - warm golden column */
.sun-layer .sun-beam {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(255, 240, 200, 0.12) 0%,
        rgba(255, 230, 160, 0.35) 35%,
        rgba(255, 220, 120, 0.55) 45%,
        rgba(255, 220, 120, 0.55) 55%,
        rgba(255, 230, 160, 0.35) 65%,
        rgba(255, 240, 200, 0.12) 100%
    );
    box-shadow:
        0 0 60px 30px rgba(255, 230, 150, 0.18),
        0 0 120px 60px rgba(255, 220, 130, 0.12),
        0 0 200px 100px rgba(255, 200, 100, 0.06);
    animation: sunBeamPulse 8s ease-in-out infinite;
}

/* Wider ambient glow around the beam */
.sun-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(200, 220, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.06) 40%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.06) 60%,
        rgba(200, 220, 255, 0.02) 100%
    );
    animation: sunBeamPulse 8s ease-in-out infinite;
    animation-delay: 0.5s;
}

@keyframes sunBeamPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* Central glow point at horizon level — warm golden sun */
.sun-layer .sun-glow {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 350px;
    background: radial-gradient(circle,
        rgba(255, 230, 140, 0.3) 0%,
        rgba(255, 220, 120, 0.18) 20%,
        rgba(255, 200, 100, 0.08) 40%,
        transparent 60%);
    border-radius: 50%;
    animation: sunGlowPulse 6s ease-in-out infinite;
}

/* Secondary glow rings — warm halo */
.sun-layer::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle,
        rgba(255, 230, 150, 0.1) 0%,
        rgba(255, 210, 120, 0.05) 30%,
        transparent 50%);
    border-radius: 50%;
    animation: sunGlowPulse 6s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes sunGlowPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.9; }
}

/* ── Sun Rays — Radial beams from center ── */
.sun-rays-container {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 0;
    height: 0;
}

.sun-ray {
    position: absolute;
    top: 0;
    left: -1.5px;
    width: 3px;
    height: 45vh;
    transform-origin: 50% 0%;
    background: linear-gradient(
        180deg,
        rgba(255, 240, 180, 0.35) 0%,
        rgba(255, 220, 130, 0.18) 25%,
        rgba(255, 200, 100, 0.06) 60%,
        transparent 100%
    );
    filter: blur(2px);
    animation: sunRayPulse 6s ease-in-out infinite;
}

.sun-ray:nth-child(odd) {
    width: 2px;
    height: 38vh;
    animation-duration: 8s;
}

.sun-ray:nth-child(3n) {
    width: 5px;
    height: 50vh;
    filter: blur(4px);
    opacity: 0.12;
}

@keyframes sunRayPulse {
    0%, 100% { opacity: 0.15; transform: rotate(var(--r, 0deg)) scaleY(0.9); }
    30% { opacity: 0.3; }
    50% { opacity: 0.25; transform: rotate(var(--r, 0deg)) scaleY(1.05); }
    70% { opacity: 0.35; }
}

/* ── Golden Dust Motes — Floating sunlit particles ── */
.sun-particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sun-mote {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 230, 140, 0.9), rgba(255, 200, 80, 0.4));
    box-shadow: 0 0 6px 2px rgba(255, 220, 100, 0.3);
    animation: sunMoteFloat linear infinite;
}

.sun-mote:nth-child(odd) {
    background: radial-gradient(circle, rgba(255, 255, 220, 0.95), rgba(255, 240, 160, 0.3));
    box-shadow: 0 0 8px 3px rgba(255, 250, 200, 0.25);
}

.sun-mote:nth-child(3n) {
    background: radial-gradient(circle, rgba(255, 200, 60, 0.8), rgba(255, 180, 40, 0.2));
    box-shadow: 0 0 4px 1px rgba(255, 180, 40, 0.35);
}

@keyframes sunMoteFloat {
    0% {
        transform: translate(0, 0) scale(0.3);
        opacity: 0;
    }
    15% {
        opacity: 0.8;
        transform: translate(calc(var(--drift-x, 20px) * 0.2), calc(var(--drift-y, -10px) * 0.2)) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--drift-x, 20px) * 0.6), calc(var(--drift-y, -10px) * 0.6)) scale(1.1);
    }
    85% {
        opacity: 0.6;
        transform: translate(var(--drift-x, 20px), var(--drift-y, -10px)) scale(0.8);
    }
    100% {
        transform: translate(calc(var(--drift-x, 20px) * 1.2), calc(var(--drift-y, -10px) * 1.2)) scale(0.2);
        opacity: 0;
    }
}

/* ── Warm ambient overlay for sunny weather ── */
html.time-day.weather-clear .sun-layer::before {
    background: linear-gradient(
        180deg,
        rgba(255, 240, 200, 0.04) 0%,
        rgba(255, 220, 150, 0.08) 40%,
        rgba(255, 200, 100, 0.1) 50%,
        rgba(255, 220, 150, 0.08) 60%,
        rgba(255, 240, 200, 0.04) 100%
    );
}

/* ============================================
   DAY MODE - GLASSMORPHISM ADJUSTMENTS
   Darker, more opaque backgrounds for readability
   Header and footer EXCLUDED
   ============================================ */

/* TERMINAL CARD - Hero CLI block */
html.time-day .terminal-card,
html.time-day .hero-terminal-card {
    background: rgba(5, 8, 15, 0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* HERO STATS CARD */
html.time-day .hero-stats-card {
    background: rgba(10, 15, 25, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* PILLAR CARDS - Main service cards */
html.time-day .pillar,
html.time-day .pillar-card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

html.time-day .pillar:hover,
html.time-day .pillar-card:hover {
    background: rgba(10, 15, 25, 0.85) !important;
}

html.time-day .pillar.featured,
html.time-day .pillar-card.featured {
    background: rgba(10, 15, 25, 0.82) !important;
}

/* PLATFORM CARDS */
html.time-day .platform-card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html.time-day .platform-card:hover {
    background: rgba(10, 15, 25, 0.85) !important;
}

/* SERVICE CARDS */
html.time-day .service-card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html.time-day .service-card:hover {
    background: rgba(10, 15, 25, 0.85) !important;
}

/* PRICING CARDS */
html.time-day .pricing-card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html.time-day .pricing-card.featured {
    background: rgba(10, 15, 25, 0.82) !important;
}

/* AI CARDS */
html.time-day .ai-card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html.time-day .ai-card:hover {
    background: rgba(10, 15, 25, 0.85) !important;
}

/* USE CASE CARDS */
html.time-day .use-case-card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html.time-day .use-case-card:hover {
    background: rgba(10, 15, 25, 0.85) !important;
}

/* METRIC CARDS */
html.time-day .metric-card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* GENERIC CARD CLASS (fallback) */
html.time-day .card {
    background: rgba(10, 15, 25, 0.75) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html.time-day .card:hover {
    background: rgba(10, 15, 25, 0.85) !important;
}

/* SECTION BACKGROUNDS */
html.time-day .section {
    background: transparent !important;
}

html.time-day .section.alt,
html.time-day .section-alt {
    background: rgba(10, 15, 25, 0.3) !important;
}

/* HEADER & FOOTER - Warm gold accents during clear daytime */
html.time-day.weather-clear .header,
html.time-day.weather-clear .site-header {
    border-bottom-color: rgba(212, 168, 83, 0.15) !important;
    box-shadow: 0 1px 30px rgba(212, 168, 83, 0.06), 0 1px 0 rgba(212, 168, 83, 0.1) !important;
}

html.time-day.weather-clear .header-row-2,
html.time-day.weather-clear .nav-row {
    border-top-color: rgba(212, 168, 83, 0.08) !important;
}

html.time-day.weather-clear .site-footer,
html.time-day.weather-clear footer {
    border-top-color: rgba(212, 168, 83, 0.12) !important;
    box-shadow: 0 -1px 30px rgba(212, 168, 83, 0.04) !important;
}

html.time-day.weather-clear .footer-brand-name,
html.time-day.weather-clear .footer-logo-text {
    text-shadow: 0 0 20px rgba(212, 168, 83, 0.15) !important;
}

html.time-day.weather-clear .header-logo img {
    filter: drop-shadow(0 0 8px rgba(212, 168, 83, 0.2)) !important;
}

/* Warm gold accent on header CTA during clear day */
html.time-day.weather-clear .header-cta-group .btn,
html.time-day.weather-clear .quote-btn {
    box-shadow: 0 0 15px rgba(212, 168, 83, 0.12) !important;
    border-color: rgba(212, 168, 83, 0.2) !important;
}

/* Subtle gold tint on nav links during clear day */
html.time-day.weather-clear .nav-link:hover {
    color: rgba(212, 168, 83, 0.9) !important;
    text-shadow: 0 0 10px rgba(212, 168, 83, 0.2) !important;
}

/* DROPDOWN MENUS (NOT header - header stays dark always) */
html.time-day .nav-dropdown:not(.header .nav-dropdown),
html.time-day .dropdown-menu:not(.header .dropdown-menu) {
    background: rgba(10, 15, 25, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

/* FORMS */
html.time-day input:not([type="checkbox"]):not([type="radio"]),
html.time-day textarea,
html.time-day select {
    background: rgba(10, 15, 25, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

html.time-day input:focus,
html.time-day textarea:focus,
html.time-day select:focus {
    background: rgba(10, 15, 25, 0.9) !important;
}

/* FAQ / ACCORDION ITEMS */
html.time-day .faq-item,
html.time-day .accordion-item {
    background: rgba(10, 15, 25, 0.7) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* TIMELINE ITEMS */
html.time-day .timeline-item {
    background: rgba(10, 15, 25, 0.7) !important;
}

/* CONTACT / CTA SECTIONS */
html.time-day .cta-section,
html.time-day .contact-section {
    background: rgba(10, 15, 25, 0.5) !important;
}

/* ============================================
   DAY MODE + SNOW - EXTRA DARK (brightest bg)
   ============================================ */
html.time-day.weather-snow .terminal-card,
html.time-day.weather-snow .hero-terminal-card {
    background: rgba(2, 5, 12, 0.9) !important;
}

html.time-day.weather-snow .hero-stats-card {
    background: rgba(5, 10, 18, 0.88) !important;
}

html.time-day.weather-snow .pillar,
html.time-day.weather-snow .pillar-card,
html.time-day.weather-snow .platform-card,
html.time-day.weather-snow .service-card,
html.time-day.weather-snow .pricing-card,
html.time-day.weather-snow .ai-card,
html.time-day.weather-snow .use-case-card,
html.time-day.weather-snow .metric-card,
html.time-day.weather-snow .card {
    background: rgba(5, 10, 18, 0.82) !important;
}

html.time-day.weather-snow .pillar:hover,
html.time-day.weather-snow .pillar-card:hover,
html.time-day.weather-snow .platform-card:hover,
html.time-day.weather-snow .service-card:hover,
html.time-day.weather-snow .ai-card:hover,
html.time-day.weather-snow .use-case-card:hover,
html.time-day.weather-snow .card:hover {
    background: rgba(5, 10, 18, 0.9) !important;
}

/* ============================================
   NIGHT MODE - NO CHANGES NEEDED
   Existing styles already optimized for dark
   ============================================ */

/* ============================================
   Z-INDEX MANAGEMENT
   ============================================ */
.bg-container, .bg-layer {
    z-index: 0 !important;
}

#weather-effects {
    z-index: 1 !important;
}

.main, main {
    position: relative;
    z-index: 10;
}

/* Header/Footer maintain their existing z-index */

/* ============================================
   DAY MODE - TEXT READABILITY
   Section titles, descriptions, and other text
   that sits outside dark-backed cards need extra
   contrast against the brighter daytime background.
   ============================================ */
html.time-day .section-title,
html.time-day .page-title,
html.time-day .hero-title,
html.time-day h2 {
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(0, 0, 0, 0.3);
}

html.time-day .section-desc,
html.time-day .section-subtitle,
html.time-day .hero-desc,
html.time-day .hero-subtitle {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(0, 0, 0, 0.25);
}

/* Labels, badges, stat text outside cards */
html.time-day .hero-badge,
html.time-day .stat-label,
html.time-day .stat-value,
html.time-day .section-label {
    text-shadow:
        0 1px 3px rgba(0, 0, 0, 0.5);
}

/* ============================================
   RESPONSIVE - MOBILE PERFORMANCE
   ============================================ */
@media (max-width: 768px) {
    /* Reduce blur on mobile */
    html.time-day .terminal-card,
    html.time-day .pillar,
    html.time-day .pillar-card,
    html.time-day .platform-card,
    html.time-day .service-card,
    html.time-day .card {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
    
    /* Lighter particles on mobile */
    .rain-layer .rain-drop {
        opacity: 0.4 !important;
    }
    
    .snow-layer .snowflake {
        opacity: 0.6 !important;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .weather-layer,
    .rain-drop,
    .snowflake,
    .star,
    .fog-wisp,
    .fog-bank,
    .lightning,
    .sun-beam,
    .sun-glow,
    .moon-glow,
    .bg-sun-glow {
        animation: none !important;
    }

    #weather-effects {
        display: none !important;
    }
}

/* ============================================
   PRINT - DISABLE ALL WEATHER
   ============================================ */
@media print {
    #weather-effects,
    .bg-container {
        display: none !important;
    }
    
    body {
        background: white !important;
    }
}

/* ============================================
   CLOUDY WEATHER EFFECT
   Dramatic overcast with visible gray wash
   ============================================ */
html.weather-cloudy .bg-image {
    filter: saturate(0.35) brightness(0.65) contrast(0.85) !important;
}

html.weather-cloudy .bg-overlay {
    background: linear-gradient(180deg,
        rgba(60, 65, 75, 0.55) 0%,
        rgba(50, 55, 65, 0.45) 40%,
        rgba(55, 60, 70, 0.50) 70%,
        rgba(40, 45, 55, 0.60) 100%) !important;
}

/* Daytime cloudy - still noticeably overcast */
html.time-day.weather-cloudy .bg-image {
    filter: saturate(0.45) brightness(0.75) contrast(0.9) !important;
}

html.time-day.weather-cloudy .bg-overlay {
    background: linear-gradient(180deg,
        rgba(80, 85, 95, 0.40) 0%,
        rgba(70, 75, 85, 0.30) 40%,
        rgba(75, 80, 90, 0.35) 70%,
        rgba(60, 65, 75, 0.45) 100%) !important;
}

/* Muted green glow on cloudy days */
html.weather-cloudy {
    --terminal-green: #78bb88;
}

/* ============================================
   CLOUD LAYER - Visible drifting clouds
   Uses actual DOM elements (not pseudo-elements)
   ============================================ */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SOPHISTICATED VOLUMETRIC CLOUD SYSTEM
   Multi-layer CSS clouds with depth, texture, and organic movement
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cloud-layer {
    z-index: 3 !important;
}

.cloud-layer.active {
    opacity: 1 !important;
}

.cloud-mass {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ── CLOUD MASS 1: Low stratus base layer ──
   Wide, flat cloud bank across upper viewport
   Uses blur for soft natural edges */
.cloud-mass-1 {
    background:
        /* Primary cumulus body - bright top */
        radial-gradient(ellipse 55% 22% at 18% 10%, rgba(190, 195, 210, 0.30), transparent 65%),
        radial-gradient(ellipse 40% 18% at 22% 8%, rgba(210, 215, 225, 0.22), transparent 55%),
        /* Underbelly shadow */
        radial-gradient(ellipse 50% 12% at 20% 16%, rgba(60, 65, 80, 0.18), transparent 60%),
        /* Second cloud cluster */
        radial-gradient(ellipse 45% 20% at 60% 7%, rgba(180, 185, 200, 0.28), transparent 60%),
        radial-gradient(ellipse 35% 15% at 55% 5%, rgba(200, 205, 220, 0.20), transparent 50%),
        radial-gradient(ellipse 40% 10% at 58% 14%, rgba(70, 75, 90, 0.15), transparent 55%),
        /* Wispy trailing edge */
        radial-gradient(ellipse 70% 6% at 40% 12%, rgba(150, 155, 170, 0.12), transparent 80%),
        /* Scattered thin wisps */
        radial-gradient(ellipse 25% 8% at 85% 18%, rgba(160, 165, 180, 0.18), transparent 65%),
        radial-gradient(ellipse 30% 5% at 75% 22%, rgba(140, 145, 160, 0.10), transparent 70%);
    filter: blur(12px);
    animation: cloudDrift1 80s ease-in-out infinite;
}

/* Detail texture layer via pseudo-element */
.cloud-mass-1::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 30% 14% at 15% 9%, rgba(220, 225, 240, 0.18), transparent 50%),
        radial-gradient(ellipse 22% 10% at 25% 11%, rgba(230, 235, 245, 0.12), transparent 45%),
        radial-gradient(ellipse 28% 12% at 57% 6%, rgba(220, 225, 235, 0.15), transparent 50%),
        radial-gradient(ellipse 18% 8% at 63% 9%, rgba(235, 240, 250, 0.10), transparent 45%);
    filter: blur(6px);
    animation: cloudTexture1 25s ease-in-out infinite;
}

/* ── CLOUD MASS 2: Mid-level cumulus clusters ──
   More defined shapes with visible puffs */
.cloud-mass-2 {
    background:
        /* Main cluster - three puffs forming a cumulus */
        radial-gradient(ellipse 35% 24% at 30% 15%, rgba(175, 180, 200, 0.32), transparent 60%),
        radial-gradient(ellipse 25% 20% at 24% 12%, rgba(195, 200, 218, 0.24), transparent 50%),
        radial-gradient(ellipse 28% 22% at 36% 11%, rgba(185, 190, 208, 0.26), transparent 55%),
        /* Dark base of main cluster */
        radial-gradient(ellipse 32% 10% at 30% 22%, rgba(55, 60, 78, 0.20), transparent 55%),
        /* Secondary formation */
        radial-gradient(ellipse 30% 18% at 72% 12%, rgba(170, 178, 195, 0.28), transparent 58%),
        radial-gradient(ellipse 22% 16% at 68% 10%, rgba(190, 198, 215, 0.20), transparent 48%),
        radial-gradient(ellipse 26% 8% at 70% 18%, rgba(65, 70, 85, 0.16), transparent 52%),
        /* Thin alto wisps */
        radial-gradient(ellipse 60% 3% at 50% 25%, rgba(140, 148, 165, 0.10), transparent 75%),
        radial-gradient(ellipse 45% 4% at 15% 28%, rgba(130, 138, 155, 0.08), transparent 70%);
    filter: blur(10px);
    animation: cloudDrift2 65s ease-in-out infinite;
    animation-delay: -15s;
}

.cloud-mass-2::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 18% 12% at 28% 13%, rgba(225, 230, 245, 0.14), transparent 45%),
        radial-gradient(ellipse 15% 10% at 34% 10%, rgba(230, 235, 248, 0.10), transparent 40%),
        radial-gradient(ellipse 16% 11% at 70% 11%, rgba(220, 228, 242, 0.12), transparent 42%);
    filter: blur(5px);
    animation: cloudTexture2 30s ease-in-out infinite;
}

/* ── CLOUD MASS 3: High cirrus / thin veil ──
   Delicate streaks and translucent veils */
.cloud-mass-3 {
    background:
        /* Broad translucent veil */
        radial-gradient(ellipse 80% 15% at 45% 6%, rgba(155, 162, 180, 0.18), transparent 70%),
        /* Cirrus streaks */
        radial-gradient(ellipse 50% 4% at 20% 8%, rgba(170, 178, 198, 0.14), transparent 65%),
        radial-gradient(ellipse 55% 5% at 65% 10%, rgba(160, 168, 188, 0.16), transparent 68%),
        radial-gradient(ellipse 40% 3% at 80% 5%, rgba(175, 182, 200, 0.12), transparent 60%),
        /* Scattered puffs at higher altitude */
        radial-gradient(ellipse 20% 14% at 10% 4%, rgba(165, 172, 190, 0.20), transparent 55%),
        radial-gradient(ellipse 18% 12% at 88% 8%, rgba(158, 165, 185, 0.18), transparent 52%),
        /* Very thin haze band */
        radial-gradient(ellipse 100% 2% at 50% 20%, rgba(130, 138, 158, 0.06), transparent 80%);
    filter: blur(18px);
    mix-blend-mode: screen;
    animation: cloudDrift3 110s ease-in-out infinite;
    animation-delay: -30s;
}

.cloud-mass-3::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 35% 6% at 30% 7%, rgba(200, 208, 228, 0.10), transparent 60%),
        radial-gradient(ellipse 30% 5% at 60% 9%, rgba(195, 202, 222, 0.08), transparent 55%);
    filter: blur(10px);
    animation: cloudTexture3 40s ease-in-out infinite;
}

/* ── KEYFRAMES: Organic multi-axis movement ── */
@keyframes cloudDrift1 {
    0%   { transform: translateX(0) translateY(0) scale(1); }
    25%  { transform: translateX(-8%) translateY(1.5%) scale(1.02); }
    50%  { transform: translateX(-14%) translateY(-0.5%) scale(0.98); }
    75%  { transform: translateX(-6%) translateY(1%) scale(1.01); }
    100% { transform: translateX(0) translateY(0) scale(1); }
}

@keyframes cloudDrift2 {
    0%   { transform: translateX(3%) translateY(0) scale(1); }
    30%  { transform: translateX(-10%) translateY(-1%) scale(1.03); }
    60%  { transform: translateX(-18%) translateY(1.5%) scale(0.97); }
    80%  { transform: translateX(-5%) translateY(-0.5%) scale(1.01); }
    100% { transform: translateX(3%) translateY(0) scale(1); }
}

@keyframes cloudDrift3 {
    0%   { transform: translateX(-3%) translateY(0) scale(1); }
    35%  { transform: translateX(-12%) translateY(0.8%) scale(1.01); }
    65%  { transform: translateX(-22%) translateY(-0.5%) scale(0.99); }
    85%  { transform: translateX(-8%) translateY(0.3%) scale(1.005); }
    100% { transform: translateX(-3%) translateY(0) scale(1); }
}

/* Cloud internal texture breathing */
@keyframes cloudTexture1 {
    0%, 100% { opacity: 0.8; transform: scale(1) translateX(0); }
    50% { opacity: 1; transform: scale(1.04) translateX(-2%); }
}

@keyframes cloudTexture2 {
    0%, 100% { opacity: 0.7; transform: scale(1) translateX(0); }
    50% { opacity: 1; transform: scale(1.05) translateX(1.5%); }
}

@keyframes cloudTexture3 {
    0%, 100% { opacity: 0.6; transform: scale(1) translateX(0); }
    50% { opacity: 0.9; transform: scale(1.03) translateX(-1%); }
}

/* ── OPACITY CONTROL: Let background show through ── */
.cloud-layer.active {
    opacity: 0.85 !important;
}

html.time-night .cloud-layer.active {
    opacity: 0.9 !important;
}

/* ── NIGHT CLOUDS: Brighter tones, moonlit highlights ── */
html.time-night .cloud-mass-1 {
    background:
        radial-gradient(ellipse 55% 22% at 18% 10%, rgba(140, 150, 175, 0.35), transparent 65%),
        radial-gradient(ellipse 40% 18% at 22% 8%, rgba(160, 170, 195, 0.25), transparent 55%),
        radial-gradient(ellipse 50% 12% at 20% 16%, rgba(40, 45, 65, 0.22), transparent 60%),
        radial-gradient(ellipse 45% 20% at 60% 7%, rgba(135, 145, 170, 0.32), transparent 60%),
        radial-gradient(ellipse 35% 15% at 55% 5%, rgba(155, 165, 190, 0.24), transparent 50%),
        radial-gradient(ellipse 40% 10% at 58% 14%, rgba(45, 50, 70, 0.18), transparent 55%),
        radial-gradient(ellipse 70% 6% at 40% 12%, rgba(110, 120, 145, 0.14), transparent 80%),
        radial-gradient(ellipse 25% 8% at 85% 18%, rgba(120, 130, 155, 0.20), transparent 65%),
        radial-gradient(ellipse 30% 5% at 75% 22%, rgba(100, 110, 135, 0.12), transparent 70%);
}

html.time-night .cloud-mass-2 {
    background:
        radial-gradient(ellipse 35% 24% at 30% 15%, rgba(130, 140, 168, 0.36), transparent 60%),
        radial-gradient(ellipse 25% 20% at 24% 12%, rgba(150, 160, 188, 0.28), transparent 50%),
        radial-gradient(ellipse 28% 22% at 36% 11%, rgba(140, 150, 178, 0.30), transparent 55%),
        radial-gradient(ellipse 32% 10% at 30% 22%, rgba(35, 40, 58, 0.24), transparent 55%),
        radial-gradient(ellipse 30% 18% at 72% 12%, rgba(125, 135, 162, 0.32), transparent 58%),
        radial-gradient(ellipse 22% 16% at 68% 10%, rgba(145, 155, 182, 0.24), transparent 48%),
        radial-gradient(ellipse 26% 8% at 70% 18%, rgba(40, 45, 62, 0.20), transparent 52%),
        radial-gradient(ellipse 60% 3% at 50% 25%, rgba(100, 110, 135, 0.12), transparent 75%),
        radial-gradient(ellipse 45% 4% at 15% 28%, rgba(90, 100, 125, 0.10), transparent 70%);
}

html.time-night .cloud-mass-3 {
    background:
        radial-gradient(ellipse 80% 15% at 45% 6%, rgba(115, 125, 152, 0.22), transparent 70%),
        radial-gradient(ellipse 50% 4% at 20% 8%, rgba(130, 140, 165, 0.16), transparent 65%),
        radial-gradient(ellipse 55% 5% at 65% 10%, rgba(120, 130, 158, 0.18), transparent 68%),
        radial-gradient(ellipse 40% 3% at 80% 5%, rgba(135, 145, 170, 0.14), transparent 60%),
        radial-gradient(ellipse 20% 14% at 10% 4%, rgba(125, 135, 162, 0.24), transparent 55%),
        radial-gradient(ellipse 18% 12% at 88% 8%, rgba(118, 128, 155, 0.22), transparent 52%),
        radial-gradient(ellipse 100% 2% at 50% 20%, rgba(90, 100, 128, 0.08), transparent 80%);
}

/* ── NIGHT pseudo-element highlights for moonlit edges ── */
html.time-night .cloud-mass-1::before {
    background:
        radial-gradient(ellipse 30% 14% at 15% 9%, rgba(170, 180, 210, 0.16), transparent 50%),
        radial-gradient(ellipse 22% 10% at 25% 11%, rgba(180, 190, 220, 0.10), transparent 45%),
        radial-gradient(ellipse 28% 12% at 57% 6%, rgba(170, 180, 208, 0.13), transparent 50%),
        radial-gradient(ellipse 18% 8% at 63% 9%, rgba(185, 195, 225, 0.08), transparent 45%);
}

html.time-night .cloud-mass-2::before {
    background:
        radial-gradient(ellipse 18% 12% at 28% 13%, rgba(175, 185, 215, 0.12), transparent 45%),
        radial-gradient(ellipse 15% 10% at 34% 10%, rgba(180, 190, 220, 0.08), transparent 40%),
        radial-gradient(ellipse 16% 11% at 70% 11%, rgba(170, 180, 210, 0.10), transparent 42%);
}

html.time-night .cloud-mass-3::before {
    background:
        radial-gradient(ellipse 35% 6% at 30% 7%, rgba(155, 165, 198, 0.08), transparent 60%),
        radial-gradient(ellipse 30% 5% at 60% 9%, rgba(150, 160, 192, 0.06), transparent 55%);
}

/* FOG effect - heavier overlay */
html.weather-fog .bg-image {
    filter: saturate(0.4) brightness(0.75) contrast(0.9) blur(1px) !important;
}

html.weather-fog .bg-overlay {
    background: linear-gradient(180deg,
        rgba(150, 160, 170, 0.5) 0%,
        rgba(130, 140, 150, 0.4) 50%,
        rgba(150, 160, 170, 0.55) 100%) !important;
}

/* Daytime fog is brighter */
html.time-day.weather-fog .bg-image {
    filter: saturate(0.5) brightness(0.85) contrast(0.9) blur(1px) !important;
}

html.time-day.weather-fog .bg-overlay {
    background: linear-gradient(180deg,
        rgba(130, 140, 150, 0.3) 0%,
        rgba(120, 130, 140, 0.2) 50%,
        rgba(130, 140, 150, 0.35) 100%) !important;
}