/**
 * Airea · transición entre páginas y entrada del logo (1.2.5).
 *
 * Al cambiar de página (lo hace el propio navegador con View Transitions):
 * - la cabecera se queda quieta;
 * - la página de antes se apaga un poco;
 * - la nueva entra en barrido de izquierda a derecha, con una tira de píxeles
 *   verdes bajo la cabecera que avanza con ella.
 * No retrasa la navegación. Donde el navegador no lo soporta, se cambia de
 * página sin efecto. Con «menos movimiento» no hay ningún efecto.
 */

@view-transition {
	navigation: auto;
}

.wp-site-blocks > header {
	view-transition-name: airea-cabecera;
}

#wpadminbar {
	view-transition-name: airea-barra-admin;
}

::view-transition-old(root) {
	animation: airea-vt-sale 0.32s ease both;
}

::view-transition-new(root) {
	animation: airea-vt-barrido 0.6s cubic-bezier(0.65, 0, 0.35, 1) both;
}

@keyframes airea-vt-sale {
	to { opacity: 0.85; }
}

@keyframes airea-vt-barrido {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

/* Tira de píxeles bajo la cabecera que avanza con el barrido (la pone el script del <head>) */
html.airea-llega .wp-site-blocks > header::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 6px;
	pointer-events: none;
	background: repeating-linear-gradient(90deg, #12a68e 0 6px, transparent 6px 10px);
	animation: airea-tira 0.9s steps(30, end) both;
}

@keyframes airea-tira {
	0% { clip-path: inset(0 100% 0 0); opacity: 1; }
	65% { clip-path: inset(0 0 0 0); opacity: 1; }
	100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

/* ---------- Logo: entra suave la primera vez de la visita ----------
   Se descubre de izquierda a derecha con un borde difuminado, como si lo
   trajera el aire, sin saltos ni letras cortadas. */

html.airea-primera .wp-site-blocks > header .airea-b-logo img {
	-webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
	mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
	-webkit-mask-size: 260% 100%;
	mask-size: 260% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	animation: airea-logo-entra 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
}

@keyframes airea-logo-entra {
	from {
		-webkit-mask-position: 100% 0;
		mask-position: 100% 0;
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	to {
		-webkit-mask-position: 0 0;
		mask-position: 0 0;
		opacity: 1;
	}
}

/* ---------- Menos movimiento ---------- */

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

	html.airea-llega .wp-site-blocks > header::after {
		display: none;
	}

	html.airea-primera .wp-site-blocks > header .airea-b-logo img {
		animation: none;
	}
}