/*! BaseBlue — Home · 40 Ventajas y líneas de energía. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* ==========================================================================
   VENTAJAS SOBRE LAS LÍNEAS DE ENERGÍA

   Un escenario fijado de 220 lvh con el canvas a sangre y las tres
   afirmaciones; después, la tarjeta de dato sube sobre su cola (como en ON
   Energy). La luz la pinta `40-advantages.js`; sin JS queda el póster.
   ========================================================================== */

.adv { padding-block: 0 var(--sec-pad); overflow-x: clip; }

/* ================================================================ Escenario */

.adv__track { position: relative; height: 220lvh; }
.adv__stage {
	position: sticky;
	top: 0;
	height: 100lvh;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.lines__canvas,
.adv__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.adv__poster { object-fit: cover; }
/* Viñeta: la luz nace y muere en la tinta, arriba y abajo, sin cortes. */
.adv__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom, var(--bb-ink) 0, rgba(14, 14, 14, 0) 22%, rgba(14, 14, 14, 0) 74%, var(--bb-ink) 100%),
		radial-gradient(ellipse 90% 80% at 50% 50%, rgba(14, 14, 14, 0) 60%, rgba(14, 14, 14, 0.6) 100%);
}

.adv__grid { position: relative; z-index: 1; width: 100%; }

/* Tres afirmaciones al mismo tamaño. La opacidad la escribe el JS como
   función del frente del haz (sin transición: el scroll ya es el tiempo);
   sin JS o con movimiento reducido se leen enteras. */
.adv__claims {
	grid-column: 7 / -1;
	margin: 0;
	display: grid;
	row-gap: 0.4em;
	font-size: var(--t-display);
}
.adv__claim { display: block; color: #fff; }

@media (orientation: portrait), (max-width: 899px) {
	.adv__stage { align-items: flex-end; padding-bottom: 18svh; }
	.adv__claims { grid-column: 1 / -1; }
}

/* =================================================================== Tarjeta */
/* Una sola tarjeta de dato, 21:9, a toda la retícula. Mapa en la mitad
   izquierda (donde se posa el haz); cifra y etiqueta en la derecha, que
   empieza en la misma línea que las afirmaciones (columna 7): con relleno
   simétrico, la segunda columna de la tarjeta cae justo en 50 % + gutter/2. */

.adv__cards {
	position: relative;
	z-index: 2;
	/* Sube sobre la cola del escenario, pero nunca a menos de `--p-space`
	   de la última afirmación (`--adv-tail` lo mide el JS). */
	margin-top: max(-26svh, calc(var(--p-space) - var(--adv-tail, 26svh)));
}
.adv__card {
	position: relative;
	aspect-ratio: 21 / 9;
	padding: var(--card-pad);
	border-radius: var(--r-l);
	background: var(--bb-ink-2);
	color: var(--bb-pale);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/* La fila la fija la proporción de la tarjeta, no el mapa. */
	grid-template-rows: minmax(0, 1fr);
	column-gap: var(--gutter);
	overflow: hidden;
}
.adv__dots {
	grid-column: 1;
	grid-row: 1;
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow: visible;
}
.adv__text {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

/* La cifra; nunca se anima con conteo. */
.adv__num {
	margin: 0;
	font-size: var(--t-num);
	font-weight: 250;
	line-height: 1;
	letter-spacing: -0.06em;
	color: #afb6c0;
	font-variant-numeric: lining-nums;
}
.adv__unit {
	margin-left: 0.12em;
	font-size: 0.42em;
	letter-spacing: 0;
	vertical-align: 1.3em;
}
.adv__label { margin: 0; max-width: 16em; font-weight: 400; }

/* Mapa de puntos: tenue hasta que el haz llega; entonces se enciende hacia
   fuera desde el punto (360 ms en total, el tope del escalonado). */
.adv__band {
	fill: none;
	stroke: var(--bb-pale);
	stroke-width: 2.4;
	stroke-linecap: round;
	opacity: 0.7;
	transition: opacity var(--dur-4) var(--ease-out);
	transition-delay: calc(var(--b) * var(--stagger) * 0.3);
}
/* Apagado solo con el núcleo en marcha: sin JS el mapa se ve encendido. */
.bb-ready .adv__card:not(.is-lit) .adv__band { opacity: 0.18; }
.adv__core { fill: var(--bb-sky); }
.adv__ring {
	fill: none;
	stroke: var(--bb-sky);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}
/* El anillo late solo con la tarjeta en pantalla y el mapa encendido. */
.adv__card.is-lit.is-live .adv__ring { animation: adv-ring 2.4s var(--ease-out) infinite; }
@keyframes adv-ring {
	from { transform: scale(1); opacity: 0.6; }
	to { transform: scale(3.2); opacity: 0; }
}

/* =================================================================== Retrato */
/* A todo el ancho, 4:5 como mucho: el mapa arriba, cifra y etiqueta debajo. */

@media (orientation: portrait), (max-width: 899px) {
	.adv__cards { margin-top: max(-18svh, calc(var(--p-space) - var(--adv-tail, 18svh))); }
	.adv__card {
		aspect-ratio: 4 / 5;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(0, 1fr) auto;
		row-gap: var(--head-gap);
	}
	.adv__dots { grid-row: 1; justify-self: center; }
	.adv__text { grid-column: 1; grid-row: 2; gap: var(--head-gap); }
}
/* Tableta en retrato: 4:5 a todo el ancho sería una pantalla entera. */
@media (orientation: portrait) and (min-width: 700px) {
	.adv__card { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
	.adv__band { transition: none; }
	.adv__ring { display: none; }
}