/* Motion Kit — Mask Reveal Heading. Needs core.css.
   Each line (or word) is clipped by .mkit-reveal__line; its inner text waits below the clip until
   mask-reveal.js adds .is-in, then rises in order (--i × --stagger). The optional marker under <em>
   sweeps in after the last piece (--n). */

.mkit-reveal {
	margin: 0;
	color: var(--mkit-text);
	font-size: clamp(2.25rem, 1.3rem + 3.6vw, 5rem);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -.035em;
}

.mkit-reveal--center {
	text-align: center;
}

.mkit-reveal__line {
	display: block;
	overflow: hidden;
	/* room for descenders inside the clip, without changing the line spacing */
	padding-bottom: .12em;
	margin-bottom: -.12em;
}

.mkit-reveal--words .mkit-reveal__line {
	display: inline-block;
	vertical-align: top;
}

.mkit-reveal__inner {
	display: inline-block;
	transform-origin: 0 100%;
}

.mkit-reveal em {
	font-style: normal;
	color: var(--mkit-accent-soft);
}

.mkit-reveal--marker em {
	background: linear-gradient(var(--mkit-accent), var(--mkit-accent)) no-repeat 0 92% / 100% .08em;
}

@media (prefers-reduced-motion: no-preference) {
	.mkit-js .mkit-reveal:not(.is-in) .mkit-reveal__inner {
		translate: 0 112%;
		rotate: 5deg;
	}
	.mkit-reveal.is-in .mkit-reveal__inner {
		transition: translate 1s cubic-bezier(.2, .8, .2, 1), rotate 1s cubic-bezier(.2, .8, .2, 1);
		transition-delay: calc(var(--i, 0) * var(--stagger, 110ms));
	}
	.mkit-js .mkit-reveal--marker:not(.is-in) em {
		background-size: 0% .08em;
	}
	.mkit-reveal--marker.is-in em {
		transition: background-size .8s var(--mkit-ease) calc(var(--n, 2) * var(--stagger, 110ms) + .45s);
	}
}