/**
 * EK Text Mask: shared stencil paint, background-clip glyphs, parallax.
 *
 * BEM: .ekfa-tmask-*
 */

.ekfa-tmask {
	--ekfa-tmask-font-size: clamp(3rem, 10vw, 8rem);
	--ekfa-tmask-line-height: 1.1;
	--ekfa-tmask-font-weight: 800;
	--ekfa-tmask-letter-spacing: normal;
	--ekfa-tmask-transform: uppercase;
	--ekfa-tmask-align: center;
	--ekfa-tmask-fallback: currentColor;
	--ekfa-tmask-bg-pos: center center;
	--ekfa-tmask-blend: overlay;
	--ekfa-tmask-icon-gap: 16px;
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	text-align: var(--ekfa-tmask-align);
}

/*
 * Stencil owns the shared paint definition (inline background-*).
 * Glyphs receive an aligned copy via JS so icon-font ::before and letters
 * sample one continuous image against the stencil box (fit + position + parallax).
 */
.ekfa-tmask__stencil {
	display: inline-flex;
	align-items: center;
	gap: var(--ekfa-tmask-icon-gap);
	max-width: 100%;
	background-repeat: no-repeat;
	background-position: var(--ekfa-tmask-bg-pos);
	background-color: var(--ekfa-tmask-fallback);
}

.ekfa-tmask--fit-cover .ekfa-tmask__stencil {
	background-size: cover;
}

.ekfa-tmask--fit-contain .ekfa-tmask__stencil {
	background-size: contain;
}

.ekfa-tmask--fit-auto .ekfa-tmask__stencil {
	background-size: auto;
}

/* Stencil paint is the source of truth; do not paint it as a box behind glyphs. */
.ekfa-tmask--clip .ekfa-tmask__stencil {
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.ekfa-tmask--clip .ekfa-tmask__text,
.ekfa-tmask--clip .ekfa-tmask__icon {
	color: transparent;
	-webkit-text-fill-color: transparent;
	background-color: var(--ekfa-tmask-fallback);
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
}

.ekfa-tmask--fill-image_gradient.ekfa-tmask--clip .ekfa-tmask__text,
.ekfa-tmask--fill-image_gradient.ekfa-tmask--clip .ekfa-tmask__icon {
	background-blend-mode: var(--ekfa-tmask-blend);
}

.ekfa-tmask__text,
.ekfa-tmask__icon {
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin: 0;
	color: var(--ekfa-tmask-fallback);
}

.ekfa-tmask__text {
	font-size: var(--ekfa-tmask-font-size);
	font-weight: var(--ekfa-tmask-font-weight);
	line-height: var(--ekfa-tmask-line-height);
	letter-spacing: var(--ekfa-tmask-letter-spacing);
	text-transform: var(--ekfa-tmask-transform);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.ekfa-tmask__icon {
	font-size: var(--ekfa-tmask-icon-size, var(--ekfa-tmask-font-size));
	line-height: 1;
	vertical-align: middle;
	speak: never;
}

/* Missing/broken image: never transparent-on-nothing. */
.ekfa-tmask--solid .ekfa-tmask__stencil,
.ekfa-tmask--fallback .ekfa-tmask__stencil {
	-webkit-background-clip: border-box !important;
	background-clip: border-box !important;
	background-image: none !important;
	color: var(--ekfa-tmask-fallback);
	-webkit-text-fill-color: var(--ekfa-tmask-fallback);
}

.ekfa-tmask--solid .ekfa-tmask__text,
.ekfa-tmask--fallback .ekfa-tmask__text,
.ekfa-tmask--solid .ekfa-tmask__icon,
.ekfa-tmask--fallback .ekfa-tmask__icon {
	color: var(--ekfa-tmask-fallback) !important;
	-webkit-text-fill-color: var(--ekfa-tmask-fallback) !important;
	background-image: none !important;
	background-color: transparent !important;
}

.ekfa-tmask__text::selection {
	color: #fff;
	-webkit-text-fill-color: #fff;
	background-color: #1a1a1a;
}

.ekfa-tmask__text::-moz-selection {
	color: #fff;
	-webkit-text-fill-color: #fff;
	background-color: #1a1a1a;
}

@media ( prefers-reduced-motion: reduce ) {
	.ekfa-tmask--parallax.ekfa-tmask--clip .ekfa-tmask__text,
	.ekfa-tmask--parallax.ekfa-tmask--clip .ekfa-tmask__icon {
		will-change: auto;
	}
}

.ekfa-tmask--empty,
.ekfa-tmask--warn {
	padding: 0.75em 1em;
	border: 1px dashed #c3c4c7;
	background: #f6f7f7;
	color: #1d2327;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
}