#fw-section-featured-collection-4b998805-7c96-476f-89fd-1c017fe03903 {

/* --- 1. Global Setup (Required for both) --- */

/* The main container to hold all the flakes */
#weather-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 2147483647; /* Highest Z-index to be on top */
    pointer-events: none; /* Allows clicks through the effect */
}

/* The core animation: falling from above to below the screen */
@keyframes fall {
    0% { transform: translateY(-100vh) translateX(0px); }
    100% { transform: translateY(100vh) translateX(50px); } /* Added slight horizontal movement */
}

/* --- 2. SNOW STYLES (Uncomment this section for SNOW) --- */
/*
.weather-flake {
    position: absolute;
    background: white;
    border-radius: 50%;
    animation: fall linear infinite;
    opacity: 0.8;
}
*/

/* --- 2. RAIN STYLES (Uncomment this section for RAIN) --- */

.weather-flake {
    position: absolute;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(200, 200, 255, 0.7)); 
    width: 1px; /* Thin line for a rain drop */
    height: 18px; /* Elongated drop length */
    border-radius: 0;
    animation: fall linear infinite;
    opacity: 0.6;
}


/* --- 3. Fixed Randomness (Makes each flake unique) --- */

/* Flake 1: Fast, small */
.weather-flake:nth-child(1) { left: 10%; width: 2px; height: 2px; animation-duration: 6s; animation-delay: 0s; }
/* Flake 2: Medium size, slower */
.weather-flake:nth-child(2) { left: 25%; width: 4px; height: 4px; animation-duration: 9s; animation-delay: 1s; }
/* Flake 3: Large, very slow */
.weather-flake:nth-child(3) { left: 40%; width: 6px; height: 6px; animation-duration: 12s; animation-delay: 2s; }
/* Flake 4: Thin, medium speed */
.weather-flake:nth-child(4) { left: 55%; width: 1px; height: 10px; animation-duration: 7s; animation-delay: 3s; }
/* Flake 5: Small, medium speed */
.weather-flake:nth-child(5) { left: 70%; width: 3px; height: 3px; animation-duration: 8s; animation-delay: 4s; }
/* Flake 6: Fast, large */
.weather-flake:nth-child(6) { left: 85%; width: 5px; height: 5px; animation-duration: 5s; animation-delay: 5s; }
/* Flake 7 */
.weather-flake:nth-child(7) { left: 5%; width: 4px; height: 4px; animation-duration: 10s; animation-delay: 6s; }
/* Flake 8 */
.weather-flake:nth-child(8) { left: 95%; width: 2px; height: 2px; animation-duration: 7s; animation-delay: 7s; }
/* Flake 9 */
.weather-flake:nth-child(9) { left: 15%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: 8s; }
/* Flake 10 */
.weather-flake:nth-child(10) { left: 75%; width: 3px; height: 3px; animation-duration: 11s; animation-delay: 9s; }
}










#fw-section-header {
--font-heading-scale: 0.98;
--font-body-scale: 1.36;
}