.animated {
  animation-duration: var(--animation-duration);
  animation-fill-mode: both;
  visibility: visible !important;
}

.infinite {
  animation-iteration-count: infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-animation]:not(.visible) {
    visibility: visible !important;
  }
  *, *:before, *:after {
    animation: none !important;
    transition: none !important;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animation\:fade-in {
  animation-name: fadeIn;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, calc(var(--transition-translate-factor, 0.5) * var(--spacing-4, 1rem)), 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.animation\:fade-in-up {
  animation-name: fadeInUp;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, calc(-1 * var(--transition-translate-factor, 0.5) * var(--spacing-4, 1rem)), 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.animation\:fade-in-down {
  animation-name: fadeInDown;
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(calc(-1 * var(--transition-translate-factor, 0.5) * var(--spacing-4, 1rem)), 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.animation\:fade-in-left {
  animation-name: fadeInLeft;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(calc(var(--transition-translate-factor, 0.5) * var(--spacing-4, 1rem)), 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.animation\:fade-in-right {
  animation-name: fadeInRight;
}

@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
.animation\:flip-in-x {
  backface-visibility: visible !important;
  animation-name: flipInX;
}

@keyframes flipInY {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
.animation\:flip-in-y {
  backface-visibility: visible;
  animation-name: flipInY;
}

@keyframes rotateInDownLeft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -15deg);
    opacity: 0;
  }
  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1;
  }
}
.animation\:rotate-in-down-left {
  animation-name: rotateInDownLeft;
}

@keyframes rotateInDownRight {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 15deg);
    opacity: 0;
  }
  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1;
  }
}
.animation\:rotate-in-down-right {
  animation-name: rotateInDownRight;
}