.animate-once {
  animation-fill-mode: forwards !important;
}

.spinning {
  animation: spinningAnim 2800ms infinite forwards cubic-bezier(0.5, 1.1, 0.36, 1.02);
}

@keyframes spinningAnim {
  0% {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  20% {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  30% {
    transform-origin: center;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  70% {
    transform-origin: center;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  80% {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  100% {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
}

@keyframes changeLetter {
  0% {
    content: attr(name);
  }
  50% {
    color: white;
  }
  100% {
    content: attr(title);
  }
}

.animate-content::after {
  content: attr(name);
}

.animate-content-enter::after {
  animation: changeLetter 1s normal forwards ease-in-out;
}

.animated-light {
  overflow: hidden;
  position: relative;
}

.animated-light::before {
  animation: animatedLight 5s infinite forwards cubic-bezier(0.5, 1.1, 0.36, 1.02);
  z-index: 200;
  content: '';
  /* z-index: -1; */
  position: absolute;
  top: 0%;
  right: 100%;
  margin: 0;
  width: 2500px;
  height: 100vh;
  background-image: linear-gradient(
    102deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform-origin: 50% 100%;
}

@screen sm {
  .animated-light::before {
    height: 550px;
  }
}

@keyframes animatedLight {
  0% {
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
  100% {
    transform: scale3d(1, 1, 1) translate3d(200%, 0, 0);
  }
}

.animated-pill {
  animation: pulseScale 5000ms infinite forwards cubic-bezier(0.5, 1.1, 0.36, 1.02);
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.animated-pill::before {
  animation: animatedPill 3000ms infinite forwards cubic-bezier(0.5, 1.1, 0.36, 1.02);
}

.animated-pill::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 0%;
  left: 100%;
  margin: 0;
  width: 2000px;
  height: 200px;
  background-image: linear-gradient(
    150deg,
    rgba(190, 100, 200, 0) 0%,
    rgba(190, 100, 200, 0.2) 40%,
    rgba(190, 100, 200, 0.6) 50%,
    rgba(190, 100, 200, 0.1) 64%,
    rgba(190, 100, 200, 0) 100%
  );
  transform-origin: 100% 50%;
}

@keyframes animatedPill {
  0% {
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
  100% {
    transform: scale3d(1, 1, 1) translate3d(-200%, 0, 0);
  }
}

@keyframes pulseScale {
  0% {
    transform: scale3d(1, 1, 1);
  }
  40% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.15, 1.15, 1);
  }
  60% {
    transform: scale3d(1, 1, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

.fade-out-and-up--enter {
  animation-iteration-count: 1;
  animation: fadeOutAndUpAnim 1000ms forwards cubic-bezier(0.2, 0.8, 0.36, 1);
  pointer-events: none;
}

@keyframes fadeOutAndUpAnim {
  0% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
  100% {
    opacity: 0;
    transform: scale3d(0.75, 0.75, 0.75) translate3d(0, -70px, 0);
  }
}

.fade-in-and-down {
  opacity: 0;
  pointer-events: none;
}

.fade-in-and-down--enter {
  animation-iteration-count: 1;
  animation: fadeInAndDown 600ms forwards cubic-bezier(0.2, 0.8, 0.36, 1);
  pointer-events: initial;
}

@keyframes fadeInAndDown {
  0% {
    opacity: 0;
    transform: scale3d(0.75, 0.75, 0.75) translate3d(0, -70px, 0);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
}

.fade {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 15vh;
}

@keyframes gradientAnim {
  0% {
    background-position: 0% 50%, -200px 0;
  }
  50% {
    background-position: 100% 50%, -200px 0;
  }
  100% {
    background-position: 0% 50%, -200px 0;
  }
}

@keyframes prePurchaseBtnAnim {
  0% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  95% {
    opacity: 0.15;
  }
  100% {
    opacity: 0;
  }
}

.neuo-shine {
  overflow: hidden;
  position: relative;
}

.neuo-shine::before {
  animation: neuoShine 2000ms forwards cubic-bezier(0.5, 1.1, 0.36, 1.02);
  animation-delay: 4000ms;
}

.neuo-shine::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 0%;
  right: 100%;
  margin: 0;
  width: 2500px;
  height: 30vh;
  background-image: linear-gradient(
    102deg,
    rgba(150, 100, 200, 0) 0%,
    rgba(150, 100, 200, 0) 36%,
    rgba(150, 100, 200, 0.02) 43%,
    rgba(150, 100, 200, 0.06) 47%,
    rgba(150, 100, 200, 0.1) 50%,
    rgba(150, 100, 200, 0.07) 53%,
    rgba(150, 100, 200, 0.01) 57%,
    rgba(150, 100, 200, 0) 65%,
    rgba(150, 100, 200, 0) 100%
  );
  transform-origin: 50% 100%;
}

@keyframes neuoShine {
  0% {
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
  49% {
    transform: scale3d(1, 1, 1) translate3d(200%, 0, 0);
  }
  50% {
    transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
  100% {
    transform: scale3d(1, 1, 1) translate3d(200%, 0, 0);
  }
}

.spinningCoin {
  animation: coinSpin 4s cubic-bezier(0.88, 0.04, 0.17, 1) 10s infinite;
}

@keyframes coinSpin {
  70% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.shake {
  animation: shakeItem 10s ease-in-out 1s infinite;
}

@keyframes shakeItem {
  0% {
    transform: rotate(0deg);
  }
  2% {
    transform: rotate(20deg);
  }
  4% {
    transform: rotate(-20deg);
  }
  6% {
    transform: rotate(20deg);
  }
  8% {
    transform: rotate(-20deg);
  }
  10% {
    transform: rotate(0deg);
  }
}

.test {
  background-size: 150% 150% !important;
}

.test:hover {
  animation: cycleBackgroundPos 2500ms infinite;
}

.bg-flashy {
  background: var(--flashyGradient);
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.text-flashy {
  background: var(--flashyGradient);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;

  background-size: 1000% auto;
  animation: cycleBackgroundPos 15000ms infinite steps(60);
}

.border-flashy {
  --borderFlashyRadius: 5px;
  --borderFlashyWidth: 6px;
  position: relative;
  border-radius: var(--borderFlashyRadius);
  width: calc(100% - 5px);
}

@screen sm {
  .border-flashy {
    --borderFlashyWidth: 10px;
    width: calc(100% - 5px);
  }
}

.border-flashy:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderFlashyWidth));
  left: calc(-1 * var(--borderFlashyWidth));
  height: calc(100% + var(--borderFlashyWidth) * 2);
  width: calc(100% + var(--borderFlashyWidth) * 2);
  background: var(--flashyGradient);
  border-radius: var(--borderFlashyRadius);
  animation: cycleBackgroundPos 25000ms infinite steps(140);
  background-size: 300% 300%;
  z-index: -1;
}

@keyframes cycleBackgroundPos {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.purple-pink-gradient-animation {
  @apply bg-body;
}

.purple-pink-gradient-animation:after {
  --borderFlashyWidth: 2px !important;
  animation-duration: 4000ms !important;
  background-image: linear-gradient(40deg, #4c249f 30%, #9c48ba 81%) !important;
}