/* ==================================================================
   Divi 5 Child — Motion Layer / CSS
   ------------------------------------------------------------------
   Regla de oro: los estados iniciales solo se aplican cuando el JS
   está vivo (html.js-fx). Si el JS falla, no hay contenido invisible.
   ================================================================== */

/* --- Estados iniciales (solo con JS activo) --- */

html.js-fx .fx-reveal,
html.js-fx .fx-stagger > * {
	opacity: 0;
	will-change: transform, opacity;
}

/* El contenedor se oculta hasta que el JS termina de dividir las
   líneas. Si no, se ve el texto entero un instante y después salta. */
html.js-fx .fx-text {
	opacity: 0;
}

html.js-fx .fx-text .fx-line {
	opacity: 0;
	/* Promoción a capa propia: sin esto el navegador repinta el texto
	   en cada fotograma y el movimiento se siente a tirones.
	   OJO: nada de transform aquí. GSAP escribe el suyo con force3D
	   y si el CSS pone otro, los dos se suman y la línea termina
	   fuera de la máscara. */
	will-change: transform, opacity;
	backface-visibility: hidden;
}

/* --- Reveal de texto con máscara ---------------------------------
   Esta es la firma del sistema: las líneas suben desde detrás de un
   borde invisible en vez de solo hacer fade. Se lee mucho más caro
   que el "fade up" que trae cualquier builder por defecto.
   ---------------------------------------------------------------- */

.fx-text .fx-line-wrap {
	display: block;
	overflow: hidden;
	/* Aire extra para que descendentes (g, p, y) no se corten */
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}

.fx-text .fx-line {
	display: block;
	transform-origin: left bottom;
}

.fx-text .fx-word {
	display: inline-block;
	white-space: pre;
}

/* --- Parallax ---------------------------------------------------- */

.fx-parallax {
	will-change: transform;
}

/* El contenedor de una imagen con parallax necesita recortar el sobrante */
.fx-parallax-frame {
	overflow: hidden;
}

/* --- Magnético (botones) ----------------------------------------- */

.fx-magnetic {
	display: inline-block;
	will-change: transform;
}

/* --- Contadores -------------------------------------------------- */

.fx-count {
	font-variant-numeric: tabular-nums;
	/* Evita que el ancho salte mientras cuenta */
}

/* --- Lenis ------------------------------------------------------- */

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* --- Accesibilidad ----------------------------------------------
   Si el sistema pide menos movimiento, el JS ya no arranca. Esto es
   el cinturón además del tirante: nada se mueve, nada queda oculto.
   ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html.js-fx .fx-reveal,
	html.js-fx .fx-stagger > *,
	html.js-fx .fx-text,
	html.js-fx .fx-text .fx-line {
		opacity: 1 !important;
		transform: none !important;
	}

	.fx-parallax,
	.fx-magnetic {
		transform: none !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Foco visible ------------------------------------------------
   Divi a veces lo mata. Lo devolvemos, no es negociable.
   ---------------------------------------------------------------- */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}