/* =========================================================
   FULL-SCREEN EDITORIAL TYPOGRAPHY SECTION
   Text only. Words are pinned; GSAP ScrollTrigger drives the
   active-word color/scale transition as the user scrolls.
========================================================= */

.mcg-typography-section {
	position: relative;
	height: 400vh; /* scroll distance the word transitions scrub across */
	background: var(--mcg-bg);
}

.mcg-typography-section__pin {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.mcg-typography-section__words {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(0.5rem, 1.5vw, 1rem);
}

.mcg-typography-word {
	font-family: var(--mcg-font-display);
	font-size: var(--mcg-fs-typography);
	line-height: 1;
	color: var(--mcg-text-dim); /* dark grey — "next" state */
	opacity: 0.35;
	transform: scale(0.92);
	transition: color var(--mcg-dur-slow) var(--mcg-ease-soft), opacity var(--mcg-dur-slow) var(--mcg-ease-soft), transform var(--mcg-dur-slow) var(--mcg-ease-soft);
	will-change: color, opacity, transform;
}

/* GSAP toggles these two states as each word becomes active/passed */
.mcg-typography-word.is-active {
	color: var(--mcg-orange);
	opacity: 1;
	transform: scale(1.06);
}

.mcg-typography-word.is-passed {
	color: var(--mcg-text-dim);
	opacity: 0.5;
	transform: scale(0.96);
}