/* Новогоднее оформление с вашими изображениями */

/* Еловые ветки в левом верхнем углу */
.christmas-branch-left {
    position: fixed;
    top: 0;
    left: 0;
    width: 335px; /* Уменьшено на треть */
    height: 400px; /* Уменьшено на треть */
    background-image: url('../static/christmas/branch.png');
    background-size: 670px auto; /* Пропорционально */
    background-repeat: no-repeat;
    background-position: 0 0;
    z-index: 9999;
    pointer-events: none;
    animation: branch-swing-left 6s ease-in-out infinite;
}

/* Еловые ветки в правом верхнем углу */
.christmas-branch-right {
    position: fixed;
    top: 0;
    right: 0;
    width: 335px; /* Уменьшено на треть */
    height: 400px; /* Уменьшено на треть */
    background-image: url('../static/christmas/branch.png');
    background-size: 670px auto; /* Пропорционально */
    background-repeat: no-repeat;
    background-position: -335px 0; /* Сдвигаем пропорционально */
    z-index: 9999;
    pointer-events: none;
    animation: branch-swing-right 6s ease-in-out infinite;
}

/* Анимация покачивания левой ветки */
@keyframes branch-swing-left {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-0.5deg);
    }
    75% {
        transform: rotate(0.5deg);
    }
}

/* Анимация покачивания правой ветки */
@keyframes branch-swing-right {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(0.5deg);
    }
    75% {
        transform: rotate(-0.5deg);
    }
}

/* Гирлянда по верху страницы с вашими лампочками */
.christmas-garland-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 36px; /* Высота одного ряда лампочек */
    background-image: url('../static/christmas/garland.png');
    background-repeat: repeat-x; /* Повторяем по горизонтали */
    background-position: 0 0;
    background-size: 100px 144px; /* Точный размер исходного изображения */
    z-index: 9998;
    pointer-events: none;
    animation: garland-blink 2s step-start infinite; /* Ступенчатая анимация */
    overflow: hidden;
}

/* Анимация мигания гирлянды (переключение между 4 кадрами) */
@keyframes garland-blink {
    0% {
        background-position: 0 0; /* Первый ряд */
    }
    25% {
        background-position: 0 -36px; /* Второй ряд */
    }
    50% {
        background-position: 0 -72px; /* Третий ряд */
    }
    75% {
        background-position: 0 -108px; /* Четвёртый ряд */
    }
    100% {
        background-position: 0 0; /* Возврат к первому */
    }
}

/* Адаптив для планшетов */
@media (max-width: 1024px) {
    .christmas-branch-left,
    .christmas-branch-right {
        width: 234px; /* Уменьшено на треть */
        height: 280px; /* Уменьшено на треть */
    }

    .christmas-branch-left {
        background-size: 468px auto;
    }

    .christmas-branch-right {
        background-size: 468px auto;
        background-position: -234px 0;
    }
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .christmas-branch-left,
    .christmas-branch-right {
        width: 167px; /* Уменьшено на треть */
        height: 200px; /* Уменьшено на треть */
    }

    .christmas-branch-left {
        background-size: 334px auto;
    }

    .christmas-branch-right {
        background-size: 334px auto;
        background-position: -167px 0;
    }

    .christmas-garland-top {
        height: 30px;
        background-size: 83px 120px; /* Пропорционально уменьшаем */
    }

    @keyframes garland-blink {
        0% { background-position: 0 0; }
        25% { background-position: 0 -30px; }
        50% { background-position: 0 -60px; }
        75% { background-position: 0 -90px; }
        100% { background-position: 0 0; }
    }
}

/* Для совсем маленьких экранов - убираем ветки, оставляем только гирлянду */
@media (max-width: 480px) {
    .christmas-branch-left,
    .christmas-branch-right {
        display: none;
    }

    .christmas-garland-top {
        height: 24px;
        background-size: 67px 96px;
    }

    @keyframes garland-blink {
        0% { background-position: 0 0; }
        25% { background-position: 0 -24px; }
        50% { background-position: 0 -48px; }
        75% { background-position: 0 -72px; }
        100% { background-position: 0 0; }
    }
}

/* Опциональный снегопад */
.snowflake {
    position: fixed;
    top: -10px;
    color: #fff;
    font-size: 1em;
    font-family: Arial, sans-serif;
    text-shadow: 0 0 5px rgba(0,0,0,0.3);
    z-index: 9997;
    pointer-events: none;
    user-select: none;
    animation: fall linear infinite;
}

@keyframes fall {
    to {
        transform: translateY(100vh) rotate(360deg);
    }
}

/* Разные снежинки */
.snowflake:nth-child(1) { left: 5%; animation-duration: 10s; animation-delay: 0s; font-size: 1.5em; }
.snowflake:nth-child(2) { left: 15%; animation-duration: 12s; animation-delay: 2s; font-size: 1em; }
.snowflake:nth-child(3) { left: 25%; animation-duration: 8s; animation-delay: 4s; font-size: 1.2em; }
.snowflake:nth-child(4) { left: 35%; animation-duration: 11s; animation-delay: 1s; font-size: 0.8em; }
.snowflake:nth-child(5) { left: 45%; animation-duration: 9s; animation-delay: 3s; font-size: 1.3em; }
.snowflake:nth-child(6) { left: 55%; animation-duration: 13s; animation-delay: 0s; font-size: 1.1em; }
.snowflake:nth-child(7) { left: 65%; animation-duration: 10s; animation-delay: 5s; font-size: 0.9em; }
.snowflake:nth-child(8) { left: 75%; animation-duration: 14s; animation-delay: 2s; font-size: 1.4em; }
.snowflake:nth-child(9) { left: 85%; animation-duration: 11s; animation-delay: 4s; font-size: 1em; }
.snowflake:nth-child(10) { left: 95%; animation-duration: 12s; animation-delay: 6s; font-size: 1.2em; }

/* Отключение анимаций для экономии батареи */
@media (prefers-reduced-motion: reduce) {
    .snowflake,
    .christmas-branch-left,
    .christmas-branch-right,
    .christmas-garland-top {
        animation: none;
    }
}

/* Контейнер navbar должен иметь относительное позиционирование */
.navbar {
    position: relative;
}