/* ========================================
   ДЕД МОРОЗ НА САНЯХ - LOTTIE АНИМАЦИЯ
   Версия с исправленным скрытием после полета
   ======================================== */

.santa-lottie-container {
    position: fixed;
    width: 250px;
    height: 250px;
    z-index: 9996;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    pointer-events: none;
    /* Изначально полностью скрыт */
    opacity: 0;
    visibility: hidden;

    /* Удаляем top отсюда - он будет устанавливаться через JS */
    /* top: var(--start-top, 20%); */

    /* Оптимизация производительности */
    will-change: transform, left, opacity, top;

    /* Добавляем transition для плавного появления/исчезновения */
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* Класс для видимого состояния (управляется JS) */
.santa-lottie-container.visible {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   АНИМАЦИЯ СЛЕВА НАПРАВО (Left to Right)
   ======================================== */

.santa-lottie-container.flying-ltr {
    /* Убираем visibility из анимации - управляем через JS */
    /* visibility: visible; */

    /* Устанавливаем начальную позицию через JS */
    left: -400px;

    animation: santaFlyLTR 15s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

/* Упрощенная анимация слева направо - без opacity */
@keyframes santaFlyLTR {
    0% {
        /* left: -400px; устанавливается через JS */
        top: var(--start-top, 20%);
        transform: scale(0.95) rotate(2deg);
        /* opacity: 0; управляется через JS */
    }

    3% {
        /* opacity: 1; управляется через JS */
    }

    50% {
        top: var(--mid-top, 18%);
        transform: scale(1.05) rotate(-1deg);
    }

    97% {
        /* opacity: 1; управляется через JS */
    }

    100% {
        left: 115vw;
        top: var(--end-top, 15%);
        transform: scale(0.95) rotate(1deg);
        /* opacity: 0; управляется через JS */
    }
}

/* ========================================
   АНИМАЦИЯ СПРАВА НАЛЕВО (Right to Left)
   ======================================== */

.santa-lottie-container.flying-rtl {
    /* Убираем visibility из анимации - управляем через JS */
    /* visibility: visible; */

    /* Устанавливаем начальную позицию через JS */
    left: 110vw;

    animation: santaFlyRTL 15s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

/* Для десктопной версии RTL */
@keyframes santaFlyRTL {
    0% {
        left: 110vw;
        /* Начинаем справа за экраном */
        top: var(--start-top, 20%);
        transform: scale(0.95) scaleX(-1) rotate(2deg);
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    50% {
        top: var(--mid-top, 18%);
        transform: scale(1.05) scaleX(-1) rotate(-1deg);
    }

    97% {
        opacity: 1;
    }

    100% {
        left: -450px;
        /* Заканчиваем слева за экраном */
        top: var(--end-top, 15%);
        transform: scale(0.95) scaleX(-1) rotate(1deg);
        opacity: 0;
    }
}



/* Убираем анимацию для SVG, так как используем GIF */
.santa-lottie-container svg {
    display: none;
}

/* Фолбэк текст, если GIF не загрузился */
.santa-fallback {
    display: none;
    font-size: 200px;
    text-align: center;
    line-height: 250px;
}

.santa-lottie-container:not([style*="background-image"]) .santa-fallback,
.santa-lottie-container[style*="background-image: none"] .santa-fallback {
    display: block;
}

/* Адаптивность для мобильных */
@media (max-width: 480px) {
    .santa-lottie-container {
        width: 120px;
        height: 120px;
    }

    .santa-lottie-container.flying-ltr {
        left: -150px;
    }

    .santa-lottie-container.flying-rtl {
        left: calc(100% + 150px);
    }

    /* Упрощенная анимация полета для мобильных - LTR */
    @keyframes santaFlyLTR {
        0% {
            top: var(--start-top, 15%);
            /* left: -150px; устанавливается через JS */
            transform: scale(1) scaleX(1);
            /* opacity: 0; управляется через JS */
        }

        2% {
            /* opacity: 1; управляется через JS */
        }

        50% {
            top: var(--mid-top, 20%);
            /* left: 50%; будет рассчитано браузером */
            transform: scale(1.05) scaleX(1);
        }

        98% {
            top: var(--end-top, 12%);
            left: calc(100% + 150px);
            transform: scale(1) scaleX(1);
            /* opacity: 1; управляется через JS */
        }

        100% {
            left: calc(100% + 150px);
            /* opacity: 0; управляется через JS */
        }
    }

    /* Упрощенная анимация полета для мобильных - RTL */
    /* Для мобильной версии RTL */
    @media (max-width: 480px) {
        @keyframes santaFlyRTL {
            0% {
                left: calc(100% + 150px);
                top: var(--start-top, 15%);
                transform: scale(1) scaleX(-1);
                opacity: 0;
            }

            2% {
                opacity: 1;
            }

            50% {
                top: var(--mid-top, 20%);
                left: 50%;
                transform: scale(1.05) scaleX(-1);
            }

            98% {
                top: var(--end-top, 12%);
                left: -150px;
                transform: scale(1) scaleX(-1);
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }
    }
}

/* Для средних экранов */
@media (min-width: 481px) and (max-width: 768px) {
    .santa-lottie-container {
        width: 180px;
        height: 180px;
    }

    .santa-lottie-container.flying-ltr {
        left: -200px;
    }

    .santa-lottie-container.flying-rtl {
        left: calc(100% + 200px);
    }
}

/* Отключение при newyear-disabled */
body.newyear-disabled .santa-lottie-container {
    display: none !important;
}

/* Отключаем анимации при prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {

    .santa-lottie-container.flying-ltr,
    .santa-lottie-container.flying-rtl {
        animation: none !important;
    }
}
@media (max-width:1200px) {
    .santa-lottie-container{
        display: none !important;
    }
}
#block-newyear .field__item {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* .newyear-tree-container {
    position: absolute;
    width: 120px;
    height: 120px;
    right: 20px;
    top: 50%;
    transform: translate(100%, -50%);
    z-Index: 11;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

@media (max-width:1650px) {
    .newyear-tree-container {
        display: none !important;
    }
} */

#block-subscriber-buttons {
    position: relative;
}

#block-subscriber-buttons::after {
    content: '';
    display: inline-block;
    position: absolute;
    left: calc(100% - 20px);
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 120px;
    background-image: url('../assets/el.gif');
    background-size: contain;
    background-repeat: no-repeat;
}
@media (max-width:1680px) {
    #block-subscriber-buttons::after {
        display: none !important;
    }
}