/* ─────────────────────────────────────────────────────────────────────────────
   PP Black Hole Background — Frontend Styles
   Per-row scoped CSS is generated dynamically by the renderer class.
   This file handles global layout rules, fallback styles, and
   reduced-motion overrides.
───────────────────────────────────────────────────────────────────────────── */

/*
 * The container is reparented by JS directly into the outer .fl-row div
 * so it sits *outside* .fl-row-content-wrap (BB's max-width constrainer).
 * The parent .fl-row needs position:relative to be the containing block,
 * and overflow:hidden to clip the absolute-positioned canvas.
 * Row content-wrap gets z-index:1 so content floats above the canvas.
 */
.fl-row:has(> .pp-bh-container) {
	position: relative;
	overflow: hidden;
}

.fl-row:has(> .pp-bh-container) > .fl-row-content-wrap {
	position: relative;
	z-index: 1;
}

.pp-bh-container {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 0;
	overflow: hidden;
	/* Do NOT block row content clicks. Canvas handles its own events. */
	pointer-events: none;
}

.pp-bh-canvas {
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: auto; /* Canvas should receive mouse events. */
}

/*
 * Fallback gradient — shown when WebGL is unavailable, mobile is disabled,
 * or prefers-reduced-motion is active. Hidden by default; JS or CSS media
 * query activates it.
 */
.pp-bh-fallback {
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at 50% 65%,
		rgba(255, 140, 20, 0.35)  0%,
		rgba(200, 60, 0, 0.20)   25%,
		rgba(80, 10, 0, 0.12)    55%,
		#000000                  80%
	);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}

/* JS adds this class when the fallback should be visible. */
.pp-bh--fallback-active .pp-bh-fallback {
	opacity: 1;
}

.pp-bh--fallback-active .pp-bh-canvas {
	display: none !important;
}

/*
 * Reduced-motion safety net at the CSS level — redundant with the JS check
 * but provides immediate suppression before JS runs.
 */
@media (prefers-reduced-motion: reduce) {
	.pp-bh-canvas {
		display: none !important;
	}
	.pp-bh-fallback {
		opacity: 1;
	}
}

/* Print — hide entirely. */
@media print {
	.pp-bh-container {
		display: none !important;
	}
}