/**
 * Enfoque In - Estilos para la paginacion AJAX del widget Elementor
 * "Portfolio Projects" (ohio_recent_projects). Aislado en su propio
 * archivo para poder desactivarlo simplemente dejando de encolarlo (ver
 * functions.php), sin afectar a nada mas -incluida la implementacion
 * independiente para /proyectos/, si en el futuro se reintrodujera-.
 *
 * Incluye:
 *   1) El indicador de carga sutil ya existente (opacidad ligera +
 *      spinner), activo solo mientras se espera la respuesta de red.
 *   2) La transicion de salida/entrada (fade + desplazamiento vertical
 *      corto) del bloque completo (filtro + grid + paginacion) al
 *      cambiar de pagina. Clases con prefijo propio `ei-epp-ajax-` para
 *      no chocar con clases genericas del tema o de otros plugins.
 *      Solo afecta a opacity/transform (nunca display:none, que no se
 *      puede animar) y todo el control de tiempos vive aqui en CSS; el
 *      JS unicamente anade/quita estas clases.
 */

.elementor-widget[data-widget_type^="ohio_recent_projects"] [data-ohio-portfolio-grid].ei-epp-ajax-loading {
	position: relative;
	opacity: 0.35;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.elementor-widget[data-widget_type^="ohio_recent_projects"] [data-ohio-portfolio-grid]:not(.ei-epp-ajax-loading) {
	opacity: 1;
}

.elementor-widget[data-widget_type^="ohio_recent_projects"] [data-ohio-portfolio-grid].ei-epp-ajax-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid rgba(0, 0, 0, 0.15);
	border-top-color: rgba(0, 0, 0, 0.55);
	border-radius: 50%;
	animation: ei-epp-ajax-spin 0.7s linear infinite;
	pointer-events: none;
	z-index: 2;
}

@keyframes ei-epp-ajax-spin {
	from {
		transform: rotate( 0deg );
	}
	to {
		transform: rotate( 360deg );
	}
}

/* --- Transicion de salida / entrada al cambiar de pagina ------------- */

/* Salida: el bloque actual se desvanece y sube ligeramente (~200ms,
   ease-out). Rapida y discreta, sin rebote ni zoom. */
.elementor-widget[data-widget_type^="ohio_recent_projects"] [data-ohio-portfolio-grid].ei-epp-ajax-leaving {
	transition: opacity 200ms ease-out, transform 200ms ease-out;
	opacity: 0;
	transform: translateY( -8px );
	pointer-events: none;
	will-change: opacity, transform;
}

/* Estado inicial de entrada, aplicado de forma instantanea (sin
   transicion) justo despues de insertar el contenido nuevo, para poder
   animar despues desde un punto de partida consistente. */
.elementor-widget[data-widget_type^="ohio_recent_projects"] [data-ohio-portfolio-grid].ei-epp-ajax-enter-from {
	transition: none !important;
	opacity: 0;
	transform: translateY( 8px );
	pointer-events: none;
}

/* Entrada: el bloque nuevo aparece y termina de asentarse (~320ms,
   ease-out), un poco mas lenta/suave que la salida. */
.elementor-widget[data-widget_type^="ohio_recent_projects"] [data-ohio-portfolio-grid].ei-epp-ajax-entering {
	transition: opacity 320ms cubic-bezier( 0.22, 0.61, 0.36, 1 ), transform 320ms cubic-bezier( 0.22, 0.61, 0.36, 1 );
	opacity: 1;
	transform: translateY( 0 );
	pointer-events: none;
	will-change: opacity, transform;
}

.ei-epp-ajax-live {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.elementor-widget[data-widget_type^="ohio_recent_projects"] [data-ohio-portfolio-grid].ei-epp-ajax-loading::after {
		animation: none;
	}

	.elementor-widget[data-widget_type^="ohio_recent_projects"] [data-ohio-portfolio-grid].ei-epp-ajax-leaving,
	.elementor-widget[data-widget_type^="ohio_recent_projects"] [data-ohio-portfolio-grid].ei-epp-ajax-enter-from,
	.elementor-widget[data-widget_type^="ohio_recent_projects"] [data-ohio-portfolio-grid].ei-epp-ajax-entering {
		transition-duration: 0.01ms !important;
		transform: none !important;
	}
}