/**
 * Weather Widget Animations - iPhone Style
 * Dynamic backgrounds and effects inspired by iOS Weather app
 * Features: Parallax layers, realistic particles, smooth gradients, day/night transitions
 */

/* ============================================
   BASE STRUCTURE & PERFORMANCE
   ============================================ */

/* Override all parent backgrounds for weather widget */
.weather-widget,
.weather-widget.info-section,
.weather-widget .info-section {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Weather content wrapper - make completely transparent */
.weather-widget .weather-content-wrapper {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Weather content container - make completely transparent */
.weather-widget .sidebar-section-content,
.weather-widget .weather-content,
.weather-widget .sidebar-section-content.weather-content {
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.weather-animation-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
}

.weather-bg-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transition: background 1s ease !important;
    border-radius: 0.75rem !important;
}

.weather-particles {
    position: absolute !important;
    top: -50px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow: hidden !important;
    border-radius: 0.75rem !important;
}

/* Ensure text readability with backdrop */
.weather-content > div {
    position: relative;
}

/* ============================================
   SUNNY/CLEAR WEATHER - DAY
   ============================================ */

.weather-sunny.weather-day .weather-bg-layer,
.weather-clear-day.weather-day .weather-bg-layer {
    background: linear-gradient(to bottom, 
        #4A90E2 0%, 
        #5BA4E5 20%, 
        #87CEEB 50%, 
        #A5D8F5 80%, 
        #B8D4F1 100%
    );
    animation: skyBreathing 8s ease-in-out infinite;
}

/* Realistic sun with natural glare */
.weather-sunny.weather-day .weather-bg-layer::before,
.weather-clear-day.weather-day .weather-bg-layer::before {
    content: '';
    position: absolute;
    top: 5%;
    right: 10%;
    width: 70px;
    height: 70px;
    background: 
        /* Inner core - brightest */
        radial-gradient(circle at 35% 30%, 
            #FFFFFF 0%, 
            #FFF8DC 15%, 
            #FFD700 35%, 
            #FFB347 60%, 
            #FF8C00 85%, 
            rgba(255, 140, 0, 0.3) 100%
        );
    border-radius: 50%;
    box-shadow: 
        /* Inner bright glow */
        0 0 20px rgba(255, 255, 255, 0.9),
        0 0 40px rgba(255, 215, 0, 0.8),
        0 0 60px rgba(255, 165, 0, 0.6),
        0 0 80px rgba(255, 140, 0, 0.4),
        /* Outer warm glow */
        0 0 120px rgba(255, 140, 0, 0.2),
        0 0 160px rgba(255, 140, 0, 0.1);
    animation: sunPulseGlow 8s ease-in-out infinite;
    z-index: 2;
}

/* Glare effect removed per user request */

/* Floating clouds for sunny day */
.weather-sunny.weather-day .weather-particles::before,
.weather-clear-day.weather-day .weather-particles::before {
    content: '';
    position: absolute;
    top: 60%;
    left: -20%;
    width: 200px;
    height: 100px;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 50%, transparent 75%);
    border-radius: 50%;
    animation: cloudDriftSlow 45s linear infinite;
    filter: blur(2px);
}

@keyframes skyBreathing {
    0%, 100% { filter: brightness(1) saturate(1); }
    50% { filter: brightness(1.05) saturate(1.1); }
}

@keyframes sunPulseGlow {
    0%, 100% { 
        transform: scale(1);
        filter: brightness(1) saturate(1);
        box-shadow: 
            0 0 20px rgba(255, 255, 255, 0.9),
            0 0 40px rgba(255, 215, 0, 0.8),
            0 0 60px rgba(255, 165, 0, 0.6),
            0 0 80px rgba(255, 140, 0, 0.4),
            0 0 120px rgba(255, 140, 0, 0.2),
            0 0 160px rgba(255, 140, 0, 0.1);
    }
    25% { 
        transform: scale(1.02);
        filter: brightness(1.1) saturate(1.05);
    }
    50% { 
        transform: scale(1.04);
        filter: brightness(1.15) saturate(1.1);
        box-shadow: 
            0 0 25px rgba(255, 255, 255, 1),
            0 0 50px rgba(255, 215, 0, 0.9),
            0 0 75px rgba(255, 165, 0, 0.7),
            0 0 100px rgba(255, 140, 0, 0.5),
            0 0 140px rgba(255, 140, 0, 0.3),
            0 0 180px rgba(255, 140, 0, 0.15);
    }
    75% { 
        transform: scale(1.02);
        filter: brightness(1.1) saturate(1.05);
    }
}

