@use "../variables" as v;

@keyframes slide_navnrw_in {
  0% {
    transform: translateX(-50%) translateY(100%);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes slide_navnrw_out {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  100% {
    transform: translateX(-50%) translateY(100%);
  }
}

@keyframes spinning {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes opt_in {
  0% {
    opacity: 0;
    transform: translateY(2rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes opt_out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(2rem);
  }
}
@keyframes bgTrans {
  20% {
    background-color: rgba($color: v.$darkcream, $alpha: 0.5);
  }
  60% {
    background-color: rgba($color: v.$darkcream, $alpha: 0.5);
  }
  68% {
    background-color: rgba($color: v.$darkcream, $alpha: 0.3);
  }
  76% {
    background-color: rgba($color: v.$darkcream, $alpha: 0.5);
  }
  84% {
    background-color: rgba($color: v.$darkcream, $alpha: 0.3);
  }
  92% {
    background-color: rgba($color: v.$darkcream, $alpha: 0.5);
  }
}
@keyframes bgTrans2 {
  20% {
    background-color: rgba($color: v.$yellow, $alpha: 0.5);
    box-shadow: 0 0 10px v.$pDarkMintGreen;
  }
  60% {
    background-color: rgba($color: v.$yellow, $alpha: 0.5);
    box-shadow: 0 0 10px v.$pDarkMintGreen;
  }
  68% {
    background-color: rgba($color: v.$yellow, $alpha: 0.3);
    box-shadow: 0 0 10px v.$pDarkMintGreen;
  }
  76% {
    background-color: rgba($color: v.$yellow, $alpha: 0.5);
    box-shadow: 0 0 10px v.$pDarkMintGreen;
  }
  84% {
    background-color: rgba($color: v.$yellow, $alpha: 0.3);
    box-shadow: 0 0 10px v.$pDarkMintGreen;
  }
  92% {
    background-color: rgba($color: v.$yellow, $alpha: 0.5);
    box-shadow: 0 0 10px v.$pDarkMintGreen;
  }
  100% {
    box-shadow: 0 0 10px #00000000;
  }
}

@keyframes popup_in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  80% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
@keyframes popup_out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes slide_left_in {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slide_left_out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes slide_right_in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slide_right_out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
@keyframes slide_up_in {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slide_up_out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}
@keyframes slide_down_in {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slide_down_out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes pm_move_down {
  0% {
    height: 100%;
  }
  100% {
    height: calc(100% - 35px);
  }
}
@keyframes pm_move_up {
  0% {
    height: calc(100% - 35px);
  }
  100% {
    height: 100%;
  }
}
@keyframes nav_in {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes nav_out {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes themeSpinIn {
  0% {
    opacity: 0;
    transform: rotate(0);
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes themeSpinOut {
  0% {
    opacity: 1;
    transform: rotate(0);
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: rotate(720deg);
  }
}
@keyframes themeIn {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes themeOut {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
@keyframes jump {
  0% {
    opacity: 0.5;
    bottom: 0px;
  }
  40% {
    bottom: 5px;
  }
  60% {
    opacity: 1;
    bottom: 0px;
  }
  100% {
    opacity: 0.5;
  }
}
