/*
 * Hero de collage con recorrido de scroll.
 *
 * El marcado NO lo pinta este módulo: lo escribe el tema con bloques nativos
 * (un core/cover con la portada y un grupo de imágenes al lado). Aquí solo está
 * lo que el movimiento necesita y el editor no puede expresar.
 *
 * PUNTOS DE CONTACTO, fijos y sin prefijo de proyecto:
 *
 *   .zgn-hero-collage           envoltorio que da el recorrido (altura en vh)
 *   .zgn-hero-collage__escena   lo que queda pegado mientras dura el recorrido
 *   .zgn-hero-collage__portada  la imagen que arranca a pantalla completa
 *   .zgn-hero-collage__copy     titular y lema, se desvanecen al avanzar
 *   .zgn-hero-collage__piezas   contenedor de las fotos que entran desde fuera
 *
 * DEGRADACIÓN. Todo lo que oculta o posiciona cuelga de .zaguan-js, la clase
 * que solo existe cuando hay JavaScript y no hay prefers-reduced-motion (ver
 * animations.php). Sin JavaScript el hero es un cover normal y las piezas del
 * collage se leen como una rejilla de fotos debajo: nada oculto, nada roto.
 */

/* Sin JS: rejilla normal. Es el estado por defecto, no una excepción. */
.zgn-hero-collage__piezas {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 160px, 1fr ) );
	gap: 1rem;
}

.zaguan-js .zgn-hero-collage {
	position: relative;
}

.zaguan-js .zgn-hero-collage__escena {
	position: sticky;
	top: 0;
	block-size: 100svh;
	overflow: hidden;
}

/*
 * La portada arranca ocupando el viewport y el JS la encoge. El tamaño va en
 * línea desde el JS, así que aquí solo se fija el modelo de caja: si el CSS
 * también fijara medidas, el primer frame daría un salto.
 */
.zaguan-js .zgn-hero-collage__portada {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	overflow: hidden;
}

.zaguan-js .zgn-hero-collage__portada img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/* Ken burns: solo mientras la portada llena el viewport. */
.zaguan-js .zgn-hero-collage__portada img {
	animation: zgn-hero-kenburns 2.4s cubic-bezier( 0.22, 1, 0.36, 1 ) both;
}

@keyframes zgn-hero-kenburns {
	from { scale: 1.22; }
	to   { scale: 1; }
}

.zaguan-js .zgn-hero-collage__copy {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	block-size: 100%;
	text-align: center;
	pointer-events: none;
}

.zaguan-js .zgn-hero-collage__copy a,
.zaguan-js .zgn-hero-collage__copy button {
	pointer-events: auto;
}

.zaguan-js .zgn-hero-collage__piezas {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
}

/*
 * Cada pieza se posiciona y se mueve desde el JS. `opacity: 0` aquí y no en el
 * JS para que no haya un frame con las cinco fotos apiladas en la esquina
 * superior izquierda antes de la primera medida.
 */
.zaguan-js .zgn-hero-collage__piezas > * {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 0;
	block-size: 0;
	margin: 0;
	opacity: 0;
	overflow: hidden;
	will-change: transform, opacity;
}

.zaguan-js .zgn-hero-collage__piezas img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/*
 * El aviso de scroll desaparece con el propio recorrido, así que no necesita
 * su propia animación: lo arrastra el fundido de .__copy.
 */