/* Button Styling */
/* This applies when animations are allowed */
button.btn-toggleAnim {
  /* GREEN BTN COLOR */
  transform: rotate(2.5deg) scale(1);
  -webkit-transform: rotate(2.5deg) scale(1);
  -moz-transform: rotate(2.5deg) scale(1);
  background: var(--status-good);
  background: linear-gradient(
    180deg,
    var(--status-good) 45%,
    var(--status-good-shadow) 100%
  );
  border-color: var(--status-good-shadow);
  color: var(--border);
  text-shadow: -2px 1px 8px var(--marked);
  box-shadow: 1px 0px 12px var(--status-good);
}

button.btn-toggleAnim:hover {
  transform: rotate(7deg) scale(1.05);
  -webkit-transform: rotate(7deg) scale(1.05);
  -moz-transform: rotate(7deg) scale(1.05);
  transition: 300ms ease-in-out;
  background: darkorange;
  background: linear-gradient(
    180deg,
    var(--marked) 25%,
    var(--status-warning) 75%
  );
  box-shadow: -1px 1px 16px orange;
  text-shadow: -2px 2px 4px darkorange;
  color: var(--status-warning-shadow);
  border-color: var(--marked);
}

button.btn-toggleAnim:active {
  transform: rotate(2deg) scale(0.95);
  -webkit-transform: rotate(2deg) scale(0.95);
  -moz-transform: rotate(2deg) scale(0.95);
  transition: ease 250ms;
  box-shadow: -2px 2px 18px var(--marked);
  color: var(--marked);
  background: darkorange;
  background: linear-gradient(
    180deg,
    orange 10%,
    var(--status-warning-shadow) 70%
  );
  border-color: orange;
  text-shadow: -2px 2px 6px var(--status-warning);
}

.nav-btn-wrapper > p.animEnabled {
  display: contents;
  color: var(--status-good);
  text-shadow: -2px 2px 4px var(--status-good-shadow);
}

.nav-btn-wrapper > p.animDisabled {
  display: none;
}

/* Allow flashing images */
img.flash {
  display: contents;
}

/* ----------  / 
/  Animations  /
/ ----------- */
.animate--flicker {
  animation: flicker 1.4 linear 1;
  -moz-animation: flicker 1.4s linear 1;
  -webkit-animation: flicker 1.4s linear 1;
}
@keyframes flicker {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 0.1;
  }

  15% {
    opacity: 0;
  }

  20% {
    opacity: 0.4;
  }

  25% {
    opacity: 0.2;
  }

  30%,
  100% {
    opacity: 1;
  }
}

.animate--float {
  will-change: transform;
  animation: float 3s ease-in-out infinite;
  -moz-animation: float 3s ease-in-out infinite;
  -webkit-animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
    -ms-transform: translateY(0);
  }

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

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

.animate--glow {
  animation: glow 3s ease-in-out infinite;
  -moz-animation: glow 3s ease-in-out infinite;
  -webkit-animation: glow 3s ease-in-out infinite;
}
@keyframes glow {
  0%,
  100% {
    text-shadow:
      0 0 0.3vw rgba(203, 243, 41, 0.5),
      0 0 0.6vw rgb(203, 243, 41, 0.2),
      0 0 1vw rgb(203, 243, 41, 0.5),
      0 0 1vw rgb(203, 243, 41, 0.4),
      0 0 0.4vw rgb(177, 251, 91, 0.65),
      0 0 0.1vw rgb(67, 119, 7, 0.4);
    color: rgba(203, 243, 41, 0.8);
  }

  50% {
    text-shadow:
      0 0 0.5vw rgba(85, 119, 7, 0.65),
      0 0 0.25vw rgb(85, 119, 7, 0.6),
      0 0 1vw rgb(85, 119, 7, 0.5),
      0 0 1vw rgb(85, 119, 7, 0.75),
      0 0 0.2vw rgb(85, 119, 7, 0.7),
      0 0 0.1vw rgba(118, 160, 34, 0.6);
    color: rgba(183, 230, 28, 0.75);
  }
}

