/**
 * HILADA — transiciones entre páginas.
 *
 * Usa la View Transitions API para navegación multipágina. Es navegación
 * real del navegador: no hay AJAX, no se reemplaza el DOM y por tanto no se
 * rompe ningún script de WooCommerce. El carrito, las variaciones y el
 * checkout siguen funcionando exactamente igual que sin transiciones.
 *
 * Donde el navegador no lo soporta (hoy Firefox), la navegación es la
 * normal e instantánea. No hay penalización ni error: simplemente no hay
 * animación.
 */

@view-transition {
	navigation: auto;
}

/*
 * El contenido entra y sale con un desplazamiento corto, dentro del rango
 * de 200–500 ms que fija el manual de marca. Nada de barridos largos.
 */
::view-transition-old(root) {
	animation: hilada-salida 220ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
	animation: hilada-entrada 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hilada-salida {
	to {
		opacity: 0;
		transform: translateY(-8px);
	}
}

@keyframes hilada-entrada {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
}

/*
 * El encabezado y el pie no participan: se quedan fijos mientras el
 * contenido cambia debajo. Es lo que hace que la navegación se sienta de
 * aplicación y no de recarga.
 */
.site-header {
	view-transition-name: hilada-header;
}

.site-footer {
	view-transition-name: hilada-footer;
}

::view-transition-old(hilada-header),
::view-transition-new(hilada-header),
::view-transition-old(hilada-footer),
::view-transition-new(hilada-footer) {
	animation: none;
	mix-blend-mode: normal;
}

/*
 * La imagen del producto viaja de la tarjeta del listado a la ficha. El
 * nombre lo asigna el JS solo a la tarjeta pulsada: dos elementos con el
 * mismo view-transition-name en la misma página anulan la transición.
 */
.product-card__media.va-de-viaje img:first-child,
.woocommerce-product-gallery img.wp-post-image {
	view-transition-name: hilada-pieza;
}

::view-transition-group(hilada-pieza) {
	animation-duration: 420ms;
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}