.spin-animation {
  animation: spin-circle 2.5s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.hidden-dot {
  opacity: 0;
  animation: blink 2s linear infinite;
}

.animate-fade-in-up {
  animation: fade-in-up 1.5s infinite alternate;
}

.animation-pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: pulse 1s infinite alternate;
}

.animation-gelatine {
  transform-origin: center;
  transform-box: fill-box;
  animation: gelatine 1s infinite alternate;
}

.animation-hithere {
  transform-origin: center;
  transform-box: fill-box;
  animation: hithere 1.5s infinite alternate;
}

.animation-chart-1 {
  transform-origin: center;
  transform-box: fill-box;
  animation: chart-blink 1.5s infinite alternate;
  animation-delay: 0s;
}

.animation-chart-2 {
  transform-origin: center;
  transform-box: fill-box;
  animation: chart-blink 1.5s infinite alternate;
  animation-delay: 0.2s;
}

.animation-chart-3 {
  transform-origin: center;
  transform-box: fill-box;
  animation: chart-blink 1.5s infinite alternate;
  animation-delay: 0.4s;
}

.animation-doc-slide-1 {
  transform-origin: center;
  transform-box: fill-box;
  animation: doc-slide 1.5s infinite alternate;
  animation-delay: 0.1s;
}

.animation-doc-slide-2 {
  transform-origin: center;
  transform-box: fill-box;
  animation: doc-slide 1.5s infinite alternate;
  animation-delay: 0.2s;
}

.animation-doc-slide-3 {
  transform-origin: center;
  transform-box: fill-box;
  animation: doc-slide 1.5s infinite alternate;
  animation-delay: 0.3s;
}

.animation-doc-slide-4 {
  transform-origin: center;
  transform-box: fill-box;
  animation: doc-slide 1.5s infinite alternate;
  animation-delay: 0.4s;
}

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

@keyframes ring-chili {
  0% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(-8deg);
  }
}

@keyframes ring-food-footer {
  0% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}

@keyframes ring-food {
  0% {
    transform: rotate(300deg);
  }
  100% {
    transform: rotate(330deg);
  }
}

@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes fade-in-up {
  0% {
    @apply translate-y-0 {
    }
  }
  100% {
    transform: translateY(-20px);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes move-v {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(-10px, 10px);
  }
  66% {
    transform: translate(10px, 10px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes move-h {
  0% {
    transform: translate(0, 0);
  }
  33% {
    transform: translate(10px, 0);
  }
  66% {
    transform: translate(-10px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes spin-circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes gelatine {
  0%,
  100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.9, 1.1);
  }
}

@keyframes hithere {
  30% {
    transform: scale(1.2);
  }
  40%,
  60% {
    transform: rotate(-20deg) scale(1.2);
  }
  50% {
    transform: rotate(20deg) scale(1.2);
  }
  70% {
    transform: rotate(0deg) scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes chart-blink {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes doc-slide {
  0% {
    transform: translateX(0%);
  }
  20% {
    transform: translateX(0%);
  }
  80% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(30%);
  }
}