/* ============================================================
   BREVIS MOTION — базовые стили и анимации появления
   Анимации совпадают с animations.css шаблона Brevis.
   Файл нужен всегда: здесь скрытие блоков до появления
   (в том числе без класса, только с data-animation)
   и стили разбивки текста.
   Остальные анимации генератора — brevis-motion-presets.css,
   свои — собираются в генераторе /tools/animation-generator/
   ============================================================ */

/* Блок скрыт до появления: с классом или просто с data-animation.
   "true"/"false" — настройка подсказок Bootstrap, их не трогаем.
   :where() обнуляет вес исключений — правило остаётся «лёгким», как класс,
   и .bm-split / .no-animation ниже его перекрывают */
.element-animation,
[data-animation]:where(:not([data-animation="true"], [data-animation="false"])) {
    opacity: 0;
}

/* ---------- Текст по словам и буквам (data-split) ---------- */

.element-animation.bm-split,
[data-animation].bm-split {
    opacity: 1;
}

.bm-split__word {
    display: inline-block;
    white-space: nowrap;
}

.bm-split__item {
    display: inline-block;
    opacity: 0;
}

/* Части текста выглядят как текст, который заменили: общие правила сайта
   вроде «.card span { display: block }» или «.button-inner span { color: #fff }»
   их не трогают */
.bm-split .bm-split__word,
.bm-split .bm-split__item {
    margin: 0;
    padding: 0;
    border: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    vertical-align: baseline;
}

.bm-split .bm-split__word,
.bm-split .bm-split__item {
    display: inline-block;
}

.bm-split__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- Анимации шаблона ---------- */

.fade-in {
    animation: fadeIn 0.8s forwards;
}

.slide-up {
    animation: slideUp 0.8s forwards;
}

.slide-right {
    animation: slideRight 0.8s forwards;
}

.slide-right-blur {
    animation: slideRightBlur 0.8s forwards;
}

.slide-top-blur {
    animation: slideTopBlur 0.8s forwards;
}

.slide-left {
    animation: slideLeft 0.8s forwards;
}

.slide-top {
    animation: slideTop 0.8s forwards;
}

.blur-in {
    animation: blurIn 0.8s forwards;
}

.logo-animation {
    animation: svgPop 0.75s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}

/* Без анимации, просто видно: data-clear, «уменьшить движение», запуск по клику */
.no-animation {
    animation: none;
    opacity: 1;
}

/* «Уменьшить движение» в системе: блок мягко проявляется на месте, без сдвига */
.no-animation.bm-reduced {
    animation: bmReducedFade 0.2s ease-out both;
}

@keyframes bmReducedFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes blurIn {
    from {
        opacity: 0;
        filter: blur(5px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes svgPop {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideTop {
    from {
        transform: translateY(-40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(40px);
        filter: blur(5px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes slideRight {
    from {
        transform: translateX(-40px);
        filter: blur(5px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes slideRightBlur {
    from {
        transform: translateX(-40px);
        opacity: 0;
        filter: blur(5px);
    }

    to {
        transform: translateX(0);
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes slideTopBlur {
    from {
        transform: translateY(-40px);
        opacity: 0;
        filter: blur(5px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes slideLeft {
    from {
        transform: translateX(20px);
        filter: blur(5px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        filter: blur(0px);
        opacity: 1;
    }
}

@media (max-width: 577px) {
    @keyframes slideLeft {
        from {
            transform: translateX(16px);
            filter: blur(5px);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            filter: blur(0px);
            opacity: 1;
        }
    }
}