/*!
 * Fuel H2 reveal — words rise from below the baseline with a stagger as the
 * heading enters the viewport. Matches the Framer template's "About Us"
 * treatment: each word masked, sliding up from 100% translateY.
 *
 * Opt out on a specific heading with class "no-fuel-reveal".
 */

.fuel-h2-reveal {
	/* The wrapper stays as a normal block heading — no layout change. */
}

.fuel-h2-reveal .fuel-h2-word {
	display: inline-flex;
	overflow: hidden;
	vertical-align: bottom;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	padding-bottom: 0.05em; /* prevent descender clipping on g, y, p, j */
}

.fuel-h2-reveal .fuel-h2-word__inner {
	display: inline-block;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	transform: translate3d(0, 110%, 0);
	opacity: 0;
	will-change: transform, opacity;
	transition:
		transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.6s ease-out;
}

.fuel-h2-reveal.is-revealed .fuel-h2-word__inner {
	transform: translate3d(0, 0, 0);
	opacity: 1;
}

/* Preserve regular spaces between wrapped words. */
.fuel-h2-reveal .fuel-h2-space {
	display: inline-block;
	width: 0.28em;
}

/* Respect user preferences — no animation, everything just shows. */
@media (prefers-reduced-motion: reduce) {
	.fuel-h2-reveal .fuel-h2-word__inner {
		transform: none;
		opacity: 1;
		transition: none;
	}
}