/*! BaseBlue — Baseload power. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* ==========================================================================
   BASELOAD POWER (RONDA4 §4)

   La experiencia «Carga base» del Home, ahora página interior en `/baseload/`.
   Cuatro escenas sobre una pista fijada: la sala de LED → la cola que el
   trazo rompe e inunda de azul → BASE LOAD que se recompone en BASE BLUE →
   la ventana a la película. El scroll solo mueve un número (zs, suavizado
   por tiempo en baseload.js); cada escena se pinta en función de él, así
   que todo es reversible y no hay saltos de estado.

   Prefijo `cb-` en todo el CSS propio (sequence.css es de H, el hero v2 del
   Home): esta página no comparte ni una clase con esa pista.

   Dos modos, decididos antes de pintar por el script del parcial:
   `.cb-seq--live` (la pista fijada) y `.cb-seq--still` (movimiento
   reducido: tres paneles quietos). Sin JS no hay ninguna de las dos clases
   y se ven los paneles quietos con los pósters de <noscript>.

   Sin clases con transición dentro del recorrido (RONDA4 §4.3): la
   visibilidad de cada escena y del logotipo de la cabecera la escribe
   baseload.js como estilo en línea, nunca como una clase con `transition`.
   ========================================================================== */

.cb-seq {
	/* Cuerpo de las frases de escena: una línea de titular por pantalla, con
	   tope por altura para que un portátil bajo no se desborde. */
	--t-open: min(calc(var(--w) * 0.072), 15svh, 13rem);
	position: relative;
	width: 100%;
	background: var(--page-bg);
	color: #fff;
}
@media (orientation: portrait) {
	.cb-seq { --t-open: min(14vw, 7svh, 6.4rem); }
}
@media (orientation: landscape) and (max-height: 520px) {
	.cb-seq { --t-open: min(calc(var(--w) * 0.072), 11svh); }
}

.cb-seq__open {
	font-size: var(--t-open);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.035em;
	font-kerning: normal;
}
.cb-seq__line { display: block; white-space: nowrap; }
/* Sin la pista (movimiento reducido) el titular fluye: nunca se corta en el borde. */
.cb-seq--still .cb-seq__line { white-space: normal; }

/* ================================================================ Paneles */
/* Estado base (sin JS o con movimiento reducido): tres paneles en flujo. */

.cb-scene { position: relative; min-height: 88svh; overflow: hidden; }
.cb-hall { background: var(--bb-ink); display: flex; flex-direction: column; justify-content: flex-end; gap: 0.4em; padding: 0 var(--margin) 10svh; }
.cb-word { background: var(--bb-flood); display: grid; place-content: center; justify-items: center; gap: 3.2svh; padding: 10svh var(--margin); order: 2; }
.cb-portal { background: var(--bb-ink); display: flex; flex-direction: column; justify-content: flex-end; padding: 0 var(--margin) 12svh; order: 3; }
.cb-seq__sticky { display: flex; flex-direction: column; }

