/*
Apertura (G3): fondo, colocación y respaldo. El movimiento lo hace `apertura.js` con GSAP.
El fondo se pinta desde CSS para cubrir en el primer fotograma, sin esperar a ninguna librería.
*/
/* Fuera del bloque de abajo el panel NO se pinta: viene en el HTML de todas las páginas, y con
   movimiento reducido, o entrando ya cubierto por el velo, no le toca salir. */
.a-apertura { display: none; }

@media (prefers-reduced-motion: no-preference) {

	html.aurora-apertura-activa { overflow: hidden; }

	html:not(.aurora-entra-cubierto) .a-apertura {
		position: fixed;
		inset: 0;
		z-index: 100001;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--papel);
		will-change: transform;
	}

	/* Respaldo: si `apertura.js` no llega a marcar `aurora-apertura-lista`, esto la retira sola.
	   Sin él, un error de JavaScript deja la web tapada y sin acceso. */
	html:not(.aurora-apertura-lista) .a-apertura {
		animation: aurora-apertura-respaldo 1ms 3000ms forwards;
	}

	/* El bloque se encoge al logotipo, que ahora manda por ALTO (Andi, 06-09: el de la cabecera).
	   Así la línea sigue midiendo lo que el nombre, como cuando el nombre ocupaba el bloque entero.
	   `calc(100% - …)` y no `100vw`: la barra de desplazamiento (trampa 8). */
	.a-apertura__bloque {
		width: max-content;
		max-width: calc(100% - 2 * var(--margen));
	}
	.a-apertura__marca { display: block; height: var(--logo-alto); width: auto; }

	/* La línea es la barra de progreso, y debajo va su número (Andi, 06-09; revoca «sin números»). */
	.a-apertura__linea {
		display: block;
		height: var(--filete);
		margin-block-start: var(--s-1);
		background: var(--tinta);
		transform: scaleX(0);
		transform-origin: 0 50%;
	}

	/* Una sola fuente para los dos: el número lo escribe la misma tween que estira la línea. */
	.a-apertura__cifra {
		display: block;
		margin-block-start: var(--s-1);
		font-family: var(--fuente-texto);
		font-size: var(--t-etiqueta);
		line-height: var(--lh-etiqueta);
		letter-spacing: 0.14em;
		text-align: center;
		font-variant-numeric: tabular-nums;
		color: var(--tinta);
	}

	/* Las letras arrancan en gris y el CSS ya las deja así: si GSAP tardara, no se ve un salto de
	   negro a gris. */
	.a-logo__letra { fill: var(--tenue); }
}
@keyframes aurora-apertura-respaldo { to { transform: translateY(-100%); visibility: hidden; } }

/* Con `prefers-reduced-motion: reduce` no existe nada de lo anterior: ni el fondo. El script
   comprueba lo mismo (`window.aurora_reducido`) y no llega a montar el panel. */