/*
 * Saioa Arellano — mural del hero.
 *
 * Solo la caja: posiciones, recorte y fondo. El movimiento lo escribe
 * assets/js/mural.js en línea, porque son medidas absolutas que dependen del
 * viewport y no se pueden dejar a medias entre dos unidades.
 *
 * Sin bordes redondeados y sin sombras: las fotografías se separan con aire
 * sobre el carbón, no con adornos.
 */

.zgn-mural {
	position: relative;
	background-color: var( --wp--preset--color--sai-arena );
}

/* La escena se queda fija mientras dura el recorrido del envoltorio. */
.zgn-mural__escena {
	position: sticky;
	inset-block-start: 0;
	block-size: 100svh;
	overflow: hidden;

	/* El aire entre fotografías y el fondo con el que termina el recorrido son
	 * el claro de la web: el hero entrega la página, no corta contra un negro. */
	background-color: var( --wp--preset--color--sai-arena );
}

/* Capa que se mueve entera en el tramo final. Las piezas y la portada van
 * dentro: el conjunto sale por arriba sin descolocarse. */
.zgn-mural__conjunto {
	position: absolute;
	inset: 0;
	will-change: transform;
}

.zaguan-js .zgn-mural__portada {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate( -50%, -50% );
	overflow: hidden;
	will-change: width, height;
	margin: 0;

	/* Punto de partida antes de que el JS tome la primera medida: la escena
	 * entera. Sin esto hay un fotograma con la foto a su tamaño natural. */
	inline-size: 100vw;
	block-size: 100svh;
}

/*
 * La portada levita: una oscilación lenta de unos píxeles, con `translate` y
 * no con `transform`, que es el que escribe mural.js; las dos se componen. La
 * amplitud la da --zgn-flota (0 a 1) desde el JS, que la deja a 0 mientras la
 * portada llena la pantalla para que no asome el borde.
 */
@keyframes zgn-levita {
	0%,
	100% {
		translate: 0 0;
	}

	50% {
		translate: 0 calc( var( --zgn-flota, 0 ) * -6px );
	}
}

@media ( prefers-reduced-motion: no-preference ) {
	.zaguan-js .zgn-mural__portada {
		animation: zgn-levita 6s ease-in-out infinite;
	}
}

/*
 * Velo sobre la portada, como en el kit: el lema y el logotipo van en claro y
 * la fotografía puede ser un cielo casi blanco. Va dentro de la portada y no
 * sobre la escena para que encoja con ella y no manche el mural.
 */
.zaguan-js .zgn-mural__portada::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	/* El velo solo existe mientras hay titular encima: lo apaga el propio JS
	 * con --zgn-velo, al mismo ritmo que se va el logotipo. Dejarlo puesto
	 * ensuciaría la portada cuando ya es una pieza más del mural claro. */
	opacity: var( --zgn-velo, 1 );
	background-image: linear-gradient(
		180deg,
		var( --wp--custom--chocolate-veil ) 0%,
		transparent 42%,
		var( --wp--custom--chocolate-scrim ) 100%
	);
}

/* La figura del bloque de imagen también estira: sin esto la fotografía se
 * queda con su proporción natural y la escena asoma por debajo. Se ve en
 * móvil, donde la portada es mucho más alta que ancha. */
.zgn-mural__portada figure {
	block-size: 100%;
	margin: 0;
}

.zgn-mural__portada img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.zaguan-js .zgn-mural__piezas {
	position: absolute;
	inset: 0;
}

/*
 * `opacity: 0` en el CSS y no en el JS: si no, hay un fotograma con las cinco
 * fotos apiladas en la esquina antes de la primera medida.
 */
.zaguan-js .zgn-mural__piezas > * {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 0;
	block-size: 0;
	margin: 0;
	opacity: 0;
	overflow: hidden;
	clip-path: inset( 0 100% 0 0 );
	will-change: transform, opacity, clip-path, filter;
}

/* La foto de dentro se mueve aparte del marco: paralaje interior. */
.zaguan-js .zgn-mural__piezas img {
	will-change: transform;
}

.zgn-mural__piezas figure {
	block-size: 100%;
	margin: 0;
}

/*
 * El recorte sube un poco del centro: las piezas de arriba se salen por el
 * borde superior y pasan por debajo de la cabecera, y con el encuadre centrado
 * a un retrato vertical se le quedan los ojos fuera.
 */
.zgn-mural__piezas img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: 50% 30%;
	display: block;
}

/* El logotipo y el lema van sobre la portada, cada uno en su sitio. */
.zaguan-js .zgn-mural__copy {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	block-size: 100%;
	text-align: center;
	pointer-events: none;
	will-change: transform, opacity;
}

.zaguan-js .zgn-mural__copy a {
	pointer-events: auto;
}

.zaguan-js .zgn-mural__copy.zgn-mural__pie {
	position: absolute;
	inset-inline: 0;
	inset-block-end: clamp( 36px, 6vh, 80px );
	block-size: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --wp--preset--spacing--30 );
}

.zgn-mural__lema {
	max-inline-size: 24em;
	margin-inline: auto;
}

.zgn-mural__logo img {
	inline-size: clamp( 240px, 42vw, 620px );
	block-size: auto;
	margin-inline: auto;
}

/* Dentro del mural no hay blockGap: sus capas se apilan en absoluto. */
.zgn-mural__escena > *,
.zgn-mural__copy > * {
	margin-block-start: 0;
}

/*
 * Sin JavaScript no hay recorrido: la escena deja de ser fija y el mural se lee
 * como lo que es, una portada y cinco fotografías apiladas.
 */
html:not( .zaguan-js ) .zgn-mural__escena {
	position: static;
	block-size: auto;
}

html:not( .zaguan-js ) .zgn-mural {
	height: auto !important;
}

html:not( .zaguan-js ) .zgn-mural__copy {
	background-color: var( --wp--custom--chocolate-scrim );
	padding-block: var( --wp--preset--spacing--70 );
}

/* En el lienzo del editor no hay recorrido de scroll que valga. */
.is-root-container .zgn-mural__escena {
	position: static;
	block-size: auto;
}