/* sunGlareFlicker animation removed - glare effect removed per user request */

@keyframes cloudDriftSlow {
    from { transform: translateX(0); opacity: 0; }
    10% { opacity: 0.4; }
    90% { opacity: 0.4; }
    to { transform: translateX(calc(100vw + 220px)); opacity: 0; }
}

/* ============================================
   CLEAR WEATHER - NIGHT
   ============================================ */

.weather-sunny.weather-night .weather-bg-layer,
.weather-clear-day.weather-night .weather-bg-layer {
    background: linear-gradient(to bottom, 
        #0B1026 0%, 
        #1a1f3d 30%, 
        #2c3e6e 60%, 
        #1E3A8A 100%
    );
}

/* Moon with realistic surface and craters - FOR CLEAR/SNOWY/FOGGY NIGHT WEATHER ONLY */
.weather-sunny.weather-night .weather-bg-layer::before,
.weather-clear-day.weather-night .weather-bg-layer::before,
.weather-snowy.weather-night .weather-bg-layer::before,
.weather-snow.weather-night .weather-bg-layer::before,
.weather-sleet.weather-night .weather-bg-layer::before,
.weather-foggy.weather-night .weather-bg-layer::before,
.weather-fog.weather-night .weather-bg-layer::before {
    content: '';
    position: absolute;
    top: 5%;
    right: 22%;
    width: 70px;
    height: 70px;
    background: 
        /* Surface texture overlay */
        radial-gradient(circle at 45% 35%, rgba(0, 0, 0, 0.15) 2px, transparent 3px),
        radial-gradient(circle at 60% 50%, rgba(0, 0, 0, 0.1) 1px, transparent 2px),
        radial-gradient(circle at 30% 60%, rgba(0, 0, 0, 0.12) 2px, transparent 3px),
        radial-gradient(circle at 70% 25%, rgba(0, 0, 0, 0.08) 1px, transparent 2px),
        radial-gradient(circle at 25% 40%, rgba(0, 0, 0, 0.1) 1px, transparent 2px),
        /* Main moon surface */
        radial-gradient(circle at 30% 20%, 
            #FFF8DC 0%, 
            #F5F5DC 25%, 
            #E8E8D0 50%, 
            #DDD8C8 75%, 
            #C8C8B0 90%, 
            #B0B0A0 100%
        );
    border-radius: 50%;
    box-shadow: 
        0 0 25px rgba(245, 245, 220, 0.7),
        0 0 45px rgba(245, 245, 220, 0.4),
        0 0 65px rgba(245, 245, 220, 0.2),
        inset -12px -12px 20px rgba(0, 0, 0, 0.2),
        inset 8px 8px 15px rgba(255, 255, 255, 0.1);
    animation: moonFloat 8s ease-in-out infinite;
    z-index: 2;
}

/* Moon halo removed - was causing offset shadow */

/* Sparkling stars with realistic twinkling - BEHIND THE MOON */
.weather-night .weather-particles .star,
.weather-widget.weather-night .star,
.weather-particles .star {
    position: absolute !important;
    width: 4px !important;
    height: 4px !important;
    background: #ffffff !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    box-shadow: 
        0 0 8px rgba(255, 255, 255, 1),
        0 0 16px rgba(255, 255, 255, 0.8),
        0 0 24px rgba(255, 255, 255, 0.4) !important;
    animation: starSparkle 4s ease-in-out infinite !important;
    z-index: 2 !important;
    pointer-events: none !important;
    display: block !important;
    visibility: visible !important;
}

/* Stars are slightly dimmed during rainy/stormy weather for realism */
.weather-rainy.weather-night .weather-particles .star,
.weather-rain.weather-night .weather-particles .star,
.weather-drizzle.weather-night .weather-particles .star,
.weather-stormy.weather-night .weather-particles .star,
.weather-thunderstorm.weather-night .weather-particles .star {
    opacity: 0.6 !important;
    box-shadow: 
        0 0 4px rgba(255, 255, 255, 0.6),
        0 0 8px rgba(255, 255, 255, 0.3),
        0 0 12px rgba(255, 255, 255, 0.15) !important;
}

/* Stars remain bright during clear/cloudy/snowy weather */
.weather-sunny.weather-night .weather-particles .star,
.weather-clear-day.weather-night .weather-particles .star,
.weather-cloudy.weather-night .weather-particles .star,
.weather-partly-cloudy.weather-night .weather-particles .star,
.weather-snowy.weather-night .weather-particles .star,
.weather-snow.weather-night .weather-particles .star {
    opacity: 0.9 !important;
}

