/* General Animations */
@keyframes opacityShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes opacityNone {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes opTopIn {
  0% {
    opacity: 0;
    top: -100%;
    transform: scale(2);
  }
  100% {
    opacity: .8;
    top: 0%;
    transform: scale(1);
  }
}

@keyframes opRightIn {
  0% {
    opacity: 0;
    right: -100%;
    transform: scale(2);
  }
  100% {
    opacity: 0;
    right: 0%;
    transform: scale(1);
  }
}

@keyframes opLeftIn {
  0% {
    opacity: 0;
    left: -100%;
    transform: scale(2);
  }
  100% {
    opacity: 0;
    left: 0%;
    transform: scale(1);
  }
}

/* Navigation Menu */
@keyframes mapAppear {
  0% {
    top: -2.5em;
  }
  100% {
    top: .5em;
  }
}

@keyframes mapDisappear {
  0% {
    top: .5em;
  }
  100% {
    top: -2.5em;
  }
}

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

@keyframes mapTabFlip {
  0% {
    transform: scaleY(-1);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes mapTabRight {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(-1);
  }
}

/* Theme Menu */
@keyframes themeAppear {
  100% {
    left: .5em;
  }
}

@keyframes themeDisappear {
  0% {
    left: .5em;
  }
  100% {
    left: -16em;
  }
}

@keyframes themeTabFlip {
  0% {
    transform: scaleY(-1);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes themeTabRight {
  0% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(-1);
  }
}

/* Header */
@keyframes splashDisappear {
  0% {
    mask-position: 0% 0%;
  }
  100% {
    mask-position: 0% -100vh;
  }

  0% {
    top: 0vh;
  }
  99% {
    top: 0vh;
  }
  100% {
    top: -100vh;
  }
}

@keyframes splashAppear {
  0% {
    mask-position: 0% -100vh;
  }
  100% {
    mask-position: 0% 0%;
  }

  0% {
    top: -100vh;
  }
  1% {
    top: 0vh;
  }
  100% {
    top: 0vh;
  }
}

@keyframes lockRotate {
  0% {
    transform: rotate(0deg);
  }
  2.5% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(36deg);
  }
  17.5% {
    transform: rotate(36deg);
  }
  20% {
    transform: rotate(-360deg);
  }
  22.5% {
    transform: rotate(-360deg);
  }
  30% {
    transform: rotate(-180deg);
  }
  32.5% {
    transform: rotate(-180deg);
  }
  50% {
    transform: rotate(-36deg);
  }
  52.5% {
    transform: rotate(-36deg);
  }
  60% {
    transform: rotate(26deg);
  }
  62.5% {
    transform: rotate(26deg);
  }
  70% {
    transform: rotate(-175deg);
  }
  72.5% {
    transform: rotate(-175deg);
  }
  80% {
    transform: rotate(36deg);
  }
  80.2% {
    transform: rotate(36deg);
  }
  90% {
    transform: rotate(-270deg);
  }
  92.5% {
    transform: rotate(-270deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes bounce {
  0% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(3px);
  }
}