/*
 * Starting states for motion.js, only between the first paint and the moment
 * it takes over (it adds `motion-live` and sets its own states inline). If it
 * never runs, the failsafe animation shows everything after three seconds.
 */

.motion:not(.motion-live) [data-intro],
.motion:not(.motion-live) .reveal {
  animation: motion-failsafe 0.01s 3s forwards;
  opacity: 0;
}

@keyframes motion-failsafe {
  to {
    opacity: 1;
  }
}

/* A thin line along the top that fills as the page is read. */
.scroll-progress {
  background: linear-gradient(90deg, var(--lime), #7fd4c1);
  height: 3px;
  left: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 1000;
}

.stat strong {
  font-variant-numeric: tabular-nums;
}