/**
 * Slider-Style Heading widget
 * Back text: Qode-style masked left-to-right reveal (default) or directional slide, one letter at a time.
 * Front text: pop-in. Animations run when .esh-in-view is added (scroll into view).
 */

.esh-wrap {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	line-height: 1.15;
	/* Center the heading block in the column; width follows the wider of back/front. */
	text-align: center;
}

.esh-inner {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}

.esh-back,
.esh-front {
	display: block;
	margin: 0;
	padding: 0;
	font: inherit;
	line-height: inherit;
}

/* Back layer: layout only — always centred within the inner block (matches front width) */
.esh-back {
	position: relative;
	z-index: 0;
	font-size: 1.5em;
	opacity: 1;
	transform: none;
	text-align: center;
}

/* Slide-from direction (slide mode only; inherited into keyframes) */
.esh-back[data-esh-dir="left"]   { --esh-from-x: -100%; --esh-from-y: 0; }
.esh-back[data-esh-dir="right"]  { --esh-from-x: 100%;  --esh-from-y: 0; }
.esh-back[data-esh-dir="top"]    { --esh-from-x: 0; --esh-from-y: -100%; }
.esh-back[data-esh-dir="bottom"] { --esh-from-x: 0; --esh-from-y: 100%; }

/* —— Slide mode: letter enters from off-screen —— */
.esh-back[data-esh-motion="slide"] .esh-back-char,
.esh-back:not([data-esh-motion]) .esh-back-char {
	display: inline-block;
	opacity: 0;
	transform: translate(var(--esh-from-x, -100%), var(--esh-from-y, 0));
}

.esh-wrap.esh-in-view .esh-back[data-esh-motion="slide"] .esh-back-char,
.esh-wrap.esh-in-view .esh-back:not([data-esh-motion]) .esh-back-char {
	animation-name: esh-char-slide-in;
	animation-duration: var(--esh-letter-dur, 0.22s);
	animation-delay: calc(var(--esh-letter-step, 0.22s) * var(--esh-i, 0));
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
}

@keyframes esh-char-slide-in {
	from {
		opacity: 0;
		transform: translate(var(--esh-from-x, -100%), var(--esh-from-y, 0));
	}
	to {
		opacity: 1;
		transform: translate(0, 0);
	}
}

/* —— Mask mode (Qode, Kamperen-style): clip + slide in from the left, stagger LTR —— */
.esh-back[data-esh-motion="mask_up"] .esh-char-clip {
	display: inline-block;
	overflow: hidden;
	vertical-align: baseline;
	line-height: inherit;
}

.esh-back[data-esh-motion="mask_up"] .esh-char-inner {
	display: inline-block;
	transform: translateX(-115%);
	will-change: transform;
}

.esh-wrap.esh-in-view .esh-back[data-esh-motion="mask_up"] .esh-char-inner {
	animation-name: esh-char-mask-ltr;
	animation-duration: var(--esh-letter-dur, 0.22s);
	animation-delay: calc(var(--esh-letter-step, 0.22s) * var(--esh-i, 0));
	animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	animation-fill-mode: forwards;
}

@keyframes esh-char-mask-ltr {
	from {
		transform: translateX(-115%);
	}
	to {
		transform: translateX(0);
	}
}

/* Front layer: initial state (hidden) until in view */
.esh-front {
	position: relative;
	z-index: 1;
	opacity: 0;
	transform: scale(0.9);
}

.esh-wrap.esh-in-view .esh-front {
	animation: esh-pop-in var(--esh-dur, 0.65s) cubic-bezier(0.34, 1.56, 0.64, 1) var(--esh-pop-delay, 0.25s) forwards;
}

@keyframes esh-pop-in {
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.esh-wrap.esh-in-view .esh-front {
		animation: none;
	}
	.esh-wrap.esh-in-view .esh-back[data-esh-motion="slide"] .esh-back-char,
	.esh-wrap.esh-in-view .esh-back:not([data-esh-motion]) .esh-back-char {
		animation: none;
	}
	.esh-wrap.esh-in-view .esh-back[data-esh-motion="mask_up"] .esh-char-inner {
		animation: none;
	}
	.esh-back[data-esh-motion="slide"] .esh-back-char,
	.esh-back:not([data-esh-motion]) .esh-back-char {
		opacity: 1;
		transform: translate(0, 0);
	}
	.esh-back[data-esh-motion="mask_up"] .esh-char-inner {
		transform: translateX(0);
	}
	.esh-front {
		opacity: 1;
		transform: scale(1);
	}
}

/* In Elementor editor, always show headings (no scroll trigger needed) */
body.elementor-editor-active .esh-back[data-esh-motion="slide"] .esh-back-char,
body.elementor-editor-active .esh-back:not([data-esh-motion]) .esh-back-char {
	opacity: 1;
	transform: translate(0, 0);
	animation: none;
}

body.elementor-editor-active .esh-back[data-esh-motion="mask_up"] .esh-char-inner {
	transform: translateX(0);
	animation: none;
}

body.elementor-editor-active .esh-front {
	opacity: 1;
	transform: scale(1);
}