/**
 * @layer components — reveals de entrada al hacer scroll (fila #3 del
 * inventario de movimiento): opacity + translateY vía animation-timeline:
 * view(), aplicado con :where() (especificidad cero) a los bloques
 * editoriales repetidos del sitio, para no tener que tocar cada plantilla.
 *
 * No incluye el hero (siempre visible en el primer pantallazo: un timeline
 * de scroll no "revela" nada que ya esté a la vista al cargar) — el hero
 * tiene su propio stagger de entrada por bloque en pages/front-page.css.
 */

@keyframes santiago-revelar {
	from {
		opacity: 0;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@layer components {
	:where(
		.section-header,
		.areas__grid,
		.profesionales__card,
		.publicaciones-home__card,
		.marcas-grid__item,
		.cta-contacto,
		.credenciales__item,
		.filosofia__bloque
	) {
		animation: santiago-revelar var(--dur-3) var(--ease-out) both;
		animation-timeline: view();
		animation-range: entry 0% cover 32%;
	}

	@supports not (animation-timeline: view()) {
		:where(
			.section-header,
			.areas__grid,
			.profesionales__card,
			.publicaciones-home__card,
			.marcas-grid__item,
			.cta-contacto,
			.credenciales__item,
			.filosofia__bloque
		) {
			animation: none;
			opacity: 1;
			transform: none;
		}
	}
}