/* Playful "currently building" progress bar under the footer credit */

/* text on top, bar underneath; the bar row stretches to the text's width */
.credit { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }

.progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-style: normal;
}

.progress-bar {
  position: relative;
  display: block;
  flex: 1;
  height: 7px;
  border-radius: 999px;
  background: var(--cursor-snap);
  overflow: hidden;
}
.progress-fill {
  display: block;  /* spans ignore width/height unless they're blocks */
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--logo);
  transition: width 0.9s cubic-bezier(0.34, 1.3, 0.64, 1);  /* slight overshoot = bouncy */
}

.progress-pct {
  min-width: 3ch;
  font-size: var(--text);
  font-variant-numeric: lining-nums tabular-nums;  /* digits don't jiggle while counting */
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill { transition: none !important; }
}