[data-dot-grid] {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	--dot-grid-bg: #171b22;
	--dot-grid-dot: rgba(255, 255, 255, 0.2);
	--dot-grid-size: 20px;
	--dot-grid-dot-size: 1px;
	--dot-grid-glow-size: 220px;
	--dot-grid-glow: rgba(188, 42, 39, 0.2);
	--dot-grid-glow-soft: rgba(255, 255, 255, 0.08);
	--dot-grid-x: 50%;
	--dot-grid-y: 50%;
	--dot-grid-intensity: 0;
}

[data-dot-grid] > * {
	position: relative;
	z-index: 1;
}

[data-dot-grid]::before,
[data-dot-grid]::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

[data-dot-grid]::before {
	z-index: 0;
	background-color: var(--dot-grid-bg);
	background-image: radial-gradient(circle, var(--dot-grid-dot) 0 var(--dot-grid-dot-size), transparent calc(var(--dot-grid-dot-size) + 0.1px));
	background-size: var(--dot-grid-size) var(--dot-grid-size);
	opacity: 0.78;
}

[data-dot-grid]::after {
	z-index: 0;
	background-image:
		radial-gradient(circle var(--dot-grid-glow-size) at var(--dot-grid-x) var(--dot-grid-y), var(--dot-grid-glow) 0%, rgba(188, 42, 39, 0) 60%),
		radial-gradient(circle 140px at var(--dot-grid-x) var(--dot-grid-y), var(--dot-grid-glow-soft) 0%, rgba(255, 255, 255, 0) 70%);
	background-size: auto, auto;
	opacity: var(--dot-grid-intensity);
	transition: opacity 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
	[data-dot-grid]::after {
		display: none;
	}
}