/*! BaseBlue — Home · 20 La pila. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* El objeto es el protagonista: un titular, la imagen grande y un enlace.
   Nada lleva marco ni fondo propio; el suelo de puntos se funde con la tinta. */

.fuel {
	/* El bloque entra desde la derecha: sin recorte, su primer fotograma
	   ensancharía el documento. */
	overflow-x: clip;
}
/* :where() deja la especificidad a cero: si no, este reinicio anulaba los márgenes de `.fuel__stage`. */
:where(.fuel figure) { margin: 0; }

/* ================================================================ Cabecera */

.fuel__head { align-items: end; }
.fuel__title { grid-column: 1 / span 7; grid-row: 1; max-width: none; }

/* Enlace (y logo de HDF, si existe) en 9–12, apoyados en la base del
   titular: el patrón de Demand y Team. El logo solo existe en el documento
   cuando el archivo existe (lo decide el montaje). */
.fuel__side {
	grid-column: 9 / -1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--head-gap);
}
.fuel__hdf { color: rgba(255, 255, 255, 0.86); }
.fuel__hdf img { display: block; height: 2.8rem; width: auto; opacity: 0.86; }

/* =================================================================== Objeto */

/* 16:9 a diez columnas (2–11), con tope: la fuente es de 1920 px y en un
   Studio Display (DPR 2) no debe ampliarse más de 1,6 veces. El lienzo deja
   aire por arriba del bloque, justo el que necesita la chimenea para no
   pisar el titular (subirla lo montaba sobre él a 1440 y 2560). */
.fuel__stage {
	position: relative;
	width: min(84vw, 150rem);
	margin: 0 auto;
}
.fuel__plate {
	position: relative;
	aspect-ratio: 16 / 9;
}
.fuel__plate img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.fuel__floor {
	-webkit-mask-image: radial-gradient(ellipse 44% 36% at 53% 72%, #000 50%, transparent 100%);
	mask-image: radial-gradient(ellipse 44% 36% at 53% 72%, #000 50%, transparent 100%);
}
/* El JS mueve estas dos capas con el scroll: se le avisa al navegador. */
.fuel.is-live .fuel__floor { will-change: opacity; }
.fuel.is-live .fuel__block { will-change: transform; }

/* Pie de la imagen: debajo, a la izquierda del bloque. */
.fuel__cap {
	position: absolute;
	left: 16%;
	bottom: 8%;
	margin: 0;
}

/* ================================================================= Retrato */
/* El bloque ocupa tres cuartos de su lienzo y no está centrado en él (su
   centro cae al 52,8 %): en retrato el lienzo se abre a 124 vw y se
   desplaza para que el bloque, de 92 vw, quede centrado en la pantalla. */
@media (orientation: portrait), (max-width: 899px) {
	.fuel__title { grid-column: 1 / -1; }
	.fuel__side { grid-column: 1 / -1; grid-row: 2; margin-top: var(--head-gap); }
	.fuel__hdf img { height: 2.2rem; }
	.fuel__stage {
		width: 124vw;
		margin: -6vw 0 0 calc(50% - 65.5vw);
	}
	/* El lienzo sobresale 8,5vw por la derecha: el margen lo compensa para que el pie no se corte. */
	.fuel__cap { position: static; margin: -6vw calc(8.5vw + var(--margin)) 0 calc(15.5vw + var(--margin)); }
}