/* ------ TRANSITIONS-----  */

.invisible {
  visibility: hidden;
  opacity: 0;
}
.visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.blur {
  filter: blur(8px);
}
.fade-out {
  opacity: 0;
}
.fade-in-intro {
  opacity: 1;
  visibility: visible;
  transition: 1500ms ease-in-out;
}
.fade-out-intro {
  opacity: 0;
  transition: 1500ms ease-in-out;
}
.showUpMovement {
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-out;
  opacity: 0;
  transform: translateY(20px);
}
.showUpMovement.visible {
  opacity: 1;
  transform: translateY(0);
}
/* ----------COLOR ------------------*/
h1.effect-shine {
  mask-image: linear-gradient(
    -75deg,
    rgba(0, 0, 0, 0.6) 30%,
    #000 50%,
    rgba(0, 0, 0, 0.6) 70%
  );
  mask-size: 200%;
  animation: shine 2s infinite;
}

.special {
  filter: sepia(1) hue-rotate(180deg) saturate(3);
  animation: hueR 5s infinite;
}

.itemShadow {
  filter: drop-shadow(2px 10px 4px #4444dd93);
}

/*------------ MOVEMENT------------- */

#statusEffectText.wobble-text span {
  display: inline-block;
  animation: wobble 5s infinite ease-in-out;
  letter-spacing: 0.03em;
  color: rgb(12, 255, 1);
  opacity: 100%;
  text-shadow: #cb23b5 0px 0px 10px;
  font-size: x-large;
}

.ultraslowupdown {
  animation: updown 10s infinite;
}
/* ----- FULL SCREEN EFFECTS------- */

html.greyscale {
  filter: grayscale(100%);
  transition: filter 0.5s ease-in-out;
}
html.glitch {
  /* filter: grayscale(1) brightness(0.8) hue-rotate(180deg) saturate(0.5); */
  filter: hue-rotate(25deg) saturate(1.2) contrast(1.2);
  transform: translateX(-1px);
  animation: glitchJitter 120ms infinite alternate;
}

.leftright {
  animation: leftright 3s step-end;
  animation-iteration-count: infinite;
}

/*---------- TEXTS----------------- */

.shake {
  display: inline-block;
  animation: shake 0.5s infinite;
}
@keyframes shake {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(1px, -1px);
  }
  50% {
    transform: translate(-1px, 1px);
  }
  75% {
    transform: translate(1px, 1px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.flicker {
  animation: flicker 1s infinite steps(2);
}
@keyframes flicker {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0.2;
  }
}

.ghost {
  opacity: 0.4;
  animation: ghostFade 2s infinite ease-in-out;
}
@keyframes ghostFade {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.6;
  }
}

.rainbow {
  animation: rainbow 3s infinite linear;
}
@keyframes rainbow {
  0% {
    color: red;
  }
  20% {
    color: orange;
  }
  40% {
    color: yellow;
  }
  60% {
    color: green;
  }
  80% {
    color: blue;
  }
  100% {
    color: violet;
  }
}

.highlight {
  display: inline-block;

  color: var(--button-color);
  animation: highlight 1s infinite;
}

.affection {
  color: var(--status-effect);
  animation: highlight 1s infinite;
}

.mindHighlight {
  color: var(--mind-button);
  animation: highlight 1s infinite;
}
.pocketHighlight {
  color: var(--pocket-button);
  animation: highlight 1s infinite;
}

@keyframes highlight {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(1px, -1px);
  }
  50% {
    transform: translate(-1px, 1px);
  }
  75% {
    transform: translate(1px, 1px);
  }
  100% {
    transform: translate(0, 0);
  }
}