/* Dynamic cloud icons created by JavaScript - cartoon style */
.weather-particles .cloud-icon {
    position: absolute !important;
    pointer-events: none !important;
    z-index: 4 !important;
    animation: cloudParallax 10s ease-in-out infinite !important;
    user-select: none !important;
    display: block !important;
    visibility: visible !important;
    filter: drop-shadow(0 2px 6px rgba(150, 150, 150, 0.3));
    cursor: default;
}

/* Rain drops appear above stars and clouds */
.weather-particles .rain-drop {
    z-index: 10 !important;
}

/* Snowflakes appear above stars and clouds */  
.weather-particles .snowflake {
    z-index: 8 !important;
}

/* Create sparkle cross effect */
.weather-night .weather-particles .star::before,
.weather-night .weather-particles .star::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: white;
    opacity: 0;
    animation: sparkleBeams 4s ease-in-out infinite;
}

.weather-night .weather-particles .star::before {
    width: 8px;
    height: 1px;
    transform: translate(-50%, -50%);
    animation-delay: var(--beam-delay, 0s);
}

.weather-night .weather-particles .star::after {
    width: 1px;
    height: 8px;
    transform: translate(-50%, -50%);
    animation-delay: var(--beam-delay, 0s);
}

/* Large sparkling stars */
.weather-night .weather-particles .star.star-large {
    width: 3px;
    height: 3px;
    box-shadow: 
        0 0 6px rgba(255, 255, 255, 0.9),
        0 0 12px rgba(255, 255, 255, 0.6),
        0 0 18px rgba(255, 255, 255, 0.3);
}

.weather-night .weather-particles .star.star-large::before {
    width: 12px;
    animation-duration: 4s;
}

.weather-night .weather-particles .star.star-large::after {
    height: 12px;
    animation-duration: 4s;
}

@keyframes moonFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* moonHalo animation removed - no longer needed */

@keyframes starSparkle {
    0%, 80%, 100% { 
        opacity: 0.7 !important; 
        transform: scale(1) !important;
        box-shadow: 
            0 0 4px rgba(255, 255, 255, 0.8),
            0 0 8px rgba(255, 255, 255, 0.4) !important;
    }
    10%, 25% { 
        opacity: 1 !important; 
        transform: scale(1.5) !important;
        box-shadow: 
            0 0 12px rgba(255, 255, 255, 1),
            0 0 24px rgba(255, 255, 255, 0.8),
            0 0 36px rgba(255, 255, 255, 0.4) !important;
    }
    17% { 
        opacity: 0.9 !important; 
        transform: scale(1.2) !important;
    }
}

@keyframes sparkleBeams {
    0%, 90%, 100% { 
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    5%, 15% { 
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
    }
    10% { 
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* ============================================
   RAINY WEATHER - DAY
   ============================================ */

.weather-rainy.weather-day .weather-bg-layer,
.weather-rain.weather-day .weather-bg-layer,
.weather-drizzle.weather-day .weather-bg-layer {
    background: linear-gradient(to bottom, 
        #5B6B7F 0%, 
        #6B8E9F 30%, 
        #8BA8B8 60%, 
        #A5BDCE 100%
    );
    animation: rainySway 6s ease-in-out infinite;
}

/* Dark rain clouds - layer 1 */
.weather-rainy.weather-day .weather-bg-layer::before,
.weather-rain.weather-day .weather-bg-layer::before,
.weather-drizzle.weather-day .weather-bg-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 300px;
    height: 150px;
    background: radial-gradient(ellipse at top, rgba(80, 90, 110, 0.6) 0%, rgba(80, 90, 110, 0.3) 50%, transparent 80%);
    border-radius: 50%;
    animation: cloudDrift 35s linear infinite;
    filter: blur(3px);
}

/* Dark rain clouds - layer 2 */
.weather-rainy.weather-day .weather-bg-layer::after,
.weather-rain.weather-day .weather-bg-layer::after,
.weather-drizzle.weather-day .weather-bg-layer::after {
    content: '';
    position: absolute;
    top: 5%;
    right: -25%;
    width: 280px;
    height: 140px;
    background: radial-gradient(ellipse at top, rgba(90, 100, 120, 0.5) 0%, rgba(90, 100, 120, 0.25) 50%, transparent 80%);
    border-radius: 50%;
    animation: cloudDrift 40s linear infinite;
    animation-delay: 5s;
    filter: blur(3px);
}

/* Rain drops - cartoon-style icon droplets */
.weather-rainy .weather-particles .rain-drop,
.weather-rain .weather-particles .rain-drop,
.weather-drizzle .weather-particles .rain-drop {
    position: absolute;
    animation: rainFall linear infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 100, 200, 0.4));
    transform-origin: center;
    user-select: none;
    pointer-events: none;
}

