/* ─── Ensamblado de la llanta — thewheellab.es ────────────────────────────
   Banda propia DENTRO de [twl_statement_proof], entre la cita y los counters.
   La llanta se FIJA A PANTALLA mientras dura el recorrido: el scroll la monta
   pieza a pieza y una frase corta va nombrando lo que se ve. Es el patrón de
   las páginas de producto de Apple, y es lo que hace que enganche: sin fijarla,
   la llanta cruza y se acabó.

   Por qué la banda va en claro: la llanta es de carbono negro y sobre el
   #08080a de la sección no se ve. Se midió con brillo ×2,6 y ×4,5, en negativo
   y tintada de naranja; ninguna variante leía.

   El pin NO se hace aquí con position:sticky. En esta home el body tiene
   overflow-y:auto, o sea que es contenedor de scroll, y el sticky se va con la
   página (comprobado dos veces en producción). Lo hace el JS con
   position:fixed, que ahí sí funciona.

   Los frames son WebP CON ALFA (el original venía con fondo blanco y se recortó
   con colorkey al generarlos). Si se regeneran: tools/build-frames.sh de
   ~/kimitest, con scale=1088 — que es el ancho útil real del vídeo tras el crop.
   ------------------------------------------------------------------------ */

.twl-statement-proof-block {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
}

.twl-statement-proof-block > .wl-a3-statement { grid-row: 1; }
.twl-wheel-bg                                 { grid-row: 2; }
.twl-statement-proof-block > .wl-a3-proof     { grid-row: 3; }

/* La banda: alta a propósito. Su altura MENOS una pantalla es el recorrido que
   dura la animación con la llanta fija. 260vh ≈ 1,6 pantallas de scrubbing. */
.twl-wheel-bg {
	/* Alto del menú fijo (.top_panel_navi), medido en producción. El escenario
	   ocupa la pantalla entera, así que sin reservarlo el rótulo de arriba queda
	   por debajo del menú. */
	--twl-wheel-nav: 114px;
	position: relative;
	height: 260vh;
	background: #f5f6f1;
	color: #151517;
}

/* El escenario. El JS le cambia position entre absolute y fixed según dónde
   esté la banda; aquí solo se define cómo se ve. */
.twl-wheel-bg__stage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto 1fr;
	align-items: center;
	justify-items: center;
	column-gap: clamp(18px, 3vw, 60px);
	row-gap: clamp(12px, 2.4vh, 30px);
	padding: calc(var(--twl-wheel-nav) + clamp(12px, 2vh, 28px)) clamp(16px, 4vw, 48px) clamp(24px, 5vh, 64px);
	box-sizing: border-box;
	overflow: hidden;
}

.twl-wheel-bg__eyebrow {
	grid-column: 1 / -1;
	grid-row: 1;
	margin: 0;
	font-family: 'JetBrains Mono', monospace;
	font-size: clamp(.62rem, 1vw, .74rem);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #5d6066;          /* 5,03 sobre #f5f6f1 */
	display: inline-flex;
	align-items: center;
	gap: .7rem;
}
.twl-wheel-bg__eyebrow::before,
.twl-wheel-bg__eyebrow::after {
	content: "";
	width: 28px;
	height: 1px;
	background: #ff6a00;
}

/* La llanta manda: se dimensiona por ALTO, que es lo que la hace protagonista.
   El ancho sale solo de la proporción de los frames. */
.twl-wheel-bg__canvas {
	height: min(62vh, 640px);
	width: auto;
	max-width: 92vw;
	aspect-ratio: 1088 / 720;
	display: block;
	align-self: center;
	grid-column: 2;
	grid-row: 2;
}
.twl-wheel-bg__cifras--izq { grid-column: 1; grid-row: 2; }
.twl-wheel-bg__cifras--der { grid-column: 3; grid-row: 2; }

/* Los counters, dos por lado. Van entrando de uno en uno mientras la llanta se
   monta en el centro: el JS les pone .is-on por tramos del recorrido. */
.twl-wheel-bg__cifras {
	display: grid;
	gap: clamp(28px, 6vh, 64px);
	align-content: center;
}
.twl-wheel-bg__cifras--izq { justify-items: end;   text-align: right; }
.twl-wheel-bg__cifras--der { justify-items: start; text-align: left;  }

.twl-wheel-bg__cifra {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .55s ease, transform .55s ease;
}
.twl-wheel-bg__cifra.is-on {
	opacity: 1;
	transform: none;
}

/* Venían pintados para la banda oscura: sobre el claro había que invertirlos.
   #151517 = 16,1 sobre #f5f6f1 · #b8490a = 4,71 (el naranja puro se queda en
   2,64 y no llega ni para texto grande). */
.twl-wheel-bg .wl-a3-proof__value {
	color: #b8490a !important;
	font-size: clamp(30px, 3.4vw, 52px);
	line-height: 1;
	margin-bottom: 10px;
}
.twl-wheel-bg .wl-a3-proof__label {
	color: #151517 !important;
	font-size: clamp(12px, 1.05vw, 14px);
	text-transform: uppercase;
	letter-spacing: .08em;
	line-height: 1.35;
}

@media (max-width: 1023.98px) {
	/* Menos recorrido: 2,6 pantallas de scroll en un móvil se hacen eternas. */
	/* En un móvil no caben cifras a los lados: la llanta arriba y las cuatro
	   cifras debajo en dos columnas, entrando igual de una en una. */
	.twl-wheel-bg { height: 200vh; --twl-wheel-nav: 93px; }
	.twl-wheel-bg__stage {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto auto;
		align-content: center;
		row-gap: clamp(14px, 3vh, 28px);
	}
	.twl-wheel-bg__canvas { grid-column: 1 / -1; grid-row: 2; height: auto; width: 92vw; max-width: none; }
	.twl-wheel-bg__cifras--izq { grid-column: 1; grid-row: 3; justify-items: center; text-align: center; }
	.twl-wheel-bg__cifras--der { grid-column: 2; grid-row: 3; justify-items: center; text-align: center; }
	.twl-wheel-bg__cifras { gap: clamp(14px, 2.5vh, 26px); }
}

@media (prefers-reduced-motion: reduce) {
	/* Sin animación no hace falta recorrido: la banda se queda en una pantalla
	   y el JS pinta un solo frame (staticOnly). */
	.twl-wheel-bg { height: auto; }
	.twl-wheel-bg__stage { position: relative; height: auto; }
	.twl-wheel-bg__cifra { opacity: 1; transform: none; transition: none; }
}