/* Ambient red light on the black content sections of home + series: one or two
   soft, blurred-looking glows per section, alternating sides down the page so
   the light travels as you scroll. Painted as background layers (no pseudo
   elements, no overflow, never over content). Each glow fades out well inside
   its section, so section edges never show a seam. Scroll scenes, Partnership
   and the final CTA keep their own lighting. (user, 2026-09-21) */
:root { --glow-rgb: 255 26 38; }

html :is(.range, .proof-testimonials, .find-fit, .insights,
	.series-statement, .series-app, .series-install, .series-box,
	.series-specs, .series-variants, .series-compat, .series-xcompare,
	.series-reviews, .series-faq) {
	--gw: 38vw;          /* glow radius, horizontal */
	--gh: 34%;           /* glow radius, vertical (of the section) */
	--gx: 0%;  --gy: 50%;  --ga: 0.13;   /* glow 1 */
	--gx2: 100%; --gy2: 50%; --ga2: 0;   /* glow 2 (off unless set) */
	background-image:
		radial-gradient(ellipse var(--gw) var(--gh) at var(--gx) var(--gy),
			rgb(var(--glow-rgb) / var(--ga)) 0%,
			rgb(var(--glow-rgb) / calc(var(--ga) * 0.55)) 30%,
			rgb(var(--glow-rgb) / calc(var(--ga) * 0.18)) 62%,
			rgb(var(--glow-rgb) / 0) 100%),
		radial-gradient(ellipse var(--gw) var(--gh) at var(--gx2) var(--gy2),
			rgb(var(--glow-rgb) / var(--ga2)) 0%,
			rgb(var(--glow-rgb) / calc(var(--ga2) * 0.55)) 30%,
			rgb(var(--glow-rgb) / calc(var(--ga2) * 0.18)) 62%,
			rgb(var(--glow-rgb) / 0) 100%);
}

/* Home, after the film: left → right → left → right. The Range is tall, so it
   carries a second, fainter glow low on the opposite side. */
html .range              { --gx: 0%;   --gy: 24%; --gh: 22%; --ga2: 0.08; --gx2: 100%; --gy2: 76%; }
html .proof-testimonials { --gx: 100%; --gy: 58%; }
html .find-fit           { --gx: 0%;   --gy: 55%; --ga: 0.09; }
html .insights           { --gx: 100%; --gy: 42%; }

/* Series, after the pod scene: alternating sides. (The split after the station
   scene is left out: it dissolves in over the scene, transparent by design.) */
html .series-statement                    { --gx: 0%; }
html .series-statement + .series-statement { --gx: 100%; }
html .series-app          { --gx: 0%;   --ga: 0.09; }
html .series-install      { --gx: 100%; --gy: 40%; }
html .series-box          { --gx: 0%;   --gy: 60%; }
html .series-specs        { --gx: 100%; --gy: 45%; --ga: 0.09; }
html .series-variants     { --gx: 0%;   --gy: 55%; }
html .series-compat       { --gx: 100%; --gy: 50%; }
html .series-xcompare     { --gx: 0%;   --gy: 45%; --ga: 0.09; }
html .series-reviews      { --gx: 100%; --gy: 55%; }
html .series-faq          { --gx: 0%;   --gy: 22%; --gh: 20%; --ga2: 0.07; --gx2: 100%; --gy2: 80%; }

/* Phones: a narrow screen needs a wider, lower glow to read at all. */
@media (max-width: 767px) {
	html :is(.range, .proof-testimonials, .find-fit, .insights,
		.series-statement, .series-app, .series-install, .series-box,
		.series-specs, .series-variants, .series-compat, .series-xcompare,
		.series-reviews, .series-faq) { --gw: 80vw; }
}