@keyframes rainySway {
    0%, 100% { filter: brightness(0.95); }
    50% { filter: brightness(1); }
}

@keyframes cloudDrift {
    from { transform: translateX(0); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    to { transform: translateX(calc(100vw + 350px)); opacity: 0; }
}

@keyframes rainFall {
    0% { 
        transform: translateY(-50px) translateX(0) rotate(var(--rotation, 0deg)); 
        opacity: 0; 
    }
    5% { opacity: 1; }
    10% { transform: translateY(50px) translateX(5px) rotate(var(--rotation, 0deg)) scale(1.1); }
    95% { opacity: 1; }
    100% { 
        transform: translateY(450px) translateX(25px) rotate(var(--rotation, 0deg)) scale(0.8); 
        opacity: 0; 
    }
}

/* ============================================
   RAINY WEATHER - NIGHT
   ============================================ */

.weather-rainy.weather-night .weather-bg-layer,
.weather-rain.weather-night .weather-bg-layer,
.weather-drizzle.weather-night .weather-bg-layer {
    background: linear-gradient(to bottom, 
        #1a2332 0%, 
        #2c3a4e 40%, 
        #3d4f66 100%
    );
}

/* Rain drops for night - slightly brighter glow */
.weather-rainy.weather-night .weather-particles .rain-drop,
.weather-rain.weather-night .weather-particles .rain-drop,
.weather-drizzle.weather-night .weather-particles .rain-drop {
    filter: drop-shadow(0 2px 6px rgba(100, 180, 255, 0.6)) 
            drop-shadow(0 0 4px rgba(150, 200, 255, 0.4));
}

/* ============================================
   SNOWY WEATHER - DAY & NIGHT
   ============================================ */

.weather-snowy.weather-day .weather-bg-layer,
.weather-snow.weather-day .weather-bg-layer,
.weather-sleet.weather-day .weather-bg-layer {
    background: linear-gradient(to bottom, 
        #C5D5E4 0%, 
        #D5E5F4 40%, 
        #E5F0F8 100%
    );
}

.weather-snowy.weather-night .weather-bg-layer,
.weather-snow.weather-night .weather-bg-layer,
.weather-sleet.weather-night .weather-bg-layer {
    background: linear-gradient(to bottom, 
        #1E3A5F 0%, 
        #2D4A6E 50%, 
        #3C5A7D 100%
    );
}

/* Snow clouds */
.weather-snowy .weather-bg-layer::before,
.weather-snow .weather-bg-layer::before,
.weather-sleet .weather-bg-layer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20%;
    width: 250px;
    height: 120px;
    background: radial-gradient(ellipse at top, rgba(200, 210, 220, 0.5) 0%, rgba(200, 210, 220, 0.2) 60%, transparent 85%);
    border-radius: 50%;
    animation: cloudDrift 50s linear infinite;
    filter: blur(2px);
}

/* Snowflakes - cartoon-style with gentle rotation */
.weather-snowy .weather-particles .snowflake,
.weather-snow .weather-particles .snowflake,
.weather-sleet .weather-particles .snowflake {
    position: absolute;
    color: rgba(255, 255, 255, 0.95);
    animation: snowFall 10s ease-in-out infinite, snowRotate var(--rotation-speed, 8s) linear infinite;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9),
                 0 0 12px rgba(200, 220, 255, 0.5);
    filter: drop-shadow(0 2px 4px rgba(150, 180, 220, 0.3));
    user-select: none;
}

@keyframes snowFall {
    0% { 
        transform: translateY(-50px) translateX(0) scale(0.8); 
        opacity: 0; 
    }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { 
        transform: translateY(450px) translateX(var(--drift-amount, 80px)) scale(1.2); 
        opacity: 0; 
    }
}

@keyframes snowRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   THUNDERSTORM - ENHANCED WITH LIGHTNING
   ============================================ */

.weather-stormy .weather-bg-layer,
.weather-thunderstorm .weather-bg-layer {
    background: linear-gradient(to bottom, 
        #1a1f2e 0%, 
        #2c3e50 40%, 
        #34495e 80%, 
        #4a5568 100%
    );
}

/* Heavy storm clouds */
.weather-stormy .weather-bg-layer::before,
.weather-thunderstorm .weather-bg-layer::before {
    content: '';
    position: absolute;
    top: -5%;
    left: -30%;
    width: 400px;
    height: 200px;
    background: radial-gradient(ellipse at top, rgba(40, 50, 65, 0.9) 0%, rgba(40, 50, 65, 0.5) 50%, transparent 80%);
    border-radius: 50%;
    animation: stormCloudMove 25s linear infinite;
    filter: blur(4px);
}

