/* Snow Container */
#snowContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 2000;
}

/* Individual snowflake — frosted translucent crystal */
.snowflake {
    position: absolute;
    width: var(--snow-size, 16px);
    height: var(--snow-size, 16px);
    background: linear-gradient(
        128deg,
        rgba(255, 255, 255, 0.58) 0%,
        rgba(var(--primary-color-rgb), 0.14) 32%,
        rgba(var(--primary-color-rgb), 0.38) 52%,
        rgba(255, 255, 255, 0.28) 100%
    );
    transform-origin: center;
    will-change: transform, opacity;
    opacity: 0.75;
    mask-position: center;
    -webkit-mask-position: center;
    filter: drop-shadow(0 0 5px rgba(var(--primary-color-rgb), 0.2));
}

/* Snowflake SVG Masks */
.snowflake[data-type="snow_one"] {
    mask-image: url('assets/snow_one.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('assets/snow_one.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.snowflake[data-type="snow_two"] {
    mask-image: url('assets/snow_two.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('assets/snow_two.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.snowflake[data-type="snow_three"] {
    mask-image: url('assets/snow_three.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('assets/snow_three.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

/* Snow falling animation */
@keyframes snow-falling {
    0% {
        transform: translate(var(--start-x), -20px) rotate(0deg);
        opacity: 0;
    }
    12% {
        opacity: var(--snow-opacity-mid, 0.52);
    }
    50% {
        opacity: var(--snow-opacity-peak, 0.65);
    }
    88% {
        opacity: var(--snow-opacity-mid, 0.52);
    }
    100% {
        transform: translate(var(--end-x), calc(100vh + 20px)) rotate(360deg);
        opacity: 0;
    }
}

/* Snow swaying animation */
@keyframes snow-sway {
    from {
        margin-left: 0px;
    }
    to {
        margin-left: 20px;
    }
}

/* Snowflake animations */
.snowflake {
    animation: 
        snow-falling var(--fall-duration, 8s) linear infinite,
        snow-sway 3s ease-in-out infinite alternate;
}