.animate {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s ease forwards;
}

.delay-1 {
  animation-delay: 0.1s;
}

.delay-2 {
  animation-delay: 0.3s;
}

.delay-3 {
  animation-delay: 0.5s;
}

.delay-4 {
  animation-delay: 0.7s;
}

.delay-5 {
  animation-delay: 0.9s;
}

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pptShake {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(-6deg);
    opacity: 1;
  }

  30% {
    transform: rotate(5deg);
  }

  45% {
    transform: rotate(-4deg);
  }

  60% {
    transform: rotate(3deg);
  }

  75% {
    transform: rotate(-2deg);
  }

  90% {
    transform: rotate(1deg);
  }

  100% {
    transform: rotate(0deg);
    opacity: 1;
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUpCenter {
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes wipe {
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes walk {
  0% {
    transform: translateY(0px) rotate(-1deg);
  }

  25% {
    transform: translateY(-6px) rotate(1deg);
  }

  50% {
    transform: translateY(0px) rotate(-1deg);
  }

  75% {
    transform: translateY(-6px) rotate(1deg);
  }

  100% {
    transform: translateY(0px) rotate(-1deg);
  }
}

@keyframes moveForward {
  from {
    opacity: 0;
    right: -50%;
  }

  to {
    opacity: 1;
    right: -35%;
  }
}

@keyframes flyIn {
  from {
    transform: translate(-35cqw, -30cqw) scale(0.8);
    opacity: 0;
  }

  to {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes flyIn2 {
  from {
    transform: translate(35cqw, -30cqw) scale(0.8);
    opacity: 0;
  }

  to {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes blink2 {
  0%, 100% {
    opacity: 0;
  }

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

@keyframes scan {
  0% {
    top: -0.3cqw;
    transform: translate(-50%, 0);
  }

  50% {
    top: 100%;
    transform: translate(-50%, -80%);
  }

  95% {
    top: -0.3cqw;
    transform: translate(-50%, 0);
  }

  100% {
    top: -0.3cqw;
    transform: translate(-50%, 0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes circleReveal {
  from {
    opacity: 1;
    clip-path: circle(0% at 50% 50%);
  }

  to {
    opacity: 1;
    clip-path: circle(150% at 50% 50%);
  }
}

@keyframes scaleUp {
  to {
    top: -5%;
    left: 27.8%;
    width: 102%;
  }
}

@keyframes smoke {
  to {
    opacity: 1;
    right: -5%;
  }
}

@keyframes wipeRight {
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes gameStep0 {
  0% {
    transform: translate(-50%, -3%);
  }

  50% {
    transform: translate(-50%, calc(94cqh - 50%));
  }

  100% {
    transform: translate(-50%, -3%);
  }
}

@keyframes gameStep1 {
  0% {
    transform: translate(-50%, -3%);
  }

  100% {
    transform: translate(-50%, -12cqh);
  }
}

@keyframes gameStep2 {
  0% {
    transform: translate(-50%, -12cqh);
  }

  100% {
    transform: translate(-50%, -5%);
  }
}

@keyframes gameStep3 {
  0% {
    transform: translate(-50%, -12cqh);
  }

  100% {
    transform: translate(-50%, -5%);
  }
}

@keyframes gameStep4 {
  0% {
    transform: translate(-50%, -12cqh);
  }

  100% {
    transform: translate(-50%, -5%);
  }
}

@keyframes gameStep5 {
  0% {
    transform: translate(-50%, -12cqh);
  }

  100% {
    transform: translate(-50%, -5%);
  }
}

@keyframes gameStep6 {
  0% {
    transform: translate(-50%, -12cqh);
  }

  100% {
    transform: translate(-50%, -5%);
  }
}

@keyframes gameStep7 {
  0% {
    transform: translate(-50%, -12cqh);
  }

  100% {
    transform: translate(-50%, -5%);
  }
}

@keyframes gameStep8 {
  0% {
    transform: translate(-50%, -12cqh);
  }

  100% {
    transform: translate(-50%, -5%);
  }
}

@keyframes moveX {
  from {
    transform: translateX(var(--moveX));
  }

  to {
    transform: translateX(0);
  }
}

@keyframes moveX2 {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(var(--moveX));
  }
}

@keyframes moveY {
  from {
    transform: translateY(var(--moveY));
  }

  to {
    transform: translateY(0);
  }
}

@keyframes moveYCenter {
  from {
    transform: translate(-50%, var(--moveY));
  }

  to {
    transform: translate(-50%, 0);
  }
}

@keyframes circleMove {
  from {
    opacity: 1;
    transform: rotate(0deg) translateX(60%) rotate(0deg);
  }

  to {
    opacity: 1;
    transform: rotate(360deg) translateX(60%) rotate(-360deg);
  }
}

@keyframes floatFade {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  20% {
    opacity: 1;
    transform: translateY(0);
  }

  70% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes softWipeUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 1;
    -webkit-mask-position: 0% 100%;
    mask-position: 0% 100%;
  }
}

@keyframes softWipeDown {
  0% {
    opacity: 0;
    -webkit-mask-position: 0% 100%;
    mask-position: 0% 100%;
  }

  2% {
    opacity: 1;
  }

  98% {
    opacity: 1;
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }

  100% {
    opacity: 0;
  }
}

@keyframes dropPR {
  0% {
    opacity: var(--pr-opacity);
    transform: translateY(-9cqw);
  }

  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes popIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  70% {
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(-3deg);
  }

  40% {
    transform: rotate(3deg);
  }

  60% {
    transform: rotate(-2deg);
  }

  80% {
    transform: rotate(2deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes diamondReveal {
  0% {
    opacity: 1;
    clip-path: polygon(0 0,
        0 0,
        0 0,
        0 0);
  }

  100% {
    opacity: 1;
    clip-path: polygon(-200% 0,
        0 -200%,
        200% 0,
        0 200%);
  }
}

@keyframes movePen {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

@keyframes process4step7 {
  from {
    transform: translate(-36%, 0);
  }

  to {
    transform: translate(10%, -30%);
  }
}

@keyframes process4step8 {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(20%);
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  20%, 80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes impurities {
  0% {
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  30% {
    opacity: 1;
    bottom: 12.5cqw;
    left: 39cqw;
  }

  100% {
    opacity: 1;
    bottom: 17cqw;
    left: 34cqw;
  }
}

@keyframes ion {
  to {
    left: 42cqw;
  }
}

@keyframes drawPath {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

@keyframes fail1 {
  0%, 100% {
    transform: translate(-5%, -5%);
  }

  50% {
    transform: translate(5%, 5%);
  }
}

@keyframes fail2 {
  0%, 100% {
    transform: translate(5%, -5%);
  }

  50% {
    transform: translate(-5%, 5%);
  }
}