/* /css/holiday.css */

/* Контейнер для снігу */
#holiday-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999; 
    pointer-events: none; /* Пропускає кліки */
    background: transparent;
    overflow: hidden;
}

/* Стиль сніжинки */
.snowflake {
    position: absolute;
    top: -25px; /* Стартова позиція вище екрану */
    
    /* ВИПРАВЛЕННЯ ВИДИМОСТІ: */
    color: #8ccbf7; /* Крижаний блакитний замість білого */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.3); /* Легка тінь, щоб було видно на білому */
    
    opacity: 0.8;
    z-index: 99999;
    user-select: none;
    cursor: default;
    
    /* Комбінована анімація: падіння + хитання */
    animation-name: fall, sway;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running;
}

/* Анімація падіння вниз */
@keyframes fall {
    0% { top: -25px; }
    100% { top: 100vh; }
}

/* Анімація хитання (вітер) */
@keyframes sway {
    0% { transform: translateX(0px) rotate(0deg); }
    25% { transform: translateX(15px) rotate(45deg); }
    50% { transform: translateX(0px) rotate(0deg); }
    75% { transform: translateX(-15px) rotate(-45deg); }
    100% { transform: translateX(0px) rotate(0deg); }
}

/* ПРОФЕСІЙНИЙ НЮАНС: 
   На мобільних ми не ховаємо сніг повністю, але можемо трохи зменшити його розмір,
   якщо потрібно. Але блок display: none ми ПРИБРАЛИ.
*/