/* ============================================================
   BREVIS MOTION — все анимации генератора (68 шт.)

   Дополнение к brevis-motion.css: там скрытие блоков, разбивка
   текста и 9 анимаций сайта, здесь — остальные пресеты генератора.
   Подключайте после brevis-motion.css:

     <link rel="stylesheet" href="/путь/brevis-motion.css">
     <link rel="stylesheet" href="/путь/brevis-motion-presets.css">

   Использование — класс анимации в data-animation:

     <div data-animation="pop" data-delay="200">Блок</div>

   Текстовые анимации — вместе с data-split и data-stagger
   (рекомендуемые значения — в комментарии над классом):

     <h2 data-animation="typewriter" data-split="chars" data-stagger="55">Заголовок</h2>

   «Внимание» — акценты: pulse, float, glow, spin повторяются
   бесконечно, остальные проигрываются один раз.
   «Исчезновение» — для ухода блока, запускайте по клику или из JS.

   Собрано из пресетов генератора 2026-09-25:
   https://ui.brevis.pro/tools/animation-generator/
   ============================================================ */

/* ---------- Появление ---------- */

/* Появление снизу */
.fade-up {
    animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

/* Появление сверху */
.fade-down {
    animation: fadeDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeDown {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }

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

/* Появление справа */
.fade-left {
    animation: fadeLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeLeft {
    from {
        transform: translateX(30px);
        opacity: 0;
    }

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

/* Появление слева */
.fade-right {
    animation: fadeRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeRight {
    from {
        transform: translateX(-30px);
        opacity: 0;
    }

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

/* По диагонали · Приезжает снизу-слева */
.fade-diagonal {
    animation: fadeDiagonal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeDiagonal {
    from {
        transform: translate(-40px, 40px);
        opacity: 0;
    }

    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* Подъём издалека */
.fade-up-big {
    animation: fadeUpBig 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeUpBig {
    from {
        transform: translateY(120px);
        opacity: 0;
    }

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

/* Появление с приближением */
.fade-scale {
    animation: fadeScale 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeScale {
    from {
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }

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

/* Медленное проявление */
.fade-slow {
    animation: fadeSlow 1.6s ease-in-out forwards;
}

@keyframes fadeSlow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Влёт со скоростью · Влетает справа с наклоном и выравнивается */
.speed-in {
    animation: speedIn 0.8s ease-out forwards;
}

@keyframes speedIn {
    0% {
        transform: translateX(240px) skewX(-30deg);
        opacity: 0;
    }

    60% {
        transform: translateX(0) skewX(20deg);
        opacity: 1;
    }

    80% {
        transform: translateX(0) skewX(-5deg);
        opacity: 1;
    }

    100% {
        transform: translateX(0) skewX(0deg);
        opacity: 1;
    }
}

/* ---------- Масштаб ---------- */

/* Увеличение */
.zoom-in {
    animation: zoomIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes zoomIn {
    from {
        transform: scale(0.6);
        opacity: 0;
    }

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

/* Уменьшение */
.zoom-out {
    animation: zoomOut 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes zoomOut {
    from {
        transform: scale(1.3);
        opacity: 0;
    }

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

/* Увеличение снизу */
.zoom-in-up {
    animation: zoomInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes zoomInUp {
    from {
        transform: translateY(60px) scale(0.8);
        opacity: 0;
    }

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

/* Увеличение сверху */
.zoom-in-down {
    animation: zoomInDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes zoomInDown {
    from {
        transform: translateY(-60px) scale(0.8);
        opacity: 0;
    }

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

/* Выпрыгивание */
.pop {
    animation: pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

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

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

/* Медленное приближение · Для фото и обложек: медленно проявляется и «отъезжает» из приближения, как в кино */
.ken-burns {
    animation: kenBurns 2.2s ease-out forwards;
}

@keyframes kenBurns {
    from {
        transform: scale(1.12);
        opacity: 0;
    }

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

/* Рост полосы · Для линий и полос прогресса: растёт слева направо */
.grow-x {
    animation: growX 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: left center;
}

@keyframes growX {
    from {
        transform: scaleX(0);
        opacity: 1;
    }

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

/* Рост столбика · Для столбиков графиков: растёт снизу вверх */
.grow-y {
    animation: growY 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: center bottom;
}

@keyframes growY {
    from {
        transform: scaleY(0);
        opacity: 1;
    }

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

/* ---------- Размытие ---------- */

/* Размытие снизу */
.blur-up {
    animation: blurUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

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

/* Фокусировка */
.blur-scale {
    animation: blurScale 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes blurScale {
    from {
        transform: scale(1.15);
        filter: blur(12px);
        opacity: 0;
    }

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

/* Размытие справа */
.blur-left {
    animation: blurLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes blurLeft {
    from {
        transform: translateX(60px);
        filter: blur(12px);
        opacity: 0;
    }

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

/* Собираются буквы · Для заголовков: буквы съезжаются из размытия */
.focus-in {
    animation: focusIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes focusIn {
    from {
        filter: blur(12px);
        opacity: 0;
        letter-spacing: 0.5em;
    }

    to {
        filter: blur(0);
        opacity: 1;
        letter-spacing: 0em;
    }
}

/* ---------- Поворот и 3D ---------- */

/* Вращение */
.rotate-in {
    animation: rotateIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes rotateIn {
    from {
        transform: rotate(-200deg) scale(0.6);
        opacity: 0;
    }

    to {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* Поворот от левого угла */
.rotate-in-left {
    animation: rotateInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: left bottom;
}

@keyframes rotateInLeft {
    from {
        transform: rotate(-45deg);
        opacity: 0;
    }

    to {
        transform: rotate(0deg);
        opacity: 1;
    }
}

/* Поворот от правого угла */
.rotate-in-right {
    animation: rotateInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: right bottom;
}

@keyframes rotateInRight {
    from {
        transform: rotate(45deg);
        opacity: 0;
    }

    to {
        transform: rotate(0deg);
        opacity: 1;
    }
}

/* Выкатывание · Выкатывается слева, как колесо */
.roll-in {
    animation: rollIn 0.9s ease-out forwards;
}

@keyframes rollIn {
    from {
        transform: translateX(-240px) rotate(-120deg);
        opacity: 0;
    }

    to {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

/* Откидывание сверху */
.swing-in {
    animation: swingIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: center top;
}

@keyframes swingIn {
    from {
        transform: perspective(800px) rotateX(-90deg);
        opacity: 0;
    }

    to {
        transform: perspective(800px) rotateX(0deg);
        opacity: 1;
    }
}

/* Переворот вверх */
.flip-x {
    animation: flipX 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes flipX {
    from {
        transform: perspective(800px) rotateX(90deg);
        opacity: 0;
    }

    to {
        transform: perspective(800px) rotateX(0deg);
        opacity: 1;
    }
}

/* Переворот вбок */
.flip-y {
    animation: flipY 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes flipY {
    from {
        transform: perspective(800px) rotateY(90deg);
        opacity: 0;
    }

    to {
        transform: perspective(800px) rotateY(0deg);
        opacity: 1;
    }
}

/* Подъём с наклоном */
.flip-up {
    animation: flipUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: center bottom;
}

@keyframes flipUp {
    from {
        transform: perspective(800px) translateY(60px) rotateX(50deg);
        opacity: 0;
    }

    to {
        transform: perspective(800px) translateY(0) rotateX(0deg);
        opacity: 1;
    }
}

/* Открытие двери */
.door-open {
    animation: doorOpen 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: left center;
}

@keyframes doorOpen {
    from {
        transform: perspective(1000px) rotateY(-90deg);
        opacity: 0;
    }

    to {
        transform: perspective(1000px) rotateY(0deg);
        opacity: 1;
    }
}

/* Разворачивание · Сначала вытягивается в линию, потом раскрывается */
.unfold {
    animation: unfold 1s ease-in-out forwards;
}

@keyframes unfold {
    0% {
        transform: scaleX(0) scaleY(0.02);
        opacity: 1;
    }

    50% {
        transform: scaleX(1) scaleY(0.02);
        opacity: 1;
    }

    100% {
        transform: scaleX(1) scaleY(1);
        opacity: 1;
    }
}

/* ---------- Шторки и маски ---------- */

/* Шторка снизу */
.reveal-up {
    animation: revealUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revealUp {
    from {
        clip-path: inset(100% 0 0 0);
        opacity: 1;
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* Шторка сверху */
.reveal-down {
    animation: revealDown 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revealDown {
    from {
        clip-path: inset(0 0 100% 0);
        opacity: 1;
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* Шторка справа */
.reveal-left {
    animation: revealLeft 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revealLeft {
    from {
        clip-path: inset(0 0 0 100%);
        opacity: 1;
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* Шторка слева */
.reveal-right {
    animation: revealRight 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revealRight {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: 1;
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* Шторка с подъёмом */
.reveal-up-slide {
    animation: revealUpSlide 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revealUpSlide {
    from {
        transform: translateY(40px);
        clip-path: inset(100% 0 0 0);
        opacity: 1;
    }

    to {
        transform: translateY(0);
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* Круг из центра */
.circle-reveal {
    animation: circleReveal 1s ease-in-out forwards;
}

@keyframes circleReveal {
    from {
        clip-path: circle(0% at 50% 50%);
        opacity: 1;
    }

    to {
        clip-path: circle(75% at 50% 50%);
        opacity: 1;
    }
}

/* Ромб */
.diamond-reveal {
    animation: diamondReveal 1s ease-in-out forwards;
}

@keyframes diamondReveal {
    from {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        opacity: 1;
    }

    to {
        clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
        opacity: 1;
    }
}

/* Занавес из центра */
.curtain {
    animation: curtain 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes curtain {
    from {
        clip-path: inset(0 50% 0 50%);
        opacity: 1;
    }

    to {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

/* ---------- Пружина ---------- */

/* Отскок */
.bounce-in {
    animation: bounceIn 0.75s forwards;
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    20% {
        transform: scale(1.1);
        opacity: 0.333;
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    40% {
        transform: scale(0.9);
        opacity: 0.667;
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    60% {
        transform: scale(1.03);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    80% {
        transform: scale(0.97);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Отскок снизу */
.bounce-up {
    animation: bounceUp 1s forwards;
}

@keyframes bounceUp {
    0% {
        transform: translateY(200px);
        opacity: 0;
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    60% {
        transform: translateY(-20px);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    75% {
        transform: translateY(10px);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    90% {
        transform: translateY(-5px);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Падение */
.drop-in {
    animation: dropIn 0.9s forwards;
}

@keyframes dropIn {
    0% {
        transform: translateY(-200px);
        opacity: 0;
        animation-timing-function: ease-in;
    }

    60% {
        transform: translateY(20px);
        opacity: 1;
        animation-timing-function: ease-out;
    }

    80% {
        transform: translateY(-8px);
        opacity: 1;
        animation-timing-function: ease-in-out;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Желе */
.jelly-in {
    animation: jellyIn 1s forwards;
}

@keyframes jellyIn {
    0% {
        transform: scaleX(0.3) scaleY(0.3);
        opacity: 0;
    }

    30% {
        transform: scaleX(1.25) scaleY(0.75);
        opacity: 1;
    }

    40% {
        transform: scaleX(0.75) scaleY(1.25);
        opacity: 1;
    }

    50% {
        transform: scaleX(1.15) scaleY(0.85);
        opacity: 1;
    }

    65% {
        transform: scaleX(0.95) scaleY(1.05);
        opacity: 1;
    }

    75% {
        transform: scaleX(1.05) scaleY(0.95);
        opacity: 1;
    }

    100% {
        transform: scaleX(1) scaleY(1);
        opacity: 1;
    }
}

/* Пружина */
.spring-scale {
    animation: springScale 1s linear(0, 0.058, 0.186, 0.356, 0.54, 0.719, 0.876, 1.004, 1.098, 1.158, 1.189, 1.193, 1.179, 1.152, 1.119, 1.083, 1.049, 1.019, 0.995, 0.978, 0.968, 0.963, 0.963, 0.966, 0.972, 0.978, 0.985, 0.992, 0.997, 1.002, 1.005, 1.007, 1.007, 1.007, 1.006, 1.005, 1.004, 1.003, 1.001, 1, 1, 0.999, 0.999, 0.999, 0.999, 0.999, 0.999, 0.999, 1, 1, 1) forwards;
}

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

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

/* Пружина снизу */
.spring-up {
    animation: springUp 1.3s linear(0, 0.041, 0.137, 0.269, 0.42, 0.575, 0.725, 0.859, 0.973, 1.063, 1.129, 1.172, 1.193, 1.197, 1.187, 1.167, 1.14, 1.11, 1.08, 1.05, 1.024, 1.002, 0.985, 0.973, 0.965, 0.961, 0.961, 0.963, 0.968, 0.973, 0.979, 0.985, 0.991, 0.996, 1, 1.003, 1.006, 1.007, 1.008, 1.008, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.001, 1, 0.999, 0.999, 0.999, 0.998, 0.998, 0.999, 0.999, 0.999, 0.999, 1) forwards;
}

@keyframes springUp {
    from {
        transform: translateY(80px);
        opacity: 0;
    }

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

/* ---------- Текст ---------- */

/* Буквы снизу · data-split="chars" data-stagger="30" */
.chars-up {
    animation: charsUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes charsUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

/* Буквы из размытия · data-split="chars" data-stagger="40" */
.chars-blur {
    animation: charsBlur 0.6s ease-out forwards;
}

@keyframes charsBlur {
    from {
        filter: blur(8px);
        opacity: 0;
    }

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

/* Слова снизу · data-split="words" data-stagger="80" */
.words-up {
    animation: wordsUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes wordsUp {
    from {
        transform: translateY(30px);
        filter: blur(4px);
        opacity: 0;
    }

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

/* Слова по очереди · data-split="words" data-stagger="120" */
.words-fade {
    animation: wordsFade 0.6s ease-out forwards;
}

@keyframes wordsFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Печатная машинка · data-split="chars" data-stagger="55" · Буквы появляются по одной, как при наборе текста */
.typewriter {
    animation: typewriter 0.2s linear forwards;
}

@keyframes typewriter {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

/* Разлёт букв · Для заголовков: буквы разъезжаются из плотной кучки */
.tracking-in {
    animation: trackingIn 0.8s ease-out forwards;
}

@keyframes trackingIn {
    from {
        opacity: 0;
        letter-spacing: -0.5em;
    }

    to {
        opacity: 1;
        letter-spacing: 0em;
    }
}

/* ---------- Внимание ---------- */

/* Пульс */
.pulse {
    animation: pulse 1.5s ease-in-out infinite forwards;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Сердцебиение */
.heartbeat {
    animation: heartbeat 1.3s ease-in-out infinite forwards;
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    14% {
        transform: scale(1.15);
        opacity: 1;
    }

    28% {
        transform: scale(1);
        opacity: 1;
    }

    42% {
        transform: scale(1.15);
        opacity: 1;
    }

    70% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Тряска · Для ошибки в форме или «нажми меня» */
.shake-x {
    animation: shakeX 1s forwards;
}

@keyframes shakeX {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    10% {
        transform: translateX(-10px);
        opacity: 1;
    }

    20% {
        transform: translateX(10px);
        opacity: 1;
    }

    30% {
        transform: translateX(-10px);
        opacity: 1;
    }

    40% {
        transform: translateX(10px);
        opacity: 1;
    }

    50% {
        transform: translateX(-10px);
        opacity: 1;
    }

    60% {
        transform: translateX(10px);
        opacity: 1;
    }

    70% {
        transform: translateX(-10px);
        opacity: 1;
    }

    80% {
        transform: translateX(10px);
        opacity: 1;
    }

    90% {
        transform: translateX(-10px);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Тряска вверх-вниз */
.shake-y {
    animation: shakeY 1s forwards;
}

@keyframes shakeY {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    10% {
        transform: translateY(-8px);
        opacity: 1;
    }

    20% {
        transform: translateY(8px);
        opacity: 1;
    }

    30% {
        transform: translateY(-8px);
        opacity: 1;
    }

    40% {
        transform: translateY(8px);
        opacity: 1;
    }

    50% {
        transform: translateY(-8px);
        opacity: 1;
    }

    60% {
        transform: translateY(8px);
        opacity: 1;
    }

    70% {
        transform: translateY(-8px);
        opacity: 1;
    }

    80% {
        transform: translateY(8px);
        opacity: 1;
    }

    90% {
        transform: translateY(-8px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Покачивание */
.wobble {
    animation: wobble 1s forwards;
}

@keyframes wobble {
    0% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }

    15% {
        transform: translateX(-40px) rotate(-5deg);
        opacity: 1;
    }

    30% {
        transform: translateX(30px) rotate(3deg);
        opacity: 1;
    }

    45% {
        transform: translateX(-22px) rotate(-3deg);
        opacity: 1;
    }

    60% {
        transform: translateX(15px) rotate(2deg);
        opacity: 1;
    }

    75% {
        transform: translateX(-8px) rotate(-1deg);
        opacity: 1;
    }

    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

/* Желейная встряска */
.jello {
    animation: jello 1s forwards;
}

@keyframes jello {
    0% {
        transform: skewX(0deg) skewY(0deg);
        opacity: 1;
    }

    22% {
        transform: skewX(-12.5deg) skewY(-12.5deg);
        opacity: 1;
    }

    33% {
        transform: skewX(6.25deg) skewY(6.25deg);
        opacity: 1;
    }

    44% {
        transform: skewX(-3.1deg) skewY(-3.1deg);
        opacity: 1;
    }

    55% {
        transform: skewX(1.6deg) skewY(1.6deg);
        opacity: 1;
    }

    66% {
        transform: skewX(-0.8deg) skewY(-0.8deg);
        opacity: 1;
    }

    77% {
        transform: skewX(0.4deg) skewY(0.4deg);
        opacity: 1;
    }

    100% {
        transform: skewX(0deg) skewY(0deg);
        opacity: 1;
    }
}

/* Та-дам */
.tada {
    animation: tada 1s forwards;
}

@keyframes tada {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }

    10% {
        transform: rotate(-3deg) scale(0.9);
        opacity: 1;
    }

    20% {
        transform: rotate(-3deg) scale(0.9);
        opacity: 1;
    }

    30% {
        transform: rotate(3deg) scale(1.1);
        opacity: 1;
    }

    40% {
        transform: rotate(-3deg) scale(1.1);
        opacity: 1;
    }

    50% {
        transform: rotate(3deg) scale(1.1);
        opacity: 1;
    }

    60% {
        transform: rotate(-3deg) scale(1.1);
        opacity: 1;
    }

    70% {
        transform: rotate(3deg) scale(1.1);
        opacity: 1;
    }

    80% {
        transform: rotate(-3deg) scale(1.1);
        opacity: 1;
    }

    90% {
        transform: rotate(3deg) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* Качели */
.swing {
    animation: swing 1s forwards;
    transform-origin: center top;
}

@keyframes swing {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }

    20% {
        transform: rotate(15deg);
        opacity: 1;
    }

    40% {
        transform: rotate(-10deg);
        opacity: 1;
    }

    60% {
        transform: rotate(5deg);
        opacity: 1;
    }

    80% {
        transform: rotate(-5deg);
        opacity: 1;
    }

    100% {
        transform: rotate(0deg);
        opacity: 1;
    }
}

/* Резинка */
.rubber-band {
    animation: rubberBand 1s forwards;
}

@keyframes rubberBand {
    0% {
        transform: scaleX(1) scaleY(1);
        opacity: 1;
    }

    30% {
        transform: scaleX(1.25) scaleY(0.75);
        opacity: 1;
    }

    40% {
        transform: scaleX(0.75) scaleY(1.25);
        opacity: 1;
    }

    50% {
        transform: scaleX(1.15) scaleY(0.85);
        opacity: 1;
    }

    65% {
        transform: scaleX(0.95) scaleY(1.05);
        opacity: 1;
    }

    75% {
        transform: scaleX(1.05) scaleY(0.95);
        opacity: 1;
    }

    100% {
        transform: scaleX(1) scaleY(1);
        opacity: 1;
    }
}

/* Парение · Спокойно плавает вверх-вниз — для декора и иконок */
.float {
    animation: float 3s ease-in-out infinite forwards;
}

@keyframes float {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    50% {
        transform: translateY(-12px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Свечение · Расходящееся кольцо фирменного лаймового цвета */
.glow {
    animation: glow 1.6s ease-out infinite forwards;
}

@keyframes glow {
    from {
        opacity: 1;
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary, #DAFE52) 60%, transparent);
    }

    to {
        opacity: 1;
        box-shadow: 0 0 0 18px color-mix(in srgb, var(--primary, #DAFE52) 0%, transparent);
    }
}

/* Вращение по кругу */
.spin {
    animation: spin 2s linear infinite forwards;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
        opacity: 1;
    }

    to {
        transform: rotate(360deg);
        opacity: 1;
    }
}

/* ---------- Исчезновение ---------- */

/* Исчезновение */
.fade-out {
    animation: fadeOut 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Уход вниз */
.slide-out-down {
    animation: slideOutDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideOutDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(40px);
        opacity: 0;
    }
}

/* Уход влево */
.slide-out-left {
    animation: slideOutLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideOutLeft {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(-60px);
        opacity: 0;
    }
}

/* Уход с уменьшением */
.zoom-out-exit {
    animation: zoomOutExit 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes zoomOutExit {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.9);
        opacity: 0;
    }
}

/* Уход в размытие */
.blur-out {
    animation: blurOut 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes blurOut {
    from {
        filter: blur(0);
        opacity: 1;
    }

    to {
        filter: blur(12px);
        opacity: 0;
    }
}