/* ==========================================================
 * Floratek – Mask Reveal
 * Author: Beekom Studio (https://beekom.fr/)
 * Version: 1.0.2
 * ========================================================== */

.ft-mask-reveal {
	--ft-mr-icon-size: 1em;
	--ft-mr-icon-offset-y: -0.05em;
}

.ft-mask-reveal__title {
	margin: 0;
	line-height: 1.05;
}

.ft-mask-reveal__link {
	color: inherit;
	text-decoration: none;
}

/* The mask: hides anything translated below it.
 * `clip` is preferred (better paint perf, no scrollbars on edge cases).
 * `hidden` as the universal fallback. */
.ft-mr-mask {
	display: block;
	overflow: hidden;
}

@supports ( overflow: clip ) {
	.ft-mr-mask {
		overflow: clip;
	}
}

.ft-mr-line {
	display: block;
}

.ft-mr-word,
.ft-mr-icon {
	display: inline-block;
	vertical-align: baseline;
	white-space: nowrap;
}

.ft-mr-icon {
	width: var(--ft-mr-icon-size);
	height: var(--ft-mr-icon-size);
	line-height: 0;
	vertical-align: middle;
	/* Fine-tune vertical alignment via positioning, NOT transform.
	 * Using transform here would conflict with GSAP's inline transforms
	 * during/after the animation. */
	position: relative;
	top: var(--ft-mr-icon-offset-y);
}

.ft-mr-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Defensive: Elementor sometimes wraps SVGs in an extra span.
 * Make sure inner wrappers don't break the icon sizing. */
.ft-mr-icon > * {
	display: block;
	width: 100%;
	height: 100%;
}

.ft-mr-icon i {
	font-size: var(--ft-mr-icon-size);
	line-height: 1;
}

/* Initial state — hide content until JS sets the GSAP initial state.
 * Without this, words flash visible then snap to the start position. */
.ft-mask-reveal:not(.ft-mr-ready) .ft-mr-word,
.ft-mask-reveal:not(.ft-mr-ready) .ft-mr-icon {
	opacity: 0;
}

/* Failsafe: if JS never runs (slow network, error, JS disabled),
 * reveal the content after 2s so the title is never permanently hidden. */
.ft-mask-reveal:not(.ft-mr-ready) .ft-mr-word,
.ft-mask-reveal:not(.ft-mr-ready) .ft-mr-icon {
	animation: ft-mr-failsafe 0.01s linear 2s forwards;
}

@keyframes ft-mr-failsafe {
	to { opacity: 1; }
}

/* Reduced motion: don't hide, don't animate */
@media ( prefers-reduced-motion: reduce ) {
	.ft-mask-reveal:not(.ft-mr-ready) .ft-mr-word,
	.ft-mask-reveal:not(.ft-mr-ready) .ft-mr-icon {
		opacity: 1;
		animation: none;
	}
}