/*
 * Word roll. Figma 194:514 (Home): a 1840 x 762 band at 40/4084, 40px
 * after the houses and 40px before the Wellness card. Headline B words in
 * Cooper 1, centred, tracking -1.5px; the text block is centred in the band.
 * Figma fades the band with a white layer (194:515): white to 20%, clear at
 * 49.519%, white again from 80%. A mask with the inverse stops gives the same
 * look on white, without a hairline of text at the clipped edge.
 * word-roll.js moves the words with the page scroll through --roll-offset.
 */

/* Below 533px the longest line ("Reconnect, Recharge,") would wrap at 48px, so the words shrink with the screen. */
.word-roll {
	--roll-size: min(var(--fs-150), 9vw);

	padding-bottom: var(--space-40);
}

/* 762px at 1920: about six lines of the 150px words at any width. */
.word-roll__window {
	position: relative;
	height: calc(var(--roll-size) * 5.08);
	overflow: hidden;
	mask-image: linear-gradient(to bottom, transparent 20%, #000 49.519%, transparent 80%);
}

.word-roll__track {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	color: var(--color-cooper-1);
	font-size: var(--roll-size);
	font-weight: var(--fw-extralight);
	line-height: var(--lh-headline);
	letter-spacing: -0.01em;
	text-align: center;
	text-box: trim-both cap alphabetic;
	translate: 0 calc(-50% + var(--roll-offset, 0px));
}

.word-roll__set,
.word-roll__line {
	display: block;
}