/* ── Site-wide lightning ───────────────────────────────────────────
   Two stacked pieces, both behind the falling snow:

   1. `.erp-lightning-layer` — a soft sky wash at the strike point. Pure
      CSS, so it animates on the compositor for free.
   2. `.erp-lightning-canvas` — the jagged electric column itself, drawn by
      lightning.js. Its animation loop runs only while a strike is alive.

   Layer order:  wash 1 & bolt canvas 1 (above the wash by DOM order)
                 snow 2 · content 3 · smoke 999 · navbar 1000

   Opt out on any page:  <body data-lightning="off">
   ─────────────────────────────────────────────────────────────────── */

.erp-lightning-layer {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	/* Randomised per strike by lightning.js so bolts never repeat. */
	--erp-flash-x: 72%;
	--erp-flash-ms: 1100ms;

	/* A wide bloom at the strike point, plus a wash down the sky. Kept
	   gentle now that the bolt itself carries the effect. */
	background:
		radial-gradient(
			ellipse 55% 42% at var(--erp-flash-x) 0%,
			rgba(212, 230, 255, 0.72),
			rgba(150, 195, 255, 0.22) 40%,
			transparent 74%
		),
		linear-gradient(180deg, rgba(176, 208, 255, 0.26), transparent 52%);
}

.erp-lightning-canvas {
	position: fixed;
	top: 0;
	left: 0;
	/* Same level as the wash: the canvas is appended to <body> after the
	   wash, so it paints above it while both stay behind the snow (2). */
	z-index: 1;
	pointer-events: none;
}

.erp-lightning-layer.is-flashing {
	animation: erp-lightning-flash var(--erp-flash-ms) ease-out;
}

/* A strike is a bright leader followed by two weaker after-glows — that
   irregular decay is what makes it read as lightning, not a light switch. */
@keyframes erp-lightning-flash {
	0% {
		opacity: 0;
	}
	5% {
		opacity: 0.9;
	}
	10% {
		opacity: 0.12;
	}
	16% {
		opacity: 0.78;
	}
	26% {
		opacity: 0.08;
	}
	38% {
		opacity: 0.42;
	}
	55% {
		opacity: 0.05;
	}
	100% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.erp-lightning-layer {
		display: none;
	}
}