/**
 * Almagroup — animaciones del front-end.
 * Archivo aparte de theme.css porque ese también se carga en el editor.
 * Todo queda desactivado con «reducir movimiento» del sistema.
 */

@media (prefers-reduced-motion: no-preference) {

	/* ------------------------------------------------------------------
	 * Transición entre páginas (View Transitions API).
	 * Chrome, Edge y Safari 18.2+; los demás navegan como siempre.
	 * ------------------------------------------------------------------ */
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: .3s;
		animation-timing-function: var(--ag-ease);
	}

	/* ------------------------------------------------------------------
	 * Entrada del hero: antetítulo, título, texto y botones en cascada.
	 * `ag-js` lo pone un script en <head> (inc/setup.php).
	 * ------------------------------------------------------------------ */
	.ag-js :is(.ag-hero, .ag-hero-form) .wp-block-cover__inner-container > * {
		animation: ag-entrar .9s var(--ag-ease) both;
	}

	.ag-js :is(.ag-hero, .ag-hero-form) .wp-block-cover__inner-container > :nth-child(2) { animation-delay: .1s; }
	.ag-js :is(.ag-hero, .ag-hero-form) .wp-block-cover__inner-container > :nth-child(3) { animation-delay: .2s; }
	.ag-js :is(.ag-hero, .ag-hero-form) .wp-block-cover__inner-container > :nth-child(n+4) { animation-delay: .3s; }

	@keyframes ag-entrar {
		from {
			opacity: 0;
			transform: translateY(24px);
		}
	}

	/* ------------------------------------------------------------------
	 * Aparición al hacer scroll (assets/js/theme.js).
	 * El JS solo marca lo que está bajo el pliegue: sin JS, todo se ve.
	 * ------------------------------------------------------------------ */
	.ag-revelar {
		opacity: 0;
		transform: translateY(24px);
	}

	.ag-revelar.is-visible {
		opacity: 1;
		transform: none;
		transition: opacity .7s var(--ag-ease), transform .7s var(--ag-ease);
	}

	/* ------------------------------------------------------------------
	 * Cabecera fija al hacer scroll: fondo negro, más compacta.
	 * Sin transform permanente: el menú móvil (position: fixed) se rompe
	 * dentro de un ancestro transformado; la animación termina en `none`.
	 * ------------------------------------------------------------------ */
	.ag-header.is-fija {
		animation: ag-bajar .4s var(--ag-ease);
	}

	@keyframes ag-bajar {
		from {
			transform: translateY(-100%);
		}
	}
}

/* La cabecera fija funciona igual con movimiento reducido (sin la animación). */
.ag-header.is-fija {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	background: var(--wp--preset--color--negro);
	padding-block: calc(12px + 6 * var(--ag-p));
	box-shadow: 0 6px 24px rgb(0 0 0 / .18);
}

.admin-bar .ag-header.is-fija {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.ag-header .ag-header__logo img {
	transition: width .3s var(--ag-ease);
}

.ag-header.is-fija .ag-header__logo img {
	width: clamp(110px, calc(14vw - 40px), 160px) !important;
}

/* En celular la barra de administración no es fija: se pega arriba. */
@media (max-width: 600px) {
	.admin-bar .ag-header.is-fija {
		top: 0;
	}
}