@keyframes glow-text {
  0%,
  100% {
    text-shadow:
      0 0 0.3vw rgba(203, 243, 41, 0.5),
      0 0 0.6vw rgb(203, 243, 41, 0.2),
      0 0 1vw rgb(203, 243, 41, 0.5),
      0 0 1vw rgb(203, 243, 41, 0.4),
      0 0 0.4vw rgb(177, 251, 91, 0.65),
      0 0 0.1vw rgb(67, 119, 7, 0.4);
    color: rgb(203, 243, 41, 0.9);
    border-color: rgb(97, 232, 209);
  }

  50% {
    text-shadow:
      0 0 0.5vw rgba(85, 119, 7, 0.65),
      0 0 0.25vw rgb(85, 119, 7, 0.6),
      0 0 1vw rgb(85, 119, 7, 0.5),
      0 0 1vw rgb(85, 119, 7, 0.75),
      0 0 0.2vw rgb(85, 119, 7, 0.7),
      0 0 0.1vw rgba(118, 160, 34, 0.6);
    color: rgba(183, 230, 28, 0.8);
    border-color: rgb(90, 205, 185, 0.875);
  }
}

.animate--phase {
  will-change: opacity;
  transition: 100ms ease-in-out;
  animation: phase 2.5s ease-in-out infinite;
  -webkit-animation: phase 2.5s ease-in-out infinite;
  -moz-animation: phase 2.5s ease-in-out infinite;
}
@keyframes phase {
  0% {
    opacity: 0.85;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.85;
  }
}

.animate--rotateY {
  will-change: transform;
  animation: rotateY 8.5s linear infinite;
  -moz-animation: rotateY 8.5s linear infinite;
  -webkit-animation: rotateY 8.5s linear infinite;
}
@keyframes rotateY {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(0deg) rotateY(-360deg) rotateZ(0deg);
    -moz-transform: rotateX(0deg) rotateY(-360deg) rotateZ(0deg);
    -webkit-transform: rotateX(0deg) rotateY(-360deg) rotateZ(0deg);
  }
}

.animate--scale-up {
  transition: 300ms ease-in-out;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
}

img.animate--shake:hover {
  animation: shake 1s linear infinite;
  -moz-animation: shake 1s linear infinite;
  -webkit-animation: shake 1s linear infinite;
}
@keyframes shake {
  0% {
    transform: translate(2px, 1px) rotate(0deg);
    -webkit-transform: translate(2px, 1px) rotate(0deg);
  }

  10% {
    transform: translate(-1px, -2px) rotate(0deg);
    -webkit-transform: translate(-1px, -2px) rotate(-1deg);
  }

  20% {
    transform: translate(-3px) rotate(1deg);
    -webkit-transform: translate(-3px) rotate(1deg);
  }

  30% {
    transform: translate(0, 2px) rotate(0deg);
    -webkit-transform: translate(0, 2px) rotate(0deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(1deg);
    -webkit-transform: translate(1px, -1px) rotate(1deg);
  }

  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
  }

  60% {
    transform: translate(-3px, 1px) rotate(0deg);
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
  }

  70% {
    transform: translate(2px, 1px) rotate(-1deg);
    -webkit-transform: translate(2px, 1px) rotate(-1deg);
  }

  80% {
    transform: translate(-1px, -1px) rotate(1deg);
    -webkit-transform: translate(-1px, -1px) rotate(1deg);
  }

  90% {
    transform: translate(2px, 2px) rotate(0deg);
    -webkit-transform: translate(2px, 2px) rotate(0deg);
  }

  100% {
    transform: translate(1px, -2px) rotate(-1deg);
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
  }
}

.animate--tilt-left:hover {
  transition: 250ms ease-in-out;
  transform: rotateY(-5deg);
}

.animate--tilt-right:hover {
  transition: 250ms ease-in-out;
  transform: rotateY(5deg);
}