/* Snow Pile Effect */
.snow-cap {
    position: absolute;
    top: -2px;
    /* Adjusted as requested */
    left: 0;
    width: 100%;
    /* height is controlled by JS */
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #c7c7c7 100%);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
    pointer-events: none;
    z-index: 1;
    transition: height 0.5s ease;
    /* Smooth growth */
}



/* Falling Snow Animation */
.snowflake {
    position: fixed;
    top: 0;
    left: 0;
    color: #fff;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    z-index: 1000;
    pointer-events: none;
    user-select: none;
    /* Optimisation GPU pour mobile */
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Animation combinée avec transform pour meilleures performances */
    animation-name: fall-transform;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/* Animation optimisée utilisant transform au lieu de top */
@keyframes fall-transform {
    0% {
        transform: translateY(-50px) translateX(0);
        opacity: 1;
    }

    25% {
        transform: translateY(calc(25vh - 50px)) translateX(15px);
    }

    50% {
        transform: translateY(calc(50vh - 50px)) translateX(-15px);
    }

    75% {
        transform: translateY(calc(75vh - 50px)) translateX(10px);
    }

    100% {
        transform: translateY(calc(100vh + 50px)) translateX(0);
        opacity: 0;
    }
}

/* Réduction des animations sur les appareils avec préférence réduite */
@media (prefers-reduced-motion: reduce) {
    .snowflake {
        animation: none;
        display: none;
    }
}