.has-grid-svg-bg {
	overflow: hidden;
	isolation: isolate;
	position: relative;
	--grid-svg-bg-color: transparent;
	--grid-line-color-h: rgba(120, 190, 255, .1);
	--grid-line-color-v: rgba(120, 190, 255, .1);
	--grid-line-opacity: .82;
	--grid-line-width: 1.35;
	--grid-line-delay-step: .055s;
	--grid-line-duration: .72s;
	--grid-easing: cubic-bezier(.77, 0, .175, 1);
	--grid-bg-overlay: none;
}

.has-grid-svg-bg--dark {
	--grid-svg-bg-color: var(--color-main, #0B1F33);
	--grid-line-color-h: rgba(120, 190, 255, .1);
	--grid-line-color-v: rgba(120, 190, 255, .1);
	--grid-bg-overlay:
		linear-gradient(90deg, rgba(11, 31, 51, .38) 0%, rgba(11, 31, 51, .08) 48%, rgba(11, 31, 51, .34) 100%),
		radial-gradient(circle at 18% 20%, rgba(56, 91, 146, .3), rgba(11, 31, 51, 0) 34%),
		radial-gradient(circle at 82% 74%, rgba(37, 99, 235, .16), rgba(11, 31, 51, 0) 36%);
}

.has-grid-svg-bg--light {
	--grid-svg-bg-color: var(--color-back, #F1F5F9);
	--grid-line-color-h: rgba(28, 61, 90, .06);
	--grid-line-color-v: rgba(28, 61, 90, .06);
	--grid-line-opacity: .9;
	--grid-bg-overlay:
		linear-gradient(90deg, rgba(241, 245, 249, .92) 0%, rgba(241, 245, 249, .44) 46%, rgba(241, 245, 249, .9) 100%),
		radial-gradient(circle at 16% 20%, rgba(56, 91, 146, .12), rgba(241, 245, 249, 0) 34%),
		radial-gradient(circle at 84% 72%, rgba(37, 99, 235, .08), rgba(241, 245, 249, 0) 36%);
}

.has-grid-svg-bg--white {
	--grid-svg-bg-color: #fff;
	--grid-line-color-h: rgba(28, 61, 90, .05);
	--grid-line-color-v: rgba(28, 61, 90, .05);
	--grid-line-opacity: .8;
	--grid-bg-overlay:
		linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, .94) 100%),
		radial-gradient(circle at 18% 20%, rgba(56, 91, 146, .08), rgba(255, 255, 255, 0) 34%),
		radial-gradient(circle at 84% 76%, rgba(37, 99, 235, .06), rgba(255, 255, 255, 0) 36%);
}

.grid-svg-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: var(--grid-svg-bg-color);
	clip-path: inset(0);
}

.grid-svg-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--grid-bg-overlay);
}

.grid-svg-bg__svg {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.grid-svg-bg__line {
	stroke-width: var(--grid-line-width);
	stroke-linecap: butt;
	vector-effect: non-scaling-stroke;
	opacity: 0;
}

.grid-svg-bg__line--h {
	stroke: var(--grid-line-color-h);
	stroke-dasharray: var(--line-length);
	stroke-dashoffset: var(--line-length);
}

.grid-svg-bg__line--v {
	stroke: var(--grid-line-color-v);
	stroke-dasharray: var(--line-length);
	stroke-dashoffset: var(--line-length);
}

.grid-svg-bg.is-animated .grid-svg-bg__line {
	animation: updatersGridSvgLineDraw var(--grid-line-duration) var(--grid-easing) forwards;
	animation-delay: calc(var(--line-index, 0) * var(--grid-line-delay-step));
}

@keyframes updatersGridSvgLineDraw {
	0% {
		stroke-dashoffset: var(--line-length);
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: 0;
		opacity: var(--grid-line-opacity);
	}
}

@media (prefers-reduced-motion: reduce) {
	.grid-svg-bg__line {
		animation: none !important;
		stroke-dashoffset: 0 !important;
		opacity: .4 !important;
	}
}