#cinematic-focus-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 980;
	pointer-events: none;
	opacity: 0;
	background:
		radial-gradient(ellipse 66% 58% at 50% 48%, transparent 19%, rgba(0, 0, 0, .16) 56%, rgba(0, 0, 0, .82) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, .48), transparent 19%, transparent 76%, rgba(0, 0, 0, .58));
	box-shadow: inset 0 5vh 8vh -6vh rgba(0, 0, 0, .9), inset 0 -6vh 9vh -6vh rgba(0, 0, 0, .95);
	contain: strict;
	transform: translateZ(0);
	will-change: opacity;
}

@media (hover: hover) and (pointer: fine) {
	html.cinematic-focus-enabled #cinematic-focus-overlay {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	#cinematic-focus-overlay { display: none !important; }
}