/**
 * Animación de entrada del contenido.
 *
 * Al cargar, los bloques principales de cada plantilla aparecen con un fundido
 * y una subida corta, escalonados: primero la franja de título y después el
 * contenido. Cubre las plantillas que no traían efecto propio (páginas, tienda,
 * ficha de producto, blog, archivos y buscador).
 *
 * Es CSS puro a propósito: no depende de JavaScript, así que no hay parpadeo
 * («flash» de contenido visible → oculto → visible) ni riesgo de que un bloque
 * se quede invisible si un script falla.
 *
 * Dónde NO actúa (ver inc/page-enter.php):
 *   · body.pz-no-enter    →  páginas que ya traen su propia animación
 *                            («Nosotros», con .pg-nosotros-anim) y el 404.
 *   · prefers-reduced-motion: reduce.
 *
 * body.pz-enter-builder marca las páginas montadas con el maquetador: ahí
 * entran las secciones una a una en vez del bloque de contenido entero.
 */

:root {
	--pz-enter-dur: .7s;
	--pz-enter-ease: cubic-bezier(.2, .7, .2, 1);
}

/* El fotograma final es `transform: none` y no `translateY(0)`: un transform
   distinto de `none` convierte al elemento en bloque contenedor de sus hijos
   `position: fixed` (el panel de filtros de la tienda, el lightbox de la ficha
   de producto…). Con `none` al terminar, esos paneles siguen anclados a la
   ventana. */
@keyframes pzEnterUp {
	from {
		opacity: 0;
		transform: translateY(24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Bloques que entran.
   La barra pegajosa de la tienda (.oz-shopbar) queda fuera a propósito: es un
   elemento sticky y animarlo se nota raro al recargar con la página desplazada. */
body:not(.pz-no-enter) :is(
	.pz-page-title,
	.site-main > .archive-header,
	.posts-archive-grid,
	.site-main > .navigation,
	.single-layout,
	.oz-shop,
	.pz-product__media-col,
	.pz-product__info,
	.pz-related
),
body:not(.pz-no-enter):not(.pz-enter-builder) .site-main > article > .entry-content,
body.pz-enter-builder:not(.pz-no-enter) .oz-pb-root > .oz-pb-section {
	animation: pzEnterUp var(--pz-enter-dur) var(--pz-enter-ease) both;
	animation-delay: var(--pz-enter-delay, 0s);
}

/* Escalonado: el título abre (0s), el cuerpo le sigue y los remates cierran. */
body:not(.pz-no-enter) :is(
	.posts-archive-grid,
	.single-layout,
	.oz-shop,
	.pz-product__info
),
body:not(.pz-no-enter):not(.pz-enter-builder) .site-main > article > .entry-content {
	--pz-enter-delay: .1s;
}

body:not(.pz-no-enter) :is(
	.site-main > .navigation,
	.pz-related
) {
	--pz-enter-delay: .2s;
}

/* Páginas del maquetador: las cuatro primeras secciones entran escalonadas y
   el resto a la vez, para que una portada larga no tarde en asentarse.
   Se usa `nth-of-type` y no `nth-child` porque .oz-pb-root intercala etiquetas
   <style> entre las secciones. */
body.pz-enter-builder:not(.pz-no-enter) .oz-pb-root > .oz-pb-section {
	--pz-enter-delay: .34s;
}

body.pz-enter-builder:not(.pz-no-enter) .oz-pb-root > .oz-pb-section:nth-of-type(1) {
	--pz-enter-delay: 0s;
}

body.pz-enter-builder:not(.pz-no-enter) .oz-pb-root > .oz-pb-section:nth-of-type(2) {
	--pz-enter-delay: .1s;
}

body.pz-enter-builder:not(.pz-no-enter) .oz-pb-root > .oz-pb-section:nth-of-type(3) {
	--pz-enter-delay: .19s;
}

body.pz-enter-builder:not(.pz-no-enter) .oz-pb-root > .oz-pb-section:nth-of-type(4) {
	--pz-enter-delay: .27s;
}

/* Sin movimiento: se redefinen los fotogramas en vez de repetir la lista de
   selectores. La última definición de @keyframes que aplica es la que manda,
   así que aquí la animación no mueve ni oculta nada. */
@media (prefers-reduced-motion: reduce) {
	@keyframes pzEnterUp {
		from {
			opacity: 1;
			transform: none;
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}