/* Animation master - Digit roll */

/*
  Usage:
    <span class="t-digit-roll">
      <span class="t-digit-roll-viewport t-digit-roll-item">
        <span class="t-digit-roll-reel">
          <span class="t-digit-roll-cell">0</span>
          <span class="t-digit-roll-cell">1</span>
        </span>
      </span>
    </span>

  Set `--digit-roll-scroll-distance`, `--digit-roll-duration`,
  and `--digit-roll-stagger` on each reel/item to control timing.
*/

:root {
  --digit-roll-dur: 500ms;
  --digit-roll-distance: 8px;
  --digit-roll-stagger: 70ms;
  --digit-roll-blur: 2px;
  --digit-roll-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-roll-dir-x: 0;
  --digit-roll-dir-y: 1;
  --digit-roll-settle-overshoot: 1.8px;
}

.t-digit-roll {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.t-digit-roll-item {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.t-digit-roll.is-animating .t-digit-roll-item {
  animation: t-digit-roll-pop-in var(--digit-roll-dur) var(--digit-roll-ease) both;
  animation-delay: calc(var(--digit-roll-stagger) * var(--digit-roll-stagger-index, 0));
}

.t-digit-roll-viewport {
  width: 0.62em;
  height: 1.08em;
  overflow: hidden;
}

.t-digit-roll-reel {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(-1 * var(--digit-roll-scroll-distance, 0em)));
  will-change: transform;
}

.t-digit-roll.is-animating .t-digit-roll-reel {
  animation: t-digit-roll-scroll var(--digit-roll-duration, var(--digit-roll-dur)) cubic-bezier(0.2, 0.82, 0.16, 1) forwards;
}

.t-digit-roll-cell {
  display: block;
  width: 0.62em;
  height: 1.08em;
  line-height: 1.08em;
  text-align: center;
}

@keyframes t-digit-roll-pop-in {
  0% {
    transform: translate(
      calc(var(--digit-roll-distance) * var(--digit-roll-dir-x)),
      calc(var(--digit-roll-distance) * var(--digit-roll-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-roll-blur));
  }

  100% {
    transform: translate(0, 0);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes t-digit-roll-scroll {
  0% {
    transform: translateY(0);
  }

  62% {
    transform: translateY(calc(-1 * var(--digit-roll-scroll-distance, 0em) - var(--digit-roll-settle-overshoot)));
  }

  78% {
    transform: translateY(calc(-1 * var(--digit-roll-scroll-distance, 0em) + var(--digit-roll-settle-overshoot) * 0.34));
  }

  90% {
    transform: translateY(calc(-1 * var(--digit-roll-scroll-distance, 0em) - var(--digit-roll-settle-overshoot) * 0.12));
  }

  100% {
    transform: translateY(calc(-1 * var(--digit-roll-scroll-distance, 0em)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-digit-roll,
  .t-digit-roll * {
    animation: none !important;
    filter: none !important;
  }
}