.showSearch form {
    animation: showSearchForm 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@keyframes showSearchForm {
    from {
        opacity: 0;
        transform: translateY(-100px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

.textFront {
    animation: textRemove 5s forwards cubic-bezier(0.215, 0.61, 0.355, 1);
}

@keyframes textRemove {
    from {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
    to {
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }
}

.slideRemoveTop {
    animation: 100ms forwards cubic-bezier(0.23, 1, 0.32, 1) slideRemoveTop;
}

@keyframes slideRemoveTop {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}

.slideRemoveBottom {
    animation: 250ms forwards cubic-bezier(0.23, 1, 0.32, 1) slideRemoveBottom;
}

@keyframes slideRemoveBottom {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}

.animateTxt {
    animation: 3s cubic-bezier(0.755, 0.755, 0.855, 0.06) forwards textFill;
}

@keyframes textFill {
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}

/*  */

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.8;
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100px) translateX(var(--translateX));
        opacity: 0;
    }
}

/*  */