/* Motion Kit — Giant Wordmark. Needs core.css.
   wordmark.js measures the word and sets --fit (the font size that fills the width; 18cqi until then)
   and, with data-rise, --p (0 → 1 as it scrolls into view). Each letter's own progress --q starts a
   little later than the one before, so the letters rise in a wave. */

.mkit-wordmark {
	width: 100%;
	container-type: inline-size;
	color: var(--mkit-text);
}

.mkit-wordmark__word {
	margin: 0;
	overflow: hidden;
	padding-block: .02em .1em;
	font-size: var(--fit, 18cqi);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.045em;
	white-space: nowrap;
}

.mkit-wordmark__letters {
	display: inline-flex;
}

.mkit-wordmark__letters > span {
	--q: clamp(0, calc((var(--p, 1) - var(--i) / var(--n) * .45) / .55), 1);
	display: inline-block;
	white-space: pre;
	translate: 0 calc((1 - var(--q)) * 108%);
}

/* Outline: variable fonts draw glyphs from overlapping shapes, and a bare stroke traces every overlap.
   The stroke is painted under a fill in the section colour (--mkit-surface), so only the outer edge shows. */
.mkit-wordmark--outline .mkit-wordmark__word {
	letter-spacing: -.01em;
}

.mkit-wordmark--outline .mkit-wordmark__letters > span {
	color: var(--mkit-surface);
	-webkit-text-stroke: max(2px, .024em) var(--mkit-text);
	paint-order: stroke fill;
}

/* Each letter shows its own slice of one gradient that spans the whole word */
.mkit-wordmark--gradient .mkit-wordmark__letters > span {
	color: transparent;
	background: linear-gradient(100deg, var(--mkit-accent-soft), var(--mkit-accent) 50%, color-mix(in srgb, var(--mkit-accent), #fff 35%));
	background-size: calc(var(--n) * 100%) 100%;
	background-position: calc(var(--i) / max(1, var(--n) - 1) * 100%) 0;
	-webkit-background-clip: text;
	background-clip: text;
}