.cb-hall__title, .cb-hall__queue { position: relative; color: var(--bb-pale); }
/* El nombre de la página, discreto, arriba a la izquierda del primer fotograma. */
.cb-hall__page { position: absolute; z-index: 1; top: calc(var(--header-h) + 1.6rem); left: var(--margin); margin: 0; color: rgba(222, 227, 235, 0.76); }
.cb-hall__queue { font-size: calc(var(--t-open) * 0.62); color: rgba(222, 227, 235, 0.72); }
.cb-hall__canvas, .cb-hall__still, .cb-hall__band, .cb-hall__slash,
.cb-portal__film, .cb-portal__media, .cb-portal__scrim, .cb-portal__lines,
.cb-word__flash, .cb-word__glyphs {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.cb-hall__still, .cb-portal__still, .cb-portal__video { object-fit: cover; }
.cb-hall__band, .cb-hall__slash, .cb-portal__lines, .cb-word__glyphs, .cb-word__flash { display: none; }

.cb-portal__still, .cb-portal__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.cb-portal__video { display: none; }
.cb-portal__scrim { background: linear-gradient(to bottom, rgba(14, 14, 14, 0) 55%, #0e0e0e 100%); }
.cb-portal__title { position: relative; }

.cb-word__phrase {
	font-size: var(--t-h3);
	font-weight: 300;
	line-height: 1.2;
	color: rgba(255, 255, 255, 0.84);
	text-align: center;
}
/* El logotipo es el propio archivo de la marca, usado como máscara: el mismo
   dibujo que la cabecera, sin copiarlo en el HTML. */
.cb-word__logo {
	width: min(72vw, 150svh, 160rem);
	aspect-ratio: 314 / 48;
	background: #fff;
	-webkit-mask: url(../../logo-lockup.svg) 0 0 / 100% 100% no-repeat;
	mask: url(../../logo-lockup.svg) 0 0 / 100% 100% no-repeat;
}
.cb-word__need { order: -1; }
@media (orientation: portrait) {
	.cb-word__logo { width: 88vw; }
}

/* ============================================================ Secuencia viva */

/* Guion más largo (RONDA4 §4.2): 760lvh en vez de 660 — ningún gesto por
   debajo de 0,35z y la transformación de la palabra ocupa 3,0–4,4z en vez
   de 3,0–3,7z, con sus siete sub-gestos encadenados al 50 % en baseload.js. */
.cb-seq--live .cb-seq__track { height: 760lvh; }
.cb-seq--live .cb-seq__sticky {
	position: sticky;
	top: 0;
	display: block;
	height: 100lvh;
	overflow: hidden;
}
.cb-seq--live .cb-scene {
	position: absolute;
	inset: 0;
	min-height: 0;
	padding: 0;
	display: block;
	visibility: hidden;
}
/* La sala se ve desde el primer fotograma: si el JS no llegara, queda el
   titular sobre la tinta y no una pantalla vacía. La visibilidad de la sala,
   del portal y de la palabra, a partir de aquí, la escribe baseload.js como
   estilo en línea (progreso continuo de zs), nunca con una clase. */
.cb-seq--live .cb-hall { visibility: visible; z-index: 1; }
.cb-seq--live .cb-portal { z-index: 2; background: none; }
.cb-seq--live .cb-word { z-index: 3; background: none; }

/* A · La sala ------------------------------------------------------------- */

.cb-seq--live .cb-hall__band { display: block; background: var(--bb-flood); clip-path: polygon(0 0, 0 0, 0 0); }
.cb-seq--live .cb-hall__slash { display: block; overflow: visible; }
.cb-hall__slash line { fill: none; stroke-dasharray: 1 1; stroke-dashoffset: 1; stroke-linecap: round; }
.cb-hall__slash-glow { stroke: var(--bb-flood); stroke-width: 3; }
.cb-hall__slash-core { stroke: var(--bb-sky); stroke-width: 1; }

/* Titulares sobre la retícula de 12: A en las columnas 1–9 con la línea base
   al 74 % del alto; B en las 1–8, al 40 %. La línea base cae 0,2 em por
   encima del borde inferior de la caja (descendente de Outfit). */
.cb-seq--live .cb-hall__title,
.cb-seq--live .cb-hall__queue,
.cb-seq--live .cb-portal__title {
	position: absolute;
	left: var(--margin);
	width: calc((var(--w) - 2 * var(--margin) - 11 * var(--gutter)) * 0.75 + 8 * var(--gutter));
}
.cb-seq--live .cb-hall__title { bottom: calc(26% - 0.2em); }
.cb-seq--live .cb-hall__queue { bottom: calc(60% - 0.2em); font-size: var(--t-open); color: var(--bb-pale); }
.cb-seq--live .cb-portal__title { bottom: calc(18% - 0.2em); }
@media (orientation: portrait) {
	.cb-seq--live .cb-hall__title,
	.cb-seq--live .cb-hall__queue,
	.cb-seq--live .cb-portal__title { right: var(--margin); width: auto; }
}

/* C · La palabra ---------------------------------------------------------- */

.cb-seq--live .cb-word__flash { display: block; background: #1a6fd6; opacity: 0; }
.cb-seq--live .cb-word__glyphs { display: block; overflow: visible; color: #fff; }
.cb-word__glyphs path { fill: currentColor; fill-rule: evenodd; }
.cb-word__glyphs .is-outline { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.cb-seq--live .cb-word__logo {
	position: absolute;
	top: 0;
	left: 0;
	width: auto;
	opacity: 0;
	transform-origin: 0 0;
}
/* Las frases se colocan por JS a la altura del logotipo; aquí solo el ancho. */
.cb-seq--live .cb-word__phrase { position: absolute; left: var(--margin); right: var(--margin); top: 0; }
.cb-seq--live .cb-word__need { transform: translateY(-100%); }

/* D · El portal ----------------------------------------------------------- */

.cb-seq--live .cb-portal__film { clip-path: polygon(0 0, 0 0, 0 0); }
/* Un 4 % más alta que la pantalla: la deriva final sube la película sin
   descubrir su borde inferior. */
.cb-seq--live .cb-portal__media { height: calc(100% + 4lvh); transform-origin: 50% 40%; }
.cb-seq--live .cb-portal__video { display: block; }
.cb-seq--live .cb-portal__scrim { opacity: 0; }
.cb-seq--live .cb-portal__lines { display: block; overflow: visible; }
.cb-portal__ray { stroke: #fff; stroke-width: 2; }
.cb-portal__edge { stroke: var(--bb-sky); stroke-width: 1; }

/* ========================================================== En /how-the-fuel-cell-works/ */
/* La pista no lleva `.sec`, así que la regla de ritmo de `site.css` (RONDA4
   §2.1) no la ve: su último fotograma (`cb-portal`) es tinta, igual que la
   sección que la sigue en esta página, así que entra como «misma
   superficie» (regla 2) en vez del hueco completo de un cambio de color
   (regla 1). Solo en esta página: el resto del sistema no toca. */
body.page-technology .cb-seq + .sec[data-surface="ink"] {
	padding-top: var(--sec-join);
}
body.page-technology .cb-seq + .sec[data-surface="ink"]:not(.pline-sec)::before {
	content: "";
	position: absolute;
	top: 0;
	left: max(var(--margin), calc((100% - var(--max)) / 2 + var(--margin)));
	right: max(var(--margin), calc((100% - var(--max)) / 2 + var(--margin)));
	height: 1px;
	background: var(--rule);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform var(--dur-4) var(--ease-io);
	pointer-events: none;
}
.cb-portal__lines line { opacity: 0; }