/* Lightning flash overlay */
.weather-stormy .weather-bg-layer::after,
.weather-thunderstorm .weather-bg-layer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 60% 30%, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(200, 220, 255, 0.4) 20%, 
        transparent 40%
    );
    opacity: 0;
    animation: lightningFlash 3s ease-in-out infinite;
    z-index: 3;
}

/* Lightning bolt effect - cartoon-style icon bolt - Primary */
.weather-stormy .weather-particles::after,
.weather-thunderstorm .weather-particles::after {
    content: '⚡';
    position: absolute;
    top: 10%;
    left: 60%;
    font-size: 50px;
    opacity: 0;
    animation: lightningBolt 3s ease-in-out infinite;
    z-index: 4;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 1))
            drop-shadow(0 0 20px rgba(255, 255, 100, 0.8))
            drop-shadow(0 0 30px rgba(255, 220, 0, 0.6));
    transform-origin: top center;
}

/* Secondary lightning bolt - left side, delayed */
.weather-stormy .weather-particles::before,
.weather-thunderstorm .weather-particles::before {
    content: '⚡';
    position: absolute;
    top: 15%;
    left: 30%;
    font-size: 40px;
    opacity: 0;
    animation: lightningBolt 3s ease-in-out infinite 0.8s;
    z-index: 4;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 16px rgba(255, 255, 100, 0.7))
            drop-shadow(0 0 24px rgba(255, 220, 0, 0.5));
    transform-origin: top center;
}

/* Heavy rain for thunderstorm - more intense icon drops */
.weather-stormy .weather-particles .rain-drop,
.weather-thunderstorm .weather-particles .rain-drop {
    filter: drop-shadow(0 2px 6px rgba(100, 180, 255, 0.7))
            drop-shadow(0 0 8px rgba(150, 200, 255, 0.5));
    animation: heavyRainFall 0.5s linear infinite;
}

@keyframes stormCloudMove {
    from { transform: translateX(0) translateY(0); }
    to { transform: translateX(calc(100vw + 450px)) translateY(20px); }
}

