/* ---------- Chip: a figure set in a small tilted pill inside running text ---------- */

.sterling-chip {
	display: inline-block;
	padding: 0.02em 0.42em 0.08em;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--on-dark);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.78em;
	font-style: italic;
	line-height: 1.2;
	vertical-align: 0.08em;
	transform: rotate(-3deg);
}

.is-style-section-dark .sterling-chip {
	background: var(--wp--preset--color--on-dark);
	color: var(--wp--preset--color--contrast);
}

/* ---------- Reveal: text fills from muted to full color while it scrolls through view ---------- */

.is-style-reveal {
	--sterling-reveal-color: var(--wp--preset--color--contrast);
}

.is-style-section-dark .is-style-reveal {
	--sterling-reveal-color: var(--wp--preset--color--on-dark);
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.is-style-reveal .sterling-reveal__text {
			background:
				linear-gradient(var(--sterling-reveal-color), var(--sterling-reveal-color)) 0 0 / 0% 100% no-repeat,
				color-mix(in srgb, var(--sterling-reveal-color) 28%, transparent);
			-webkit-background-clip: text;
			background-clip: text;
			color: transparent;
			animation: sterling-reveal linear both;
			animation-timeline: view();
			animation-range: entry 25% cover 55%;
		}

		/* Chips keep their own colors inside the clipped text. */
		.is-style-reveal .sterling-reveal__text .sterling-chip {
			-webkit-background-clip: border-box;
			background-clip: border-box;
		}
	}
}

@keyframes sterling-reveal {
	to {
		background-size: 100% 100%, auto;
	}
}