:root {
  --reveal-distance: 28px;
  --reveal-duration: 720ms;
  --reveal-easing: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js-animations [data-animate] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition: opacity var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
  transition-delay: var(--delay, 0ms);
  will-change: opacity, transform;
}

.js-animations [data-animate="left"] {
  transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0);
}

.js-animations [data-animate="right"] {
  transform: translate3d(var(--reveal-distance), 0, 0);
}

.js-animations [data-animate="zoom"] {
  transform: scale(0.96);
}

.js-animations [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-animations [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

[data-counter].counter-width-reserved {
  min-width: var(--counter-reserved-width, auto);
  text-align: inherit;
  white-space: pre;
  font-variant-numeric: tabular-nums;
}

[data-counter].counter-width-reserved.counter-inline-reserved {
  display: inline-block;
}