/* Navigation Transitions
------------------------------------------------- */
@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

/* Hamburger Menu 
------------------------------------------------- */
@keyframes hamburgerRotateOpen {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-180deg);
  }
}

@keyframes hamburgerRotateClose {
  from {
    transform: rotate(-180deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* Counter Animations
------------------------------------------------- */
@keyframes smoothCountUp1 {
  0% {
    transform: translateY(0);
  }
  90% {
    transform: translateY(-460%);
  }
  100% {
    transform: translateY(-400%);
  }
}

@keyframes smoothCountUp2 {
  0% {
    transform: translateY(0);
  }
  95% {
    transform: translateY(-960%);
  }
  100% {
    transform: translateY(-1000%);
  }
}

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

/* General Transitions
------------------------------------------------- */
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes SlideInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes SlideInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-200%);
  }
  100% {
    opacity: 1;
  }
}

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

@keyframes SlideInFromLeftV2 {
  0% {
    opacity: 0;
    transform: translateX(-200%);
  }
  100% {
    opacity: 1;
  }
}

/* Blur Animation */
@keyframes UnblurEffect {
  0%,
  83% {
    /* 5 seconds out of 6 total */
    filter: blur(7px);
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes searchBarfadeIn {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@keyframes searchBarfadeOut {
  from {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
  }
}