@keyframes lightningFlash {
    0%, 10% { opacity: 0; }
    10.5% { opacity: 0.4; }
    11% { opacity: 0; }
    11.5% { opacity: 0.9; }
    12% { opacity: 0; }
    12.5% { opacity: 1; }
    14% { opacity: 0; }
    
    50%, 60% { opacity: 0; }
    60.5% { opacity: 0.5; }
    61% { opacity: 0; }
    61.5% { opacity: 1; }
    63% { opacity: 0; }
    
    85%, 90% { opacity: 0; }
    90.5% { opacity: 0.6; }
    91% { opacity: 0; }
    91.5% { opacity: 0.9; }
    92% { opacity: 0; }
    92.5% { opacity: 1; }
    94% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes lightningBolt {
    0%, 10% { opacity: 0; transform: scale(0) rotate(-10deg); }
    10.5% { opacity: 0.4; transform: scale(1.3) rotate(5deg); }
    11% { opacity: 0; transform: scale(0.9) rotate(-5deg); }
    11.5% { opacity: 0.9; transform: scale(1.5) rotate(10deg); }
    12% { opacity: 0; transform: scale(1) rotate(0deg); }
    12.5% { opacity: 1; transform: scale(1.6) rotate(-8deg); }
    13% { opacity: 0.6; transform: scale(1.3) rotate(5deg); }
    14% { opacity: 0; transform: scale(0) rotate(0deg); }
    
    50%, 60% { opacity: 0; transform: scale(0) rotate(8deg); }
    60.5% { opacity: 0.5; transform: scale(1.4) rotate(-10deg); }
    61% { opacity: 0; transform: scale(1) rotate(5deg); }
    61.5% { opacity: 1; transform: scale(1.7) rotate(12deg); }
    62% { opacity: 0.7; transform: scale(1.4) rotate(-5deg); }
    63% { opacity: 0; transform: scale(0) rotate(0deg); }
    
    85%, 90% { opacity: 0; transform: scale(0) rotate(-15deg); }
    90.5% { opacity: 0.6; transform: scale(1.5) rotate(8deg); }
    91% { opacity: 0; transform: scale(1.1) rotate(-8deg); }
    91.5% { opacity: 0.95; transform: scale(1.8) rotate(15deg); }
    92% { opacity: 0; transform: scale(1.2) rotate(0deg); }
    92.5% { opacity: 1; transform: scale(1.9) rotate(-12deg); }
    93% { opacity: 0.5; transform: scale(1.3) rotate(5deg); }
    94% { opacity: 0; transform: scale(0) rotate(0deg); }
    100% { opacity: 0; transform: scale(0) rotate(0deg); }
}

@keyframes heavyRainFall {
    0% { 
        transform: translateY(-50px) translateX(0) rotate(var(--rotation, 0deg)) scale(1); 
        opacity: 0; 
    }
    5% { opacity: 1; transform: translateY(20px) scale(1.2); }
    10% { transform: translateY(80px) translateX(10px) rotate(var(--rotation, 0deg)) scale(1.15); }
    95% { opacity: 1; }
    100% { 
        transform: translateY(450px) translateX(35px) rotate(var(--rotation, 0deg)) scale(0.9); 
        opacity: 0; 
    }
}

/* ============================================
   CLOUDY WEATHER - SIMPLE PARALLAX EFFECT
   ============================================ */

.weather-cloudy.weather-day .weather-bg-layer {
    background: linear-gradient(to bottom, 
        #7B8FA3 0%, 
        #94A3B8 30%, 
        #B8C6DB 70%, 
        #D4DDE6 100%
    );
}

.weather-cloudy.weather-night .weather-bg-layer {
    background: linear-gradient(to bottom, 
        #1E2A3A 0%, 
        #2E3F52 50%, 
        #3E5569 100%
    );
}

/* Moon for cloudy night - using consistent realistic moon */
.weather-cloudy.weather-night .weather-bg-layer::before {
    content: '';
    position: absolute;
    top: 5%;
    right: 22%;
    width: 70px;
    height: 70px;
    background: 
        /* Surface texture overlay */
        radial-gradient(circle at 45% 35%, rgba(0, 0, 0, 0.15) 2px, transparent 3px),
        radial-gradient(circle at 60% 50%, rgba(0, 0, 0, 0.1) 1px, transparent 2px),
        radial-gradient(circle at 30% 60%, rgba(0, 0, 0, 0.12) 2px, transparent 3px),
        radial-gradient(circle at 70% 25%, rgba(0, 0, 0, 0.08) 1px, transparent 2px),
        radial-gradient(circle at 25% 40%, rgba(0, 0, 0, 0.1) 1px, transparent 2px),
        /* Main moon surface */
        radial-gradient(circle at 30% 20%, 
            #FFF8DC 0%, 
            #F5F5DC 25%, 
            #E8E8D0 50%, 
            #DDD8C8 75%, 
            #C8C8B0 90%, 
            #B0B0A0 100%
        );
    border-radius: 50%;
    box-shadow: 
        0 0 25px rgba(245, 245, 220, 0.7),
        0 0 45px rgba(245, 245, 220, 0.4),
        0 0 65px rgba(245, 245, 220, 0.2),
        inset -12px -12px 20px rgba(0, 0, 0, 0.2),
        inset 8px 8px 15px rgba(255, 255, 255, 0.1);
    animation: moonFloat 8s ease-in-out infinite;
    z-index: 4;
    opacity: 0.8; /* Slightly dimmed due to clouds */
}

/* Cartoon-style cloud floating with gentle bobbing */
@keyframes cloudParallax {
    0% { 
        transform: translateX(-25px) translateY(0px) scale(1); 
    }
    25% { 
        transform: translateX(0px) translateY(var(--float-distance, 20px)) scale(1.05); 
    }
    50% { 
        transform: translateX(25px) translateY(0px) scale(1); 
    }
    75% { 
        transform: translateX(0px) translateY(calc(var(--float-distance, 20px) * -1)) scale(0.95); 
    }
    100% { 
        transform: translateX(-25px) translateY(0px) scale(1); 
    }
}

/* ============================================
   PARTLY CLOUDY - SUN WITH CLOUDS
   ============================================ */

.weather-partly-cloudy.weather-day .weather-bg-layer {
    background: linear-gradient(to bottom, 
        #5BA4E5 0%, 
        #70B4EE 30%, 
        #87CEEB 70%, 
        #A5D8F5 100%
    );
}

.weather-partly-cloudy.weather-night .weather-bg-layer {
    background: linear-gradient(to bottom, 
        #0F1C2E 0%, 
        #1E3A5F 50%, 
        #2D4A6E 100%
    );
}

/* Realistic sun for partly cloudy day */
.weather-partly-cloudy.weather-day .weather-bg-layer::before {
    content: '';
    position: absolute;
    top: 5%;
    right: 10%;
    width: 70px;
    height: 70px;
    background: 
        /* Inner core - brightest */
        radial-gradient(circle at 35% 30%, 
            #FFFFFF 0%, 
            #FFF8DC 15%, 
            #FFD700 35%, 
            #FFB347 60%, 
            #FF8C00 85%, 
            rgba(255, 140, 0, 0.3) 100%
        );
    border-radius: 50%;
    box-shadow: 
        /* Inner bright glow */
        0 0 18px rgba(255, 255, 255, 0.85),
        0 0 35px rgba(255, 215, 0, 0.75),
        0 0 50px rgba(255, 165, 0, 0.55),
        0 0 70px rgba(255, 140, 0, 0.35),
        /* Outer warm glow - slightly reduced for partly cloudy */
        0 0 100px rgba(255, 140, 0, 0.18),
        0 0 130px rgba(255, 140, 0, 0.08);
    animation: sunPulseGlow 8s ease-in-out infinite;
    z-index: 3;
}

/* Drifting clouds for partly cloudy */
.weather-partly-cloudy.weather-day .weather-bg-layer::after {
    content: '';
    position: absolute;
    top: 40%;
    left: -25%;
    width: 220px;
    height: 110px;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.4) 50%, transparent 75%);
    border-radius: 50%;
    animation: cloudParallaxFast 35s linear infinite;
    filter: blur(2px);
    z-index: 2;
}

