/* Snowfall Effect CSS */
/* Hiệu ứng bông tuyết rơi - Áp dụng trên tất cả các trang */

:root {
    --snowflake-color: #dc3545; /* Màu đỏ mặc định */
    --snowflake-shadow: rgba(220, 53, 69, 0.5); /* Shadow màu đỏ */
}

.snowfall-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 1 !important; /* Thấp hơn banner để không che */
    overflow: hidden !important;
}

.snowflake {
    position: absolute !important;
    top: -10px !important;
    color: var(--snowflake-color) !important;
    user-select: none !important;
    pointer-events: none !important;
    font-size: 1em !important;
    animation-name: snowfall !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    opacity: 0.8 !important;
    text-shadow: 0 0 5px var(--snowflake-shadow) !important;
}

/* Các kích thước bông tuyết khác nhau */
.snowflake.small {
    font-size: 0.8em !important;
    opacity: 0.6 !important;
}

.snowflake.medium {
    font-size: 1.2em !important;
    opacity: 0.7 !important;
}

.snowflake.large {
    font-size: 1.5em !important;
    opacity: 0.9 !important;
}

/* Animation rơi xuống */
@keyframes snowfall {
    0% {
        transform: translateY(-100px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(calc(100vh + 100px)) rotate(360deg);
        opacity: 0;
    }
}

/* Animation lắc lư nhẹ */
@keyframes sway {
    0%, 100% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(10px);
    }
    75% {
        transform: translateX(-10px);
    }
}

/* Kết hợp animation rơi và lắc lư */
.snowflake.sway {
    animation-name: snowfall, sway !important;
}

/* Responsive - Giảm số lượng bông tuyết trên mobile */
@media (max-width: 768px) {
    .snowflake:nth-child(n+20) {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .snowflake:nth-child(n+15) {
        display: none !important;
    }
    
    .snowflake {
        font-size: 0.8em !important;
    }
}

/* Tối ưu hiệu suất */
.snowfall-container {
    will-change: transform !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

.snowflake {
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* Tùy chọn tắt hiệu ứng cho người dùng có vấn đề về motion */
@media (prefers-reduced-motion: reduce) {
    .snowfall-container {
        display: none !important;
    }
}

/* Theme variations */
.snowfall-container.default-theme .snowflake,
.snowfall-container .snowflake {
    color: var(--snowflake-color) !important;
    text-shadow: 0 0 5px var(--snowflake-shadow) !important;
}

.snowfall-container.winter-theme .snowflake {
    color: var(--snowflake-color) !important;
    text-shadow: 0 0 8px var(--snowflake-shadow) !important;
}

.snowfall-container.christmas-theme .snowflake {
    color: var(--snowflake-color) !important;
    text-shadow: 0 0 10px var(--snowflake-shadow) !important;
}

.snowfall-container.novazone-theme .snowflake {
    color: var(--snowflake-color) !important;
    text-shadow: 0 0 12px var(--snowflake-shadow) !important;
}

/* Red theme - Màu đỏ */
.snowfall-container.red-theme {
    --snowflake-color: #dc3545;
    --snowflake-shadow: rgba(220, 53, 69, 0.5);
}

/* Blue theme - Màu xanh dương */
.snowfall-container.blue-theme {
    --snowflake-color: #16bcdc;
    --snowflake-shadow: rgba(22, 188, 220, 0.5);
}

/* Green theme - Màu xanh lá */
.snowfall-container.green-theme {
    --snowflake-color: #28a745;
    --snowflake-shadow: rgba(40, 167, 69, 0.5);
}

/* Purple theme - Màu tím */
.snowfall-container.purple-theme {
    --snowflake-color: #6f42c1;
    --snowflake-shadow: rgba(111, 66, 193, 0.5);
}

/* Gold theme - Màu vàng */
.snowfall-container.gold-theme {
    --snowflake-color: #ffc107;
    --snowflake-shadow: rgba(255, 193, 7, 0.5);
}

/* Pause animation khi hover (tùy chọn) */
.snowfall-container.paused .snowflake {
    animation-play-state: paused !important;
}