.blancify-animate {
  --blancify-animate-duration: 700ms;
  --blancify-animate-delay: 0ms;
  --blancify-animate-distance: 36px;
  opacity: 0;
  transform: translate3d(0, var(--blancify-animate-distance), 0);
  transition:
    opacity var(--blancify-animate-duration) ease,
    transform var(--blancify-animate-duration) ease;
  transition-delay: var(--blancify-animate-delay);
  will-change: opacity, transform;
}

.blancify-animate.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.blancify-animate-fade-down {
  transform: translate3d(0, calc(var(--blancify-animate-distance) * -1), 0);
}

.blancify-animate-fade-left {
  transform: translate3d(var(--blancify-animate-distance), 0, 0);
}

.blancify-animate-fade-right {
  transform: translate3d(calc(var(--blancify-animate-distance) * -1), 0, 0);
}

.blancify-animate-zoom-in {
  transform: scale(0.92);
}

.blancify-animate-delay-100 {
  --blancify-animate-delay: 100ms;
}

.blancify-animate-delay-200 {
  --blancify-animate-delay: 200ms;
}

.blancify-animate-delay-300 {
  --blancify-animate-delay: 300ms;
}

.blancify-animate-delay-400 {
  --blancify-animate-delay: 400ms;
}

.blancify-animate-delay-500 {
  --blancify-animate-delay: 500ms;
}

.blancify-animate-duration-300 {
  --blancify-animate-duration: 300ms;
}

.blancify-animate-duration-500 {
  --blancify-animate-duration: 500ms;
}

.blancify-animate-duration-1000 {
  --blancify-animate-duration: 1000ms;
}

@media (prefers-reduced-motion: reduce) {
  .blancify-animate,
  .blancify-animate.is-visible,
  .blancify-animate-fade-down,
  .blancify-animate-fade-left,
  .blancify-animate-fade-right,
  .blancify-animate-zoom-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}