/*
 * Metric (components/metric/): a case study's number inside a watch face.
 *
 * Static state (no JS, reduced motion, STATIC_ACCESSIBLE, or after the
 * sweep): the finished face — the growth ring closed, the seed at twelve
 * (where the logo's arrow points), the number in the middle.
 *
 * Motion (assets/js/components/metric-dial.js, when the face scrolls in):
 *   [data-gb-dial="ready"]  the start: empty ring, digits at zero;
 *   [data-gb-dial="run"]    the seed runs one full turn, the ring closes
 *                           behind it and the digits roll into place; one
 *                           soft pulse when the seed comes home.
 * Only rotate, stroke-dashoffset, translate, opacity and scale move.
 */

.gb-metric {
	--gb-dial-time: 1.9s;
	--gb-dial-ease: cubic-bezier(0.6, 0, 0.25, 1);
	--gb-dial-delay: calc(var(--gb-dial-index, 0) * 170ms);

	display: grid;
	justify-items: center;
	align-content: start;
	gap: var(--gb-space-xs);
	text-align: center;
}

/* ---------- The face ---------- */

.gb-metric__dial {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: clamp(11rem, 8rem + 7vw, 15.5rem);
	aspect-ratio: 1;
	container-type: inline-size;
}

.gb-metric__face {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
	filter: drop-shadow(0 1.1rem 1.4rem rgb(12 35 66 / 0.12));
}

.gb-metric__rim {
	fill: var(--gb-bg);
}

/* Revision 10 («حلقة النمو», owner 13:40): a thick ring in the logo's colours on a quiet track. */
.gb-metric__track {
	fill: none;
	stroke: var(--gb-color-navy-a10, rgb(12 35 66 / 0.07));
	stroke-width: 9;
}

.gb-metric__trail {
	fill: none;
	stroke-width: 9;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.gb-metric__stop--frame {
	stop-color: var(--gb-color-turquoise);
}

.gb-metric__stop--seed {
	stop-color: var(--gb-color-logo-seed, #00A3C4);
}

.gb-metric__stop--dash {
	stop-color: var(--gb-color-logo-navy, #004888);
}

.gb-metric__hand {
	transform-box: view-box;
	transform-origin: 50% 50%;
}

/* The seed at the ring's head, ringed in white so it reads over the colours. */
.gb-metric__seed {
	fill: var(--gb-seed);
	stroke: #FFFFFF;
	stroke-width: 2.2;
}

/* One soft ring when the hand comes home (drawn on the face's edge). */
.gb-metric__dial::after {
	content: "";
	position: absolute;
	inset: 2.5%;
	border: 2px solid var(--gb-primary);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

/* ---------- The number ---------- */

.gb-metric__value {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 0.15em;
	margin: 0;
	color: var(--gb-color-navy);
	line-height: 1.1;
}

.gb-metric__number {
	font-family: var(--gb-font-display);
	font-size: 21cqi;
	font-weight: var(--gb-weight-bold);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Long numbers («+١٠٠٠٠») step down so they stay inside the marks. */
.gb-metric--long .gb-metric__number {
	font-size: 16.5cqi;
}

.gb-metric__unit {
	font-size: 7.5cqi;
	font-weight: var(--gb-weight-bold);
	color: var(--gb-text-muted);
}

/* ---------- Under the face ---------- */

.gb-metric__label {
	max-inline-size: 17rem;
	font-size: var(--gb-step-0);
	font-weight: var(--gb-weight-medium);
	color: var(--gb-text);
	text-wrap: balance;
}

.gb-metric__note {
	max-inline-size: 17rem;
	font-size: var(--gb-step--1);
	color: var(--gb-text-muted);
}

/* Not approved yet (Local / Staging only): an amber rim, and what is still to define. */
.gb-metric--review .gb-metric__rim {
	stroke: #D9A21B;
	stroke-width: 1;
	stroke-dasharray: 2 2.4;
}

.gb-metric__review {
	display: grid;
	justify-items: center;
	gap: var(--gb-space-3xs);
	max-inline-size: 18rem;
}

.gb-metric__definition {
	font-size: var(--gb-step--1);
	color: var(--gb-text-muted);
	text-wrap: balance;
}

/* ---------- Rolling digits (built by metric-dial.js) ---------- */

/*
 * Each digit is a column showing one cell of a strip «0…9 0…9»; the strip
 * slides to its target cell. The real number stays in the page for screen
 * readers (a visually hidden copy); the roll is aria-hidden.
 */
.gb-dial-roll {
	display: inline-flex;
	user-select: none;
	direction: ltr;
	unicode-bidi: isolate;
}

.gb-dial-roll__col {
	display: inline-block;
	block-size: 1.15em;
	overflow: hidden;
	line-height: 1.15;
}

.gb-dial-roll__strip {
	display: block;
	translate: 0 calc(var(--gb-roll-to, 0) * -1.15em);
}

.gb-dial-roll__strip > span {
	display: block;
	block-size: 1.15em;
}

/* ---------- Motion ---------- */

[data-gb-dial="ready"] .gb-metric__trail {
	stroke-dashoffset: 1;
}

[data-gb-dial="ready"] .gb-dial-roll__strip {
	--gb-roll-to: 0;
}

/* Already on screen at load: starts from the finished look (no jump back). */
[data-gb-dial="ready"][data-gb-dial-soft] .gb-metric__trail {
	stroke-dashoffset: 0;
}

[data-gb-dial="ready"][data-gb-dial-soft] .gb-dial-roll__strip {
	--gb-roll-to: var(--gb-roll-from, 0);
}

[data-gb-dial="run"][data-gb-dial-soft] .gb-metric__trail {
	animation: none;
}

[data-gb-dial="run"] .gb-metric__hand {
	animation: gb-dial-sweep var(--gb-dial-time) var(--gb-dial-ease) var(--gb-dial-delay) both;
}

[data-gb-dial="run"] .gb-metric__trail {
	animation: gb-dial-trail var(--gb-dial-time) var(--gb-dial-ease) var(--gb-dial-delay) both;
}

[data-gb-dial="run"] .gb-dial-roll__strip {
	--gb-roll-to: var(--gb-roll-target, 0);

	transition: translate calc(var(--gb-dial-time) - 0.15s) cubic-bezier(0.25, 0.8, 0.2, 1);
	transition-delay: calc(var(--gb-dial-delay) + var(--gb-roll-lag, 0ms));
}

[data-gb-dial="run"] .gb-metric__dial::after {
	animation: gb-dial-home 0.9s var(--gb-ease-out) calc(var(--gb-dial-delay) + var(--gb-dial-time) - 0.1s) both;
}

@keyframes gb-dial-sweep {
	from {
		rotate: 0turn;
	}

	to {
		rotate: 1turn;
	}
}

@keyframes gb-dial-trail {
	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes gb-dial-home {
	0% {
		opacity: 0.55;
		scale: 1;
	}

	100% {
		opacity: 0;
		scale: 1.12;
	}
}

/* LIGHT devices: the same idea, quicker. */
:root[data-gb-experience="LIGHT"] .gb-metric {
	--gb-dial-time: 1.3s;
	--gb-dial-delay: 0ms;
}