/*
 * El Tenista — efectos nativos del navegador. Sin JavaScript, sin colores ni tipografías: no compite
 * con el Kit de Elementor ni con sus efectos de movimiento.
 *
 * 1. Transición suave entre páginas (View Transitions entre documentos). Se suma a la precarga al pasar
 *    el mouse: el cambio de página se funde en lugar de parpadear. Sin soporte (Firefox): navegación normal.
 *
 * 2. Clases para Elementor (Avanzado → Clases CSS):
 *      elt-aparece        el elemento sube y se funde al entrar en pantalla
 *      elt-aparece-hijos  cada hijo por separado (rejillas de tarjetas, listados de productos)
 *    La animación va atada al scroll (scroll-driven animations): termina en los primeros 160 px de
 *    recorrido, sin esperas ni temporizadores. Lo que ya se ve al cargar la página aparece entero.
 *    Sin soporte: todo se ve quieto, nunca invisible.
 *
 * Con «reducir movimiento» activado en el equipo del visitante, nada de esto se anima. En el editor de
 * Elementor las apariciones no corren, para que no estorben al editar.
 *
 * Se usan las propiedades `translate` y `scale` (no `transform`): así no pisan las transformaciones,
 * los efectos al pasar el mouse ni el parallax que ya aplica Elementor.
 */

/* ── 1. Entre páginas ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation: 140ms ease-in both elt-pagina-sale;
	}

	::view-transition-new(root) {
		animation: 260ms cubic-bezier(0.2, 0.7, 0.2, 1) 40ms both elt-pagina-entra;
	}
}

@keyframes elt-pagina-sale {
	to {
		opacity: 0;
	}
}

@keyframes elt-pagina-entra {
	from {
		opacity: 0;
		translate: 0 12px;
	}
}

/* ── 2. Apariciones al hacer scroll ────────────────────────────── */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		/* Los contenedores «en caja» de Elementor envuelven a sus hijos en .e-con-inner: se salta ese nivel. */
		body:not(.elementor-editor-active) .elt-aparece,
		body:not(.elementor-editor-active) .elt-aparece-hijos > :not(.e-con-inner),
		body:not(.elementor-editor-active) .elt-aparece-hijos > .e-con-inner > *,
		body:not(.elementor-editor-active) .elt-aparece-hijos :is(ul.products, .elementor-posts-container) > * {
			animation: elt-aparece linear both;
			animation-timeline: view();
			/* Termina en los primeros 160 px: aunque algo quede muy abajo, se completa antes del final de la página. */
			animation-range: entry 0px entry 160px;
		}

		/* Un listado dentro de una rejilla con la clase: anima sus productos, no el bloque entero. */
		body:not(.elementor-editor-active) .elt-aparece-hijos > :has(ul.products, .elementor-posts-container),
		body:not(.elementor-editor-active) .elt-aparece-hijos > .e-con-inner > :has(ul.products, .elementor-posts-container) {
			animation: none;
		}
	}
}

@keyframes elt-aparece {
	from {
		opacity: 0;
		translate: 0 28px;
		scale: 0.985;
	}

	to {
		opacity: 1;
		translate: none;
		scale: none;
	}
}