/* =========================================================================
   KeepSeal Neo — reusable animated background layer (.ksn-bgfx)
   Fills the parent Elementor container. Light/dark aware via tokens.
   --ksn-bgfx-tint overrides the accent; default uses brand colours.
   ========================================================================= */
/* Put the background BEHIND everything in its container.
   1) The direct parent of the bg widget becomes its own stacking context
      (isolation), so a negative z-index stays inside the container instead of
      escaping behind the page.
   2) The bg widget fills the container and sits at z-index:-1 (below content,
      above the container's own background).
   3) Fallback for browsers without :has — lift every following sibling. */
*:has( > .elementor-widget-ksn_background ) { isolation: isolate; }

.elementor-widget-ksn_background {
	position: absolute !important;
	inset: 0;
	z-index: -1 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.elementor-widget-ksn_background > .elementor-widget-container { height: 100%; }

.elementor-widget-ksn_background ~ .elementor-element,
.elementor-widget-ksn_background ~ * { position: relative; z-index: 1; }

.ksn-bgfx {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	--ksn-bgfx-tint: var(--ksn-heat);
	--g: var(--ksn-primary-rgb);
}

/* adaptive base colour — flips light/dark with the theme (like the hero).
   Higher specificity so the per-style background-image rules can't override it. */
.ksn-bgfx.ksn-bgfx--fill { background-color: var(--ksn-bg); }

/* edges: full in the centre, soft fade toward the sides */
.ksn-bgfx--edge-fade {
	-webkit-mask-image: radial-gradient(135% 135% at 50% 50%, #000 42%, transparent 96%);
	mask-image: radial-gradient(135% 135% at 50% 50%, #000 42%, transparent 96%);
}
/* edges: seamless across stacked containers — anchor the pattern to the
   viewport so the grid/dots line up and the boundary disappears */
.ksn-bgfx--edge-seamless.ksn-bgfx--grid,
.ksn-bgfx--edge-seamless.ksn-bgfx--dots { background-attachment: fixed; }
.ksn-bgfx--edge-seamless.ksn-bgfx--grid::after { display: none; }

/* dark mode (explicit island, or following the global theme) — brighter lines
   so the pattern reads on a dark surface */
.ksn-bgfx.ksn-dark,
html.ksn-dark .ksn-bgfx:not(.ksn-light),
body.ksn-dark .ksn-bgfx:not(.ksn-light) { --g: 130, 170, 235; }
.ksn-bgfx.ksn-dark .ksn-bgfx__blob,
html.ksn-dark .ksn-bgfx:not(.ksn-light) .ksn-bgfx__blob { opacity: .7; }
/* forced-light island re-asserts the navy line colour even on a dark site */
.ksn-bgfx.ksn-light { --g: var(--ksn-primary-rgb); }

/* ---------- grid (blueprint) ---------- */
.ksn-bgfx--grid {
	background-image:
		linear-gradient(rgba(var(--g), .10) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--g), .10) 1px, transparent 1px);
	background-size: 32px 32px;
}
.ksn-bgfx--grid::after {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(45% 55% at 80% 12%, rgba(var(--ksn-heat-rgb), .14), transparent 70%),
		radial-gradient(50% 60% at 18% 85%, rgba(var(--g), .16), transparent 70%);
}
/* only the (GPU-cheap) glow drifts; the grid lines stay put to avoid
   repainting the whole section every frame */
.ksn-bgfx--grid.is-animated::after { animation: ksn-bgfx-drift 16s ease-in-out infinite alternate; }

/* ---------- aurora / mesh (soft blurred blobs) ---------- */
.ksn-bgfx__blob {
	position: absolute;
	width: 46%; aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(60px);
	opacity: .6;
}
.ksn-bgfx__blob:nth-child(1) { top: -10%; inset-inline-end: -6%; background: rgba(var(--ksn-heat-rgb), .55); }
.ksn-bgfx__blob:nth-child(2) { bottom: -14%; inset-inline-start: -8%; background: rgba(var(--g), .6); }
.ksn-bgfx__blob:nth-child(3) { top: 30%; inset-inline-start: 35%; background: rgba(var(--ksn-accent-rgb), .35); }
.ksn-bgfx--mesh .ksn-bgfx__blob { filter: blur(80px); opacity: .5; }
.ksn-bgfx--aurora.is-animated .ksn-bgfx__blob:nth-child(1) { animation: ksn-bgfx-float 12s ease-in-out infinite; }
.ksn-bgfx--aurora.is-animated .ksn-bgfx__blob:nth-child(2) { animation: ksn-bgfx-float 16s ease-in-out infinite reverse; }
.ksn-bgfx--aurora.is-animated .ksn-bgfx__blob:nth-child(3) { animation: ksn-bgfx-float 20s ease-in-out infinite; }
.ksn-bgfx--mesh.is-animated .ksn-bgfx__blob { animation: ksn-bgfx-float 18s ease-in-out infinite alternate; }

/* ---------- dots ---------- */
.ksn-bgfx--dots {
	background-image: radial-gradient(rgba(var(--g), .18) 1.6px, transparent 1.6px);
	background-size: 22px 22px;
}
/* dots stay static (animating background-position repaints constantly) */

/* ---------- induction rings ---------- */
.ksn-bgfx--rings { display: grid; place-items: center; }
.ksn-bgfx--rings i {
	position: absolute;
	border-radius: 50%;
	border: 2px solid rgba(var(--ksn-heat-rgb), .35);
}
.ksn-bgfx--rings i:nth-child(1) { width: 40vw; height: 40vw; }
.ksn-bgfx--rings i:nth-child(2) { width: 26vw; height: 26vw; border-color: rgba(var(--g), .4); }
.ksn-bgfx--rings i:nth-child(3) { width: 14vw; height: 14vw; }
.ksn-bgfx--rings.is-animated i:nth-child(1) { animation: ksn-bgfx-pulse 4s ease-in-out infinite; }
.ksn-bgfx--rings.is-animated i:nth-child(2) { animation: ksn-bgfx-pulse 4s ease-in-out infinite .5s; }
.ksn-bgfx--rings.is-animated i:nth-child(3) { animation: ksn-bgfx-pulse 4s ease-in-out infinite 1s; }

/* ---------- glow ---------- */
.ksn-bgfx--glow {
	background-image:
		radial-gradient(40% 50% at 78% 18%, rgba(var(--ksn-heat-rgb), .3), transparent 70%),
		radial-gradient(45% 55% at 18% 82%, rgba(var(--g), .3), transparent 70%);
	filter: blur(8px);
}
.ksn-bgfx--glow.is-animated { animation: ksn-bgfx-glow 8s ease-in-out infinite; }

@keyframes ksn-bgfx-pan {
	from { background-position: 0 0; }
	to   { background-position: 30px 26px; }
}
@keyframes ksn-bgfx-drift {
	0% { opacity: .7; transform: translate3d(0,0,0) scale(1); }
	50% { opacity: 1; }
	100% { opacity: .8; transform: translate3d(-14px,10px,0) scale(1.08); }
}
@keyframes ksn-bgfx-float {
	0%,100% { transform: translate3d(0,0,0) scale(1); }
	50% { transform: translate3d(6%, -5%, 0) scale(1.12); }
}
@keyframes ksn-bgfx-pulse {
	0%,100% { transform: scale(1); opacity: .7; }
	50% { transform: scale(1.12); opacity: 1; }
}
@keyframes ksn-bgfx-glow {
	0%,100% { opacity: .7; }
	50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.ksn-bgfx, .ksn-bgfx *, .ksn-bgfx::after { animation: none !important; }
}