/* Moon for partly cloudy night - consistent realistic moon */
.weather-partly-cloudy.weather-night .weather-bg-layer::before {
    content: '';
    position: absolute;
    top: 5%;
    right: 22%;
    width: 70px;
    height: 70px;
    background: 
        /* Surface texture overlay */
        radial-gradient(circle at 45% 35%, rgba(0, 0, 0, 0.15) 2px, transparent 3px),
        radial-gradient(circle at 60% 50%, rgba(0, 0, 0, 0.1) 1px, transparent 2px),
        radial-gradient(circle at 30% 60%, rgba(0, 0, 0, 0.12) 2px, transparent 3px),
        radial-gradient(circle at 70% 25%, rgba(0, 0, 0, 0.08) 1px, transparent 2px),
        radial-gradient(circle at 25% 40%, rgba(0, 0, 0, 0.1) 1px, transparent 2px),
        /* Main moon surface */
        radial-gradient(circle at 30% 20%, 
            #FFF8DC 0%, 
            #F5F5DC 25%, 
            #E8E8D0 50%, 
            #DDD8C8 75%, 
            #C8C8B0 90%, 
            #B0B0A0 100%
        );
    border-radius: 50%;
    box-shadow: 
        0 0 25px rgba(245, 245, 220, 0.7),
        0 0 45px rgba(245, 245, 220, 0.4),
        0 0 65px rgba(245, 245, 220, 0.2),
        inset -12px -12px 20px rgba(0, 0, 0, 0.2),
        inset 8px 8px 15px rgba(255, 255, 255, 0.1);
    animation: moonFloat 8s ease-in-out infinite;
    z-index: 3;
}

/* ============================================
   FOGGY WEATHER - MULTIPLE MOVING LAYERS
   ============================================ */

.weather-foggy .weather-bg-layer,
.weather-fog .weather-bg-layer {
    background: linear-gradient(to bottom, 
        #D4DDE6 0%, 
        #E8EEF2 50%, 
        #F0F4F8 100%
    );
}

.weather-foggy.weather-night .weather-bg-layer,
.weather-fog.weather-night .weather-bg-layer {
    background: linear-gradient(to bottom, 
        #3A4557 0%, 
        #4A5568 50%, 
        #5A6577 100%
    );
}

/* Fog layer 1 - Bottom */
.weather-foggy .weather-bg-layer::before,
.weather-fog .weather-bg-layer::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: 
        radial-gradient(ellipse at bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 40%, transparent 70%);
    animation: fogDriftBottom 15s ease-in-out infinite;
    filter: blur(8px);
}

/* Fog layer 2 - Middle */
.weather-foggy .weather-bg-layer::after,
.weather-fog .weather-bg-layer::after {
    content: '';
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    height: 50%;
    background: 
        radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 50%, transparent 75%);
    animation: fogDriftMiddle 18s ease-in-out infinite;
    animation-delay: 3s;
    filter: blur(10px);
}

/* Fog layer 3 - Top */
.weather-foggy .weather-particles::before,
.weather-fog .weather-particles::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: 
        radial-gradient(ellipse at top, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.15) 50%, transparent 80%);
    animation: fogDriftTop 20s ease-in-out infinite;
    animation-delay: 6s;
    filter: blur(12px);
}

