/*
 * Site-wide drafting grid with pointer spotlight reveal (B7, Joe 8-11-26).
 * Port of the prototype GridBackground.tsx + theme.css layers:
 *  - .grid-bg__base: document-anchored STATIC faint grid. No JS touches it,
 *    so it never repaints — it just composites as you scroll.
 *  - .grid-reveal: one VIEWPORT-fixed layer with a soft radial mask that
 *    follows the pointer (eased in bl-grid-ground.js), brightening the grid.
 *    Its background-position is offset by scroll (--sy) so revealed lines
 *    stay aligned to the base grid — no parallax.
 * Position vars are written on the reveal element only (scoped style
 * invalidation), matching the prototype's Lighthouse-tuned behavior.
 *
 * The grid shows through wherever page grounds are transparent: body keeps
 * the kit cadastral-bg below both layers, and Elementor location roots are
 * elevated above them. A template that paints an opaque background on its
 * root container hides the grid on its pages — leave template roots
 * transparent where the grid ground should read.
 */

:root {
	--bl-grid-cell: 34px;
}

body {
	position: relative; /* containing block for the document-anchored layer */
}

.grid-bg {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	pointer-events: none;
	contain: strict;
}

.grid-bg__base {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, var(--e-global-color-cadastral-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--e-global-color-cadastral-line) 1px, transparent 1px);
	background-size: var(--bl-grid-cell) var(--bl-grid-cell);
	opacity: 0.14;
}

.grid-reveal {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	contain: strict;
	--mx: 50vw;
	--myv: 40vh;
	--sy: 0px;
	background-image:
		linear-gradient(to right, var(--e-global-color-cadastral-line) 1px, transparent 1px),
		linear-gradient(to bottom, var(--e-global-color-cadastral-line) 1px, transparent 1px);
	background-size: var(--bl-grid-cell) var(--bl-grid-cell);
	/* Keep the revealed lines aligned to the document-anchored base grid. */
	background-position: 0 calc(var(--sy) * -1);
	opacity: 0.85;
	-webkit-mask-image: radial-gradient(600px circle at var(--mx) var(--myv), #000 0%, rgba(0, 0, 0, 0.5) 35%, transparent 70%);
	mask-image: radial-gradient(600px circle at var(--mx) var(--myv), #000 0%, rgba(0, 0, 0, 0.5) 35%, transparent 70%);
}

/* Content rides above both grid layers (the prototype's `relative z-10`
   wrapper). Hello theme prints no #content main here — every document
   (header, single/archive, footer) is a body-level .elementor root. */
body > .elementor {
	position: relative;
	z-index: 1;
}

/* The header root must stack ABOVE the sibling page/footer roots, or its
   mega menu (z-indexed only WITHIN the header's stacking context) paints
   behind the page content that follows it in the DOM (B9 fix). Matches the
   header's own h-root z-index. The offering header variants are unaffected
   either way: their wrapper is display:contents (bl-theme.css), so their
   bars stack directly in the body's context at 40/50. */
body > .elementor[data-elementor-type="header"] {
	z-index: 50;
}

/* Dark mode: same guards as bl-theme.css (explicit choice wins, device
   preference otherwise). */
html[data-bl-theme="dark"] .grid-bg__base {
	opacity: 0.18;
}

html[data-bl-theme="dark"] .grid-reveal {
	opacity: 0.6;
}

@media (prefers-color-scheme: dark) {
	html:not([data-bl-theme="light"]) .grid-bg__base {
		opacity: 0.18;
	}

	html:not([data-bl-theme="light"]) .grid-reveal {
		opacity: 0.6;
	}
}

/* Reduced motion: static faint grid only, no reveal. */
.grid-reveal--reduced {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.grid-reveal {
		display: none;
	}
}