/*
 * Word roll (Home): the words in two rows of Headline-size Brando, semibold,
 * in Stone, between the houses and the Wellness card; word-roll.js slides
 * them in opposite directions with the page scroll. Client choice
 * (2026-10-09): version 2 of the three tried, in the light grey instead of
 * the photo, smaller so a few words read at once, without the tagline.
 * The rows fade out at both sides; 140px around the band (the house grid
 * already ends with 40px), 80px from a row's baseline to the next cap.
 */

.word-roll {
	padding-block: calc(var(--space-140) - var(--space-40)) var(--space-140);
}

/* The typewriter stands alone, so it gets half as much air again (210px at 1920; Vlad, 2026-10-13). */
.word-roll--type {
	padding-block: calc(var(--space-140) * 1.5 - var(--space-40)) calc(var(--space-140) * 1.5);
}

/*
 * Clipped only sideways. The fade is a mask, which also hides what overflows
 * the box, so the band reaches 0.3em above the caps and below the baselines
 * (and gives it back with negative margins): accents and descenders stay whole.
 */
.word-roll__band {
	margin-block: calc(var(--fs-150) * -0.3);
	padding-block: calc(var(--fs-150) * 0.3);
	overflow-x: clip;
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.word-roll__row {
	width: max-content;
	color: var(--color-stone);
	font-size: var(--fs-150);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-headline);
	letter-spacing: -0.02em;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
	will-change: transform;
}

.word-roll__row + .word-roll__row {
	margin-top: var(--space-80);
}

/*
 * Typewriter (data-word-roll-style="type", or #typewriter for review): one
 * word centred, in the rows' type, trimmed to the caps so the band keeps
 * one height whatever the word (descenders hang below; nothing clips them).
 * The caret shows only while the script runs and blinks while a word holds.
 * Deep Forest A, like ink from the machine (Vlad, 2026-10-13); the rows keep Stone.
 */
.word-roll__type {
	margin: 0;
	color: var(--color-forest-a);
	font-size: var(--fs-150);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-headline);
	letter-spacing: -0.02em;
	text-align: center;
	white-space: nowrap;
	text-box: trim-both cap alphabetic;
}

.word-roll__caret {
	display: none;
	width: 0.045em;
	height: 0.72em;
	margin-left: 0.06em;
	background: currentColor;
	vertical-align: baseline;
}

.word-roll__type.is-live .word-roll__caret {
	display: inline-block;
	animation: cliff-caret 1s steps(2, jump-none) infinite;
}

.word-roll__type.is-typing .word-roll__caret {
	animation: none;
}

@keyframes cliff-caret {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.word-roll__caret {
		animation: none;
	}
}