/* Fog particles - cartoon-style floating mist icons */
.weather-foggy .weather-particles .fog-particle,
.weather-fog .weather-particles .fog-particle {
    position: absolute;
    animation: fogFloat linear infinite;
    filter: drop-shadow(0 2px 4px rgba(200, 200, 220, 0.3));
    user-select: none;
    pointer-events: none;
    z-index: 6;
}

@keyframes fogDriftBottom {
    0%, 100% { transform: translateX(0); opacity: 0.6; }
    50% { transform: translateX(30px); opacity: 0.8; }
}

@keyframes fogDriftMiddle {
    0%, 100% { transform: translateX(0); opacity: 0.4; }
    50% { transform: translateX(-25px); opacity: 0.6; }
}

@keyframes fogDriftTop {
    0%, 100% { transform: translateX(0); opacity: 0.3; }
    50% { transform: translateX(20px); opacity: 0.5; }
}

@keyframes fogFloat {
    0% { 
        transform: translateX(0) translateY(0) scale(1); 
        opacity: 0; 
    }
    10% { opacity: 1; }
    25% { 
        transform: translateX(var(--drift-distance, 50px)) translateY(-20px) scale(1.1); 
    }
    50% { 
        transform: translateX(calc(var(--drift-distance, 50px) * 2)) translateY(10px) scale(0.9); 
    }
    75% { 
        transform: translateX(calc(var(--drift-distance, 50px) * 3)) translateY(-15px) scale(1.05); 
    }
    90% { opacity: 1; }
    100% { 
        transform: translateX(calc(var(--drift-distance, 50px) * 4)) translateY(5px) scale(0.8); 
        opacity: 0; 
    }
}

/* ============================================
   TEXT READABILITY ENHANCEMENTS
   ============================================ */

.weather-widget .weather-content {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Day mode - dark text on light backgrounds */
.weather-widget.weather-day .weather-content .text-gray-800,
.weather-widget.weather-day .weather-content .text-gray-700 {
    color: #1f2937 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.weather-widget.weather-day .weather-content .text-gray-600 {
    color: #4b5563 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Night mode - white text on dark backgrounds */
.weather-widget.weather-night .weather-content .text-gray-800 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.weather-widget.weather-night .weather-content .text-gray-700 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.weather-widget.weather-night .weather-content .text-gray-600 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.weather-widget .bg-gray-100 {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(4px);
}

.weather-widget .bg-gray-50 {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(4px);
}

/* Night mode card adjustments */
.weather-widget.weather-night .bg-gray-100 {
    background-color: rgba(55, 65, 81, 0.85) !important;
}

.weather-widget.weather-night .bg-gray-50 {
    background-color: rgba(75, 85, 99, 0.8) !important;
}

.weather-widget.weather-night .border-gray-200 {
    border-color: rgba(156, 163, 175, 0.3) !important;
}

/* Force weather widget container styling */
.weather-widget {
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

/* Header text visibility */
.weather-widget .sidebar-section-toggle,
.weather-widget h3,
.weather-widget h4 {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
}

/* Header titles - ALWAYS stay dark */
.weather-widget .sidebar-section-toggle h3,
.weather-widget h4 {
    color: #1f2937 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

/* Weather location text */
.weather-widget.weather-day .weather-location {
    color: #1f2937 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important;
}

.weather-widget.weather-night .weather-content .weather-location {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* ============================================
   ACCESSIBILITY: REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .weather-animation-container *,
    .weather-bg-layer,
    .weather-bg-layer::before,
    .weather-bg-layer::after,
    .weather-particles,
    .weather-particles::before,
    .weather-particles::after,
    .rain-drop,
    .snowflake,
    .fog-particle,
    .star {
        animation: none !important;
        transition: none !important;
    }
    
    .weather-bg-layer {
        opacity: 0.8;
    }
}

/* ============================================
   MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
    /* Reduce particle complexity on mobile - but keep more rain visible */
    .weather-particles .rain-drop:nth-child(n+80),
    .weather-particles .snowflake:nth-child(n+8),
    .weather-particles .fog-particle:nth-child(n+16),
    .weather-particles .star:nth-child(n+13) {
        display: none;
    }
    
    /* Simplify animations */
    .weather-bg-layer::before,
    .weather-bg-layer::after {
        animation-duration: 20s !important;
    }
}

/* ============================================
   PERFORMANCE: GPU ACCELERATION
   ============================================ */

.weather-animation-container,
.weather-bg-layer,
.weather-particles,
.rain-drop,
.snowflake,
.fog-particle,
.star {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
    transform: translateZ(0);
}