.showSearch form {
  animation: showSearchForm 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.rotateTxt {
  animation: rotate 10s linear infinite;
}
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@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;
  }
}

/*  */