/* Instruments (COMPONENTS 12): the odometer. Dial and caliper are specific to the Why scene (home-why.css). */

.odo {
	display: inline-flex;
	font: 300 clamp(96px, 13vw, 208px) / 1 var(--font-display);
	letter-spacing: -0.06em;
	color: var(--fg);
}

.odo-cols {
	display: inline-flex;
	height: 1em;
	overflow: hidden;
	direction: ltr;
	unicode-bidi: isolate;
}

.odo .col {
	position: relative;
	display: block;
	width: 0.62em;
	height: 1em;
	overflow: hidden;
}

/* Each column shows the digit in --d. The strip is 10 digits tall, one em each. */
.odo .col > span {
	display: block;
	transform: translateY(calc(var(--d) * -1em));
	transition: transform 2.2s var(--ease);
}

.odo i {
	display: block;
	height: 1em;
	font-style: normal;
	text-align: center;
}

/* Rolls from zero when its wrapper is revealed (core.js adds .in). Without script or under reduced motion the final value shows. */
.js:not(.rm) [data-r]:not(.in) .odo .col > span {
	transform: none;
}