/* XFD Text Reveal */
.xfdtr {
	--xfdtr-on: #171717;
	--xfdtr-off: color-mix(in srgb, var(--xfdtr-on) 16%, transparent);
	--xfdtr-lead-on: var(--xfdtr-on);
	--xfdtr-lead-off: color-mix(in srgb, var(--xfdtr-lead-on) 16%, transparent);
	--xfdtr-hl-on: #D9782A;
	--xfdtr-hl-off: color-mix(in srgb, var(--xfdtr-hl-on) 16%, transparent);
	--xfdtr-overlay: transparent;
	--xfdtr-screen: 100vh;
	--xfdtr-top: 0px;
	--xfdtr-dist: 100vh;

	position: relative;
	width: 100%;
}

@supports (height: 100svh) {
	.xfdtr {
		--xfdtr-screen: 100svh;
	}
}

.xfdtr *,
.xfdtr *::before,
.xfdtr *::after {
	box-sizing: border-box;
}

.xfdtr .xfdtr-stage {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 48px);
}

.xfdtr .xfdtr-stage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--xfdtr-overlay);
	pointer-events: none;
}

.xfdtr .xfdtr-inner {
	width: 100%;
	max-width: 900px;
	min-width: 0;
}

.xfdtr .xfdtr-text {
	margin: 0;
	padding: 0;
	font-size: clamp(2rem, 5vw, 4.4rem);
	font-weight: 300;
	line-height: 1.13;
	letter-spacing: -0.025em;
	text-transform: none;
	color: var(--xfdtr-on);
	overflow-wrap: break-word;
}

.xfdtr .xfdtr-lead {
	font-weight: 500;
	color: var(--xfdtr-lead-on);
}

.xfdtr--lead-block .xfdtr-lead {
	display: block;
	margin-bottom: 0.18em;
}

.xfdtr mark.xfdtr-hl {
	padding: 0;
	background: none;
	color: var(--xfdtr-hl-on);
	font: inherit;
}

.xfdtr .xfdtr-wd {
	white-space: nowrap;
}

/* Pinned (scroll jack) */
.xfdtr.is-pinned {
	height: calc(var(--xfdtr-screen) - var(--xfdtr-top) + var(--xfdtr-dist));
}

.xfdtr.is-pinned .xfdtr-stage {
	position: sticky;
	top: var(--xfdtr-top);
	height: calc(var(--xfdtr-screen) - var(--xfdtr-top));
	overflow: hidden;
}

/* Words and letters while the effect runs */
.xfdtr.is-live .xfdtr-u {
	color: color-mix(in srgb, var(--xfdtr-on) calc(var(--o, 0) * 100%), var(--xfdtr-off));
}

.xfdtr.is-live .xfdtr-lead .xfdtr-u {
	color: color-mix(in srgb, var(--xfdtr-lead-on) calc(var(--o, 0) * 100%), var(--xfdtr-lead-off));
}

.xfdtr.is-live .xfdtr-hl .xfdtr-u {
	color: color-mix(in srgb, var(--xfdtr-hl-on) calc(var(--o, 0) * 100%), var(--xfdtr-hl-off));
}

.xfdtr--fx-rise.is-live .xfdtr-u,
.xfdtr--fx-blur.is-live .xfdtr-u {
	display: inline-block;
}

.xfdtr--fx-rise.is-live .xfdtr-u {
	transform: translateY(calc((1 - var(--o, 0)) * 0.4em));
}

.xfdtr--fx-blur.is-live .xfdtr-u {
	filter: blur(calc((1 - var(--o, 0)) * 8px));
}

/* Older browsers without color-mix(): fade with opacity instead */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.xfdtr.is-live .xfdtr-u,
	.xfdtr.is-live .xfdtr-lead .xfdtr-u,
	.xfdtr.is-live .xfdtr-hl .xfdtr-u {
		color: inherit;
		opacity: calc(0.16 + 0.84 * var(--o, 0));
	}
}