/*! BaseBlue — secuencia de apertura. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* ==========================================================================
   HERO V2 (RONDA4 §3)

   El concepto clásico con voz propia: vídeo → tarjeta 4:5 que entra en una
   órbita inclinada de renders → el isotipo se dibuja como línea → el azul se
   abre desde su rayo → la frase → una lámina de tinta sube y es ya «The
   demand». El scroll solo mueve un número (z, en alturas de pantalla) y
   sequence.js pinta cada pieza como función continua de él.

   Dos modos, decididos antes de pintar por el script del parcial:
   `.seq--live` (la pista fijada) y `.seq--still` (movimiento reducido: dos
   paneles quietos). Sin JS no hay clase y se ven los paneles quietos.
   ========================================================================== */

.seq {
	position: relative;
	width: 100%;
	background: var(--page-bg);
	color: var(--bb-pale);
}

/* Titular del Home: una línea en escritorio, dos en retrato. */
.seq__h1 {
	margin: 0;
	font-size: var(--t-hero);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.035em;
	font-kerning: normal;
}
.seq__sub {
	margin: clamp(1.6rem, 2.6svh, 2.8rem) 0 0;
	/* «No turbine queue.» es mensaje clave: cuerpo de titular pequeño, no de nota. */
	font-size: var(--t-h3);
	font-weight: 300;
	line-height: 1.25;
}
/* La máscara de `rv-line`: la línea sube desde su propia línea base. */
.seq__mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.seq__line { display: block; }

/* ================================================= Paneles quietos (base) */

.seq__sticky { position: relative; display: flex; flex-direction: column; }
.seq__copy--ink, .orbit__img, .mark, .seq__cue { display: none; }

.orbit { position: relative; height: 100svh; }
.card { position: absolute; inset: 0; overflow: hidden; background: var(--bb-ink); }
.card__poster, .card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__video { display: none; }
/* Velo solo donde va el texto: abajo y a la izquierda. Va dentro de la
   tarjeta, así que encoge con ella y nunca deja costura. */
.card__scrim {
	position: absolute;
	inset: 0;
	/* Arriba, un velo corto bajo la marca de la cabecera (el cielo la dejaba en 1,75:1). */
	background:
		linear-gradient(to bottom, rgba(14, 14, 14, 0.5) 0%, rgba(14, 14, 14, 0.2) 9%, rgba(14, 14, 14, 0) 20%),
		linear-gradient(to top, rgba(14, 14, 14, 0.76) 0%, rgba(14, 14, 14, 0.46) 38%, rgba(14, 14, 14, 0) 66%),
		linear-gradient(to right, rgba(14, 14, 14, 0.36) 0%, rgba(14, 14, 14, 0) 46%);
}

/* El texto del vídeo: abajo a la izquierda, en la retícula (el clásico lo
   centraba; aquí manda el mismo margen que el resto del sitio). Las dos
   copias tienen la misma estructura, así que coinciden al píxel. */
.seq__copy {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0 var(--margin) clamp(2.4rem, 5svh, 5.6rem);
	color: var(--bb-pale);
}
.seq__copy--ink { color: var(--bb-navy); }
.seq__copy--ink .seq__meta { visibility: hidden; }
.seq__meta {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: clamp(3.2rem, 6svh, 6.4rem);
}

.flood {
	position: relative;
	min-height: 88svh;
	display: grid;
	place-items: center;
	padding: var(--sec-pad) var(--margin);
	background: var(--bb-flood);
	color: #fff;
}
.mark polygon { fill: currentColor; }

.phrase { text-align: center; }
.phrase__title {
	margin: 0;
	font-size: var(--t-phrase);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: -0.02em;
}
.phrase__sub {
	margin: clamp(2rem, 3.6svh, 4.4rem) 0 0;
	font-size: var(--t-phrase-sub);
	font-weight: 300;
	line-height: 1.25;
	color: rgba(255, 255, 255, 0.84);
}

/* ================================================================ En vivo */
/* 560lvh: 4,6 pantallas de recorrido útil (el clásico pedía 6,8). */

/* El corte: «The demand» (tinta) es la lámina. La pista se solapa una
   pantalla con ella, así que sube por encima del último fotograma y, al
   soltarse la secuencia, ya está entrando. Cero franja, cero pantalla vacía. */
.seq--live { margin-bottom: -100lvh; }
.seq--live .seq__track { height: 560lvh; }
.seq--live .seq__sticky {
	position: sticky;
	top: 0;
	display: block;
	height: 100lvh;
	overflow: hidden;
	background: var(--bb-paper);
}
.seq--live .seq__copy { z-index: 1; }
.seq--live .seq__copy--ink { display: block; }
.seq--live .orbit { position: absolute; inset: 0; z-index: 2; height: auto; pointer-events: none; }
.seq--live .seq__copy--pale { z-index: 3; }
.seq--live .mark--ink { z-index: 4; }
.seq--live .flood { position: absolute; inset: 0; z-index: 5; min-height: 0; padding: 0 var(--margin); clip-path: circle(0 at 50% 50%); }

/* La tarjeta es del tamaño de la ventana; el JS la recorta y la escala.
   Así el vídeo nunca se deforma: lo que cambia es su ventana. */
.seq--live .card { transform-origin: 50% 50%; }
.seq--live .orbit:not(.is-off) .card { will-change: transform, clip-path; }
.seq--live .orbit.is-off { visibility: hidden; }
.seq--live .card__video { display: block; }

.seq--live .orbit__img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: var(--orbit-h);
	width: calc(var(--orbit-h) * 0.8);
	object-fit: cover;
	border-radius: var(--r-m);
	opacity: 0;
	visibility: hidden;
	transform-origin: 50% 50%;
}
.seq--live .orbit.is-on .orbit__img { visibility: visible; will-change: transform, opacity; }
/* El radio no pinta nada aquí (sin fondo ni recorte): sirve para que el JS
   lea `--r-l` ya resuelto y redondee con él la lámina. */
.seq--live .orbit { --orbit-h: 26lvh; border-radius: var(--r-l); }

/* Isotipo en el centro exacto (el círculo azul nace ahí). El trazo es el de
   `pflow`: 1,5 px, no escala con el dibujo. */
.seq--live .mark {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--mark-w, min(20lvh, 22vw));
	height: auto;
	translate: -50% -50%;
	overflow: visible;
	opacity: 0;
}
.mark--ink { color: var(--bb-flood); }
.mark--pale { color: #fff; }
.seq--live .mark polygon {
	fill-opacity: 0;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	stroke-dasharray: 1 1;
	stroke-dashoffset: 1;
}

.seq--live .phrase { position: absolute; left: var(--margin); right: var(--margin); top: 50%; translate: 0 -50%; }
.seq--live [data-phrase-line] { transform: translateY(108%); }
.seq--live [data-phrase-sub] { opacity: 0; }

/* Entrada al cargar: el `rv-line` del sitio (sube desde su línea base) y
   `rv-up` para bajada y botón. Solo `transform`/`opacity` en la animación:
   la salida por scroll escribe `translate`/`opacity` en el padre, sin pelear. */
.seq--live [data-line] { animation: seq-line var(--dur-3) var(--ease-out) 0.15s backwards; }
.seq--live [data-rise] { animation: seq-rise var(--dur-3) var(--ease-out) calc(0.15s + var(--stagger) * 2) backwards; }
.seq--live .btn[data-rise] { animation-delay: calc(0.15s + var(--stagger) * 3); }
@keyframes seq-line { from { transform: translateY(108%); } }
@keyframes seq-rise { from { opacity: 0; transform: translateY(var(--rise)); } }

/* Invitación al scroll: un filete con una gota de luz, a la derecha. */
.seq--live .seq__cue {
	display: block;
	position: relative;
	width: 1px;
	height: 5.4svh;
	background: rgba(222, 227, 235, 0.24);
	overflow: hidden;
}
.seq--live .seq__cue::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 40%;
	background: var(--bb-pale);
	animation: seq-cue 2.4s var(--ease-io) infinite;
}
@keyframes seq-cue {
	0% { transform: translateY(-110%); }
	60%, 100% { transform: translateY(260%); }
}

/* ================================================================ Retrato */

@media (orientation: portrait) {
	.seq--live .orbit { --orbit-h: min(15lvh, 36vw); }
	.seq--live .mark { --mark-w: min(15lvh, 34vw); }
	.seq--live .seq__cue { height: 4.6svh; }
}
/* Apaisado muy bajo (el móvil girado): menos aire entre titular y botón. */
@media (orientation: landscape) and (max-height: 520px) {
	.seq__meta { margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
	.seq__cue::after { animation: none; }
}