/* A dropdown animation that falls slowly from the top of the window.  */
.dropdown {
  animation-duration: 500ms;
  animation-name: intro;
  animation-timing-function: linear;
  animation-delay: 10ms;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

@keyframes intro {
  0% {
    transform: translateY(-100%);
  }

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

/* An animation that makes the element to move upward */
.moveUp {
  animation-duration: 400ms;
  animation-name: moveUp;
  animation-timing-function: ease-in-out;
  animation-delay: 10ms;
  animation-fill-mode: forwards;
}

@keyframes moveUp {
  0% {
    transform: scale(80%) translateY(100%);
  }

  100% {
    transform: scale(100%) translateY(0%);
  }
}

/* A fade in animation that just increases opacity with time. */
.fadeIn {
  animation-duration: 500ms;
  animation-name: fadein;
  animation-timing-function: ease-in;
  animation-delay: 10ms;
  animation-fill-mode: forwards;
}

@keyframes fadein {
  0% {
    opacity: 0;
    filter: blur(5px);
    display: none;
  }

  100% {
    opacity: 1;
    filter: blur(0px);
    display: block;
  }
}

/* zoom in effect  */
.zoom-in {
  animation-duration: 500ms;
  animation-name: zoomin;
  animation-timing-function: ease;
  animation-delay: 10ms;
  animation-fill-mode: forwards;
}

@keyframes zoomin {
  0% {
    scale: 0%;
    filter: blur(10px);
  }

  100% {
    scale: 100%;
    filter: blur(0px);
  }

}

.zoom-out {
  animation-duration: 500ms;
  animation-name: zoomout;
  animation-timing-function: ease;
  animation-delay: 10ms;
  animation-fill-mode: forwards;
}

@keyframes zoomout {
  0% {
    scale: 100%;
  }

  100% {
    scale: 0%;
  }
}

/* fade in effect for menu  */
.menu-fadeIn {
  animation-duration: 500ms;
  animation-name: menu-fadein;
  animation-timing-function: ease-in;
  animation-delay: 10ms;
  animation-fill-mode: forwards;
}

@keyframes menu-fadein {
  0% {
    display: initial;
    opacity: 0;
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    filter: blur(0px);
  }
}

/* MOVING UP AND FADE  */
.moveUpNfadeIn {
  animation-duration: 500ms;
  animation-name: movenfd;
  animation-timing-function: linear;
  animation-delay: 10ms;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@keyframes movenfd {
  0% {
    transform: translateY(100%) scale(80%);
    opacity: 0;
    filter: blur(10px);
  }

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

/* The object fades out  */
.fadeOut {
  animation-duration: 500ms;
  animation-name: fadeout;
  animation-timing-function: ease-out;
  animation-delay: 10ms;
  animation-fill-mode: forwards;
}

@keyframes fadeout {
  0% {
    opacity: 1;
    display: initial;
    /* transform: translateY(0px) scale(100%); */
    pointer-events: all;
  }

  100% {
    opacity: 0;
    display: none;
    /* transform: translateY(10px) scale(60%); */
    pointer-events: none;
  }
}

/* fade out effect for menu  */
.menu-fadeOut {
  animation-duration: 500ms;
  animation-name: menu-fadeout;
  animation-timing-function: ease-out;
  animation-delay: 10ms;
  animation-fill-mode: forwards;
}

@keyframes menu-fadeout {
  0% {
    opacity: 1;
    display: block;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

/* For a spread animation that also adds a fade in transition to it. */
.spread {
  animation-duration: 500ms;
  animation-name: spread;
  animation-timing-function: ease-in;
  animation-delay: 100ms;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@keyframes spread {
  0% {
    opacity: 0;
    letter-spacing: -10px;
  }

  100% {
    opacity: 1;
    letter-spacing: 1px;
  }
}

/* The object comes from the left slowly */
.leftIntro {
  animation-duration: 500ms;
  animation-name: left;
  animation-timing-function: linear;
  animation-delay: 10ms;
  animation-direction: alternate;
  animation-fill-mode: forwards;
}

@keyframes left {
  0% {
    opacity: 0;
    transform: scale(80%) translateX(-100%);
  }

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

/* The object goes out from the left  */
.leftOut {
  animation-duration: 500ms;
  animation-name: leftOut;
  animation-timing-function: linear;
  animation-delay: 10ms;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

@keyframes leftOut {
  0% {
    opacity: 1;
    transform: scale(100%) translateX(0%);
  }

  100% {
    opacity: 0;
    transform: scale(60%) translateX(-100%);
  }
}

/* The object comes from the right  */
.rightIntro {
  animation-duration: 500ms;
  animation-name: right;
  animation-timing-function: linear;
  animation-delay: 10ms;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

@keyframes right {
  0% {
    opacity: 0;
    transform: scale(80%) translateX(100%);
  }

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

.menu-rightIntro {
  animation-duration: 500ms;
  animation-name: menu-right;
  animation-timing-function: ease-in;
  animation-delay: 10ms;
  animation-fill-mode: forwards;
}

@keyframes menu-right {
  0% {
    display: grid;
    opacity: 0;
    transform: translateX(100%);
  }

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

/* The object goes out from the right  */
.rightOut {
  animation-duration: 500ms;
  animation-name: rightOut;
  animation-timing-function: linear;
  animation-delay: 10ms;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

@keyframes rightOut {
  0% {
    opacity: 1;
    transform: scale(100%) translateX(0%);
  }

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

.menu-rightOut {
  animation-duration: 500ms;
  animation-name: menu-rightOut;
  animation-timing-function: ease-out;
  animation-delay: 10ms;
  animation-fill-mode: forwards;
}

@keyframes menu-rightOut {
  0% {
    opacity: 1;
    transform: translateX(0%);
  }

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

.circle-in {
  animation-duration: 500ms;
  animation-name: circle-in;
  animation-timing-function: ease-in-out;
  animation-delay: 1ms;
  animation-fill-mode: forwards;
  overflow: hidden;
}

@keyframes circle-in {
  0% {
    display: grid;
    opacity: 0;
    width: 0;
    height: 0;
    border-radius: 100%;
  }

  25% {
    width: 25px;
    height: 25px;
    border-radius: 50%;
  }

  50% {
    width: 50px;
    height: 50px;
    border-radius: 25%;
  }

  100% {
    opacity: 1;
    width: 180px;
    height: max-content;
    border-radius: 10px;
  }
}

.circle-out {
  animation-duration: 500ms;
  animation-name: circle-out;
  animation-timing-function: ease-in-out;
  animation-delay: 1ms;
  animation-fill-mode: forwards;
  overflow: hidden;
}

@keyframes circle-out {
  0% {
    opacity: 1;
    width: 180px;
    height: max-content;
    border-radius: 10px;
  }

  25% {
    width: 50px;
    height: 50px;
    border-radius: 25%;
  }

  50% {
    width: 25px;
    height: 25px;
    border-radius: 50%;
  }

  100% {
    opacity: 0;
    width: 0;
    height: 0;
    display: grid;
    border-radius: 100%;
  }
}

.height-down {
  animation-name: height-down;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 100ms;
  animation-duration: 500ms;
}

@keyframes height-down {
  from {
    height: 55px;
  }

  to {
    height: auto;
  }
}

.height-up {
  animation-name: height-up;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 100ms;
  animation-duration: 500ms;
}

@keyframes height-up {
  from {
    height: auto;
  }

  to {
    height: 55px;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}


.slideInBottom {
  animation-name: slidein-bottom;
  animation-timing-function: linear;
  animation-delay: 10ms;
  animation-direction: alternate;
}

@keyframes slidein-bottom {
  from {
    display: none;
    transform: translateY(10%);
  }

  to {
    display: flex;
    transform: translateY(0%);
  }
}

/* spin effect  */
.spin {
  animation-duration: 500ms;
  animation-name: spin;
  animation-timing-function: ease;
  animation-delay: 10ms;
  animation-fill-mode: forwards;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }

}