/**
 * Plug & Pixel — fondo de hero "pared de LED".
 *
 * z-index: -1 es la pieza clave. Deja el canvas por delante del fondo del
 * hero y por detrás de todo su contenido, sin necesidad de posicionar ni un
 * solo hijo. Así no se altera el anclaje de la decoración del hero.
 */

.pp-led,
.pp-led-scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.pp-led {
	display: block;
	width: 100%;
	height: 100%;
}

/**
 * El velo mantiene el titular legible por encima de la malla. El primer
 * degradado oscurece la izquierda, donde vive el texto; el segundo cierra
 * la parte baja para que la malla no choque con la sección siguiente.
 *
 * Va después del canvas en el marcado, así que con el mismo z-index queda
 * por encima de él.
 */
.pp-led-scrim {
	background:
		linear-gradient(
			100deg,
			rgba( 6, 6, 6, 0.94 ) 0%,
			rgba( 6, 6, 6, 0.74 ) 38%,
			rgba( 6, 6, 6, 0.18 ) 72%,
			rgba( 6, 6, 6, 0 ) 100%
		),
		linear-gradient(
			to top,
			rgba( 6, 6, 6, 0.92 ) 0%,
			rgba( 6, 6, 6, 0 ) 45%
		);
}

/* En pantallas estrechas el texto ocupa todo el ancho: se oscurece parejo. */
@media ( max-width: 782px ) {
	.pp-led-scrim {
		background:
			linear-gradient(
				to bottom,
				rgba( 6, 6, 6, 0.86 ) 0%,
				rgba( 6, 6, 6, 0.7 ) 55%,
				rgba( 6, 6, 6, 0.94 ) 100%
			);
	}
}

/* El JS ya se congela solo; esto cubre el caso de que no llegue a ejecutarse. */
@media ( prefers-reduced-motion: reduce ) {
	.pp-led {
		opacity: 0.55;
	}
}

/**
 * La rejilla propia del tema, sustituida por la pared de LED.
 *
 * Se quita solo el fondo, no el elemento: .pixel-field contiene además el haz,
 * los cuatro píxeles sueltos y los dos planos inclinados, que se conservan.
 *
 * Solo dentro del hero: esta hoja se encola bajo is_front_page(), y el
 * selector queda acotado a .hero-lock, que es de donde cuelga .pixel-field.
 */
.hero-lock .pixel-field {
	background-image: none;
}