/* Stat – a big number with unit, label and source note.
   .stat            one stat
   .stat--feature   one oversized stat
   .stat-row        a row of stats with a hairline above each
   Animation (stat.js): data-to / data-from / data-decimals count the number,
   data-reveal="chars" reveals it character by character; without either it stays still. */

.stat {
  --stat-size: clamp(2.75rem, 1.6rem + 3.6vw, 5rem);
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.stat__value {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  margin: 0;
  font-size: var(--stat-size);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stat__unit {
  font-size: 0.4em;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}

.stat__label {
  margin: 0;
  font-weight: 500;
}

.stat__note {
  margin: 0;
  font-size: var(--text-small);
  color: var(--fg-muted);
}

.stat--feature {
  --stat-size: clamp(4.5rem, 1.5rem + 11vw, 10.5rem);
  gap: var(--space-4);
}

.stat--feature .stat__label {
  font-size: var(--text-lead);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-7) var(--space-6);
}

.stat-row > .stat {
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-strong);
}

/* Character reveal */
.stat__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.14em);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slower) var(--ease-emphasis);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.stat.is-shown .stat__char {
  opacity: 1;
  transform: none;
}