/*! BaseBlue — Home · 30 Hidrógeno azul y captura. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* ==========================================================================
   DOS TIEMPOS, UN ESCENARIO

   Base (retrato, movimiento reducido, sin JS): dos bloques seguidos, frase
   e imagen a sangre. Apaisado con movimiento: el escenario se fija durante
   240 lvh, el texto cambia a la izquierda y las dos imágenes se relevan en
   el mismo marco a la derecha (el JS pone `is-pinned` y los
   estilos en línea de las imágenes y de la tubería).
   ========================================================================== */

.process { overflow-x: clip; }
.process figure { margin: 0; }

.process__grid { row-gap: var(--block-gap); }
.process__text { grid-column: 1 / -1; }
.process__title { max-width: 14ch; }
.process__link { margin-top: var(--head-gap); }

.process__media {
	position: relative;
	grid-column: 1 / -1;
	/* A sangre: el marco llega a los dos bordes de la pantalla. */
	margin-inline: calc(var(--margin) * -1);
}
.process__media img { display: block; width: 100%; height: 100%; }
.process__media--atr { aspect-ratio: 2400 / 1669; }
.process__media--rack { aspect-ratio: 4 / 5; max-height: 78svh; }
.process__rack { object-fit: cover; }

/* La tubería: filete de 1 px en la tinta de los filetes y, encima, el azul
   que se dibuja de izquierda a derecha (solo `transform`). */
.process__pipe {
	position: absolute;
	left: 62%;
	right: 0;
	top: 58%;
	height: 1px;
	background: var(--rule);
	pointer-events: none;
}
.process__pipe-flow {
	position: absolute;
	inset: 0;
	background: var(--bb-flood);
	transform-origin: 0 50%;
	transform: scaleX(0);
}

/* La cabeza: el punto blanco con halo azul de las líneas de energía (40).
   La capa mide lo que la tubería y el JS la traslada su propio ancho × k,
   así el punto va siempre en la punta del trazo. */
.process__pipe-head {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.process__pipe-head::before,
.process__pipe-head::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	border-radius: 50%;
	translate: -50% -50%;
}
.process__pipe-head::before {
	width: 1.8rem;
	height: 1.8rem;
	background: radial-gradient(closest-side, rgba(0, 85, 183, 0.9), rgba(0, 85, 183, 0));
}
.process__pipe-head::after { width: 2.6px; height: 2.6px; background: #fff; }

@media (prefers-reduced-motion: reduce) {
	.process__pipe-flow { transform: none; }
	.process__pipe-head { display: none; }
}

/* ============================================================ Apaisado fijo */
/* Lo decide el JS (`is-pinned`: apaisado y movimiento completo), así que sin
   JS el apaisado cae en los dos bloques seguidos y nada queda escondido. */

.process.is-pinned { padding-block: 0; }
.is-pinned .process__track { height: 240lvh; }
.is-pinned .process__stage {
	position: sticky;
	top: 0;
	height: 100lvh;
	display: flex;
	align-items: center;
}
.is-pinned .process__grid {
	grid-template-rows: 76svh;
	align-items: center;
	row-gap: 0;
}

/* Los dos textos ocupan la misma celda (1–5), centrados en vertical. */
.is-pinned .process__text { grid-column: 1 / span 5; grid-row: 1; }

/* El marco: 6–12 y a sangre por la derecha, también más allá del tope de
   192 rem en un Studio Display. */
.is-pinned .process__media {
	grid-column: 6 / -1;
	grid-row: 1;
	height: 76svh;
	aspect-ratio: auto;
	margin-inline: 0 calc(var(--margin) * -1 - max(0px, (100vw - var(--max)) / 2));
}
.is-pinned .process__atr {
	/* El tren entero, con aire a la derecha: la tubería cruza ese aire
	   hasta el borde de la pantalla. */
	box-sizing: border-box;
	padding-right: calc(var(--margin) * 1.5);
	object-fit: contain;
	object-position: 40% 50%;
}
.is-pinned .process__media--rack {
	overflow: hidden;
	border-radius: var(--r-media) 0 0 var(--r-media);
	clip-path: inset(100% 0 0 0);
}
.is-pinned .process__rack { transform-origin: 50% 60%; }

/* El cambio de texto va ligado al scroll (lo escribe el JS como función
   continua del progreso, sin transición): el primero sale hacia arriba por
   su línea y el segundo entra desde abajo, el gesto de las entradas. */
.is-pinned .process__text--two :is(.rv-line > span, .rv-up) { transition: none; }