/* Fullscreen background canvas for animated beams */
html, body {
	height: 100%;
}
.bg-root {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	z-index: -2; /* behind page content */
	overflow: hidden;
	background: #000; /* fallback */
}
/* When using video background */
.bg-video-wrap{ position:absolute; inset:0; overflow:hidden; background:#000; }
.bg-video{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	transform:none;
	filter: none;
	opacity:0;
	transition: opacity .35s ease;
}
.bg-video.is-active{ opacity:1; }

/* Keep canvas rules for backward compatibility (no-op if not present) */
canvas#bg-canvas { width: 100%; height: 100%; display: block; max-width: 100%; }

/* Optional subtle overlay gradient for contrast */
.bg-overlay {
	position: absolute;
	inset: 0;
	background: radial-gradient(1200px 600px at 50% 20%, rgba(255,255,255,0.06), rgba(0,0,0,0) 60%),
			   radial-gradient(800px 400px at 80% 80%, rgba(255,255,255,0.03), rgba(0,0,0,0) 60%);
	pointer-events: none;
}

/* Frosted glass overlay above background */
.frosted-glass {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	z-index: -1; /* above background but below page content */
	--black-tint: 0.6; /* Adjustable black tint opacity (0-1) */
	backdrop-filter: blur(6px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	background: linear-gradient(rgba(0, 0, 0, var(--black-tint)), rgba(0, 0, 0, var(--black-tint))),
	            linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
	pointer-events: none;
	max-width: 100vw;
	overflow: hidden;
}

/* iOS Safari: heavy backdrop blur can make the background video look very low-res.
   Keep the tint but disable blur on touch devices. */
@supports (-webkit-touch-callout: none) {
	@media (hover: none) and (pointer: coarse) {
		.frosted-glass{
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
			--black-tint: 0.68;
			background: linear-gradient(rgba(0, 0, 0, var(--black-tint)), rgba(0, 0, 0, var(--black-tint)));
		}
	}
}