/**
 * @layer components — elemento firma: línea de margen de 1px, reservada a
 * tres usos (eyebrow del hero, bloques de filosofía, citas). Grosor y offset
 * fijos siempre, para que se lea como convención tipográfica y no como
 * decoración puntual (ver plan, sección "Elemento firma").
 *
 * El trazado animado (fila #5 del inventario de movimiento): scaleY(0→1)
 * con transform-origin: top, disparado por animation-timeline: view()
 * acotado a la propia sección — el gesto de "se traza como en una hoja".
 *
 * `left` usa la variable --firma-line-inset (default 0) en vez de un `left:
 * 0` fijo: `left` de un elemento absoluto se mide desde el borde del propio
 * .firma, no desde donde termina su padding-left. Si algo pisa el
 * padding-left de .firma (como el hero, que necesita alinear el texto al
 * ancho del breakpoint en vez del offset fijo) hay que correr la línea la
 * misma distancia seteando --firma-line-inset en ese contexto — ver
 * pages/front-page.css.
 */

@keyframes santiago-firma-trazo {
	from {
		transform: scaleY(0);
	}
	to {
		transform: scaleY(1);
	}
}

@layer components {
	.firma {
		position: relative;
		padding-left: var(--firma-offset);
	}

	.firma::before {
		content: '';
		position: absolute;
		left: var(--firma-line-inset, 0);
		top: 0.2em;
		bottom: 0.2em;
		width: var(--firma-width);
		background: var(--firma-color);
		transform-origin: top;
		animation: santiago-firma-trazo var(--dur-4) var(--ease-out) both;
		animation-timeline: view();
		animation-range: entry 0% cover 30%;
	}

	@supports not (animation-timeline: view()) {
		.firma::before {
			animation: none;
			transform: scaleY(1);
		}
	}
}