/* Opt-in decorative spotlight: choose pixels or animated binary. */
:where(.sj-pixel-spotlight, .sj-binary-spotlight) {
	position: relative;
}

:is(.sj-pixel-spotlight, .sj-binary-spotlight) {
	isolation: isolate;
}

:is(.sj-pixel-spotlight, .sj-binary-spotlight) > .sj-pixel-spotlight__layer {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background-image: conic-gradient(
		at var(--sj-pixel-size, 1px) var(--sj-pixel-size, 1px),
		transparent 270deg,
		var(--sj-pixel-color, var(--color-pixel)) 0
	);
	background-size: var(--sj-pixel-spacing, 12px) var(--sj-pixel-spacing, 12px);
	-webkit-mask-image: radial-gradient(
		circle calc(var(--sj-pixel-radius, 120px) * var(--sj-pixel-pulse-scale, 1)) at var(--sj-pixel-x, -999px) var(--sj-pixel-y, -999px),
		var(--color-white) 0%,
		transparent 100%
	);
	mask-image: radial-gradient(
		circle calc(var(--sj-pixel-radius, 120px) * var(--sj-pixel-pulse-scale, 1)) at var(--sj-pixel-x, -999px) var(--sj-pixel-y, -999px),
		var(--color-white) 0%,
		transparent 100%
	);
	transition: opacity var(--sj-pixel-fade-duration, 180ms) ease-out;
}

:is(.sj-pixel-spotlight, .sj-binary-spotlight)[data-sj-pixel-active] > .sj-pixel-spotlight__layer {
	opacity: var(--sj-pixel-opacity, 0.75);
}

.sj-binary-spotlight > .sj-pixel-spotlight__layer {
	inset: auto;
	display: block;
	/* JS places a bounded patch; adjacent patches share document-grid cells. */
	max-width: none;
	background-image: none;
	/* The canvas contains its own radial alpha, so it can never flash unmasked. */
	-webkit-mask-image: none;
	mask-image: none;
	color: var(--sj-pixel-color, var(--color-pixel));
	font-family: var(--font-body);
	font-size: var(--sj-binary-font-size, 16px);
}

.sj-binary-spotlight[data-sj-pixel-active] > .sj-pixel-spotlight__layer {
	opacity: var(--sj-binary-opacity, 0.25);
}

@media (any-hover: none), (prefers-reduced-motion: reduce) {
	:is(.sj-pixel-spotlight, .sj-binary-spotlight) > .sj-pixel-spotlight__layer {
		display: none;
		transition: none;
	}
}

/* A touch device keeps a bounded corner field without pointer interaction.
 * Reduced motion uses the same field with a fixed digit bucket. */
.sj-binary-spotlight[data-sj-binary-corner] > .sj-pixel-spotlight__layer {
	display: block;
	transition: none;
}

@media (forced-colors: active) {
	:is(.sj-pixel-spotlight, .sj-binary-spotlight) > .sj-pixel-spotlight__layer {
		display: none !important;
		transition: none;
	}
}