/* ==================================== */
/* Snow Flake  */
/* ==================================== */
.snow-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; 
    z-index: 1000; /* Ensure it stays on top of all content */
    overflow: hidden; 
}
.snow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image: 
        radial-gradient(4px 4px at 50% 50%, white, transparent),
        radial-gradient(6px 6px at 20% 70%, white, transparent),
        radial-gradient(3px 3px at 80% 30%, white, transparent);
    
    -webkit-animation: snowfall 15s linear infinite;
    animation: snowfall 15s linear infinite;
}

/* ==================================== */
/* 2. Keyframes    */
/* ==================================== */
@-webkit-keyframes snowfall {
    0% {
        -webkit-transform: translate(0, -100%) rotate(0deg);
        transform: translate(0, -100%) rotate(0deg);
    }
    100% {
        -webkit-transform: translate(50vw, 100%) rotate(360deg);
        transform: translate(50vw, 100%) rotate(360deg);
    }
}

@keyframes snowfall {
    0% {
        -webkit-transform: translate(0, -100%) rotate(0deg);
        transform: translate(0, -100%) rotate(0deg);
    }
    100% {
        -webkit-transform: translate(50vw, 100%) rotate(360deg);
        transform: translate(50vw, 100%) rotate(360deg);
    }
}

/* ==================================== */
/* (Natural Look) */
/* ==================================== */
.layer1 {
    -webkit-animation-duration: 12s; /* Faster speed */
    animation-duration: 12s;
    background-size: 100px 100px; /* Larger snowflake spacing/size */
    opacity: 0.8;
}
.layer2 {
    -webkit-animation-duration: 18s; 
    animation-duration: 18s;
    background-size: 150px 150px; 
    opacity: 0.6;
    -webkit-animation-delay: 2s; /* Stagger the start time */
    animation-delay: 2s;
}
.layer3 {
    -webkit-animation-duration: 25s; /* Slower speed */
    animation-duration: 25s;
    background-size: 200px 200px; /* Smaller snowflake spacing/size */
    opacity: 0.4;
    -webkit-animation-delay: 5s; 
    animation-delay: 5s;
}