/**
 * Stat cards.
 *
 * Measured from the design (Home, 390 → 1920): cards are 1.07 : 1, white, 24px radius, at least
 * 200px wide and at most 300px tall, and share the row equally (they wrap when they would be
 * narrower; a card alone on its row is wide and 300 tall). The row keeps
 * 50px on each side at every width and 64px above it; the gap grows 12 → 24px (1.6vw), the
 * figure 52 → 84px (4.6vw). The component itself stops growing at 1408px.
 */

.acini-stat-cards {
	/* Explicit width: auto side margins in a flex column would otherwise shrink it to its content. */
	inline-size: 100%;
	max-inline-size: var(--acini-container-xl);
	margin-inline: auto;
}

.acini-stat-cards__list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.2rem, 1.6vw, 2.4rem);
	margin: var(--acini-space-2xl) 5rem 0;
	padding: 0;
	list-style: none;
}

.acini-stat-cards__card {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--acini-space-sm);
	min-inline-size: 20rem;
	aspect-ratio: 1.07 / 1;
	max-block-size: 30rem;
	color: var(--acini-text);
	text-align: center;
	background: var(--acini-bg);
	border-radius: var(--acini-radius-2xl);
}

.acini-stat-cards__number {
	font-family: var(--acini-font-heading);
	font-size: clamp(5.2rem, 4.6vw, 8.4rem);
	font-weight: var(--acini-weight-regular);
	line-height: 1;
}

/* ---- Count-up ------------------------------------------------------------
 *
 * CSS only: a registered integer runs 0 -> the figure, and ::after prints the whole figure,
 * prefix + counter + suffix, as one run of text. It starts when reveal.js marks the card
 * shown, with the card's own fade-up delay. The real figure stays underneath, transparent,
 * so the box keeps the final width and screen readers read it once (the counter's
 * alternative text is empty, so the running digits are not announced).
 *
 * The count shares the figure's grid cell (so the two share a baseline) but is zero wide
 * and hangs from the cell's end: the suffix stays put, and since prefix and digits are one
 * run, a count wider than the final figure (the heading font's digits are proportional:
 * "38" is wider than "81") pushes the "$" outwards instead of running into it, and the
 * figure never re-centres on every frame.
 *
 * Only under html.acini-reveal and without a reduced-motion preference: otherwise, with no
 * script, or when reveal.js never starts (the inline failsafe drops the class), the figure
 * is static text.
 */

@property --acini-count {
	syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}

@keyframes acini-count-up {
	from {
		--acini-count: 0;
	}

	to {
		--acini-count: var(--acini-count-to);
	}
}

.acini-stat-cards__number--count {
	display: inline-grid;
}

.acini-stat-cards__final {
	grid-area: 1 / 1;
}

@media (prefers-reduced-motion: no-preference) {
	html.acini-reveal .acini-stat-cards__number--count {
		counter-reset: acini-count var(--acini-count);
	}

	html.acini-reveal .acini-stat-cards__number--count .acini-stat-cards__final {
		color: transparent;
	}

	/* Zero wide at the cell's end; flex-end lets the text overflow towards the start. */
	html.acini-reveal .acini-stat-cards__number--count::after {
		grid-area: 1 / 1;
		justify-self: end;
		display: flex;
		justify-content: flex-end;
		inline-size: 0;
		white-space: nowrap;
		content: attr(data-prefix) counter(acini-count) attr(data-suffix);
		content: attr(data-prefix) counter(acini-count) attr(data-suffix) / "";
	}

	html.acini-reveal .acini-stat-cards__card[data-shown] .acini-stat-cards__number--count {
		animation: acini-count-up 2s var(--acini-ease-out) var(--acini-delay, 0s) both;
	}
}

.acini-stat-cards__caption {
	font-size: var(--acini-text-sm);
	line-height: var(--acini-leading-normal);
}