/**
 * Fogo Motion Effects.
 *
 * Casi todo el movimiento se hace desde JS (Web Animations API y propiedades
 * individuales translate/rotate/scale). Este archivo solo contiene:
 * - el estado oculto previo a la animación de entrada (con failsafe),
 * - las piezas de Split Text / Typewriter (sin alterar tipografía ni layout),
 * - la cortina del Reveal y el cursor del Typewriter.
 */

/* ---------- Estado previo a la animación de entrada ---------- */

/* Solo en la página publicada: en el editor el contenido siempre se ve. */
body:not(.elementor-editor-active) .fogo-fx-pending {
	opacity: 0;
	/* Failsafe: si por algún motivo el JS no arranca, el contenido aparece. */
	animation: fogo-fx-failsafe 0.01s 3s forwards;
}

@keyframes fogo-fx-failsafe {
	to {
		opacity: 1;
	}
}

/* ---------- Split Text ---------- */

/* Palabra: inline-block para poder transformarla, sin cambiar métricas del texto. */
.fogo-sw {
	display: inline-block;
	white-space: nowrap;
}

/* Máscara con clip-path (no con overflow): no altera la línea base del texto.
 * Los márgenes negativos del inset dejan sitio a acentos y descendentes. */
.fogo-sw--mask {
	-webkit-clip-path: inset(-0.35em -0.08em -0.3em -0.08em);
	clip-path: inset(-0.35em -0.08em -0.3em -0.08em);
}

.fogo-sp {
	display: inline-block;
	will-change: transform, opacity;
}

/* ---------- Typewriter ---------- */

/* Todas las letras ocupan su sitio desde el principio (invisibles):
 * el texto no cambia de tamaño ni de saltos de línea mientras se escribe. */
.fogo-tc {
	opacity: 0;
}

.fogo-tc.is-on {
	opacity: 1;
}

/* Cursor de ancho neto cero: se mueve con el texto sin desplazarlo. */
.fogo-caret {
	display: inline-block;
	width: 0.07em;
	min-width: 2px;
	height: 1em;
	margin-right: -0.07em;
	background: currentColor;
	vertical-align: -0.12em;
	pointer-events: none;
	animation: fogo-caret-blink 1s steps(1, end) infinite;
}

.fogo-caret.is-typing {
	animation: none;
	opacity: 1;
}

@keyframes fogo-caret-blink {
	0%,
	50% {
		opacity: 1;
	}

	50.01%,
	100% {
		opacity: 0;
	}
}

/* ---------- Reveal (cortina de color) ---------- */

.fogo-fx-curtain {
	position: absolute;
	inset: 0;
	z-index: 50;
	pointer-events: none;
	will-change: transform;
}

.fogo-fx-curtain-hide > :not(.fogo-fx-curtain) {
	opacity: 0;
}

/* ---------- Sticky ---------- */

.fogo-sticky-active {
	transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

/* ---------- Accesibilidad ---------- */

@media (prefers-reduced-motion: reduce) {
	.fogo-fx-pending {
		opacity: 1 !important;
		animation: none !important;
	}

	.fogo-tc {
		opacity: 1;
	}

	.fogo-caret {
		animation: none;
	}
}