/* ==========================================================================
   KSIS animated gear hero
   Replaces the static gears photo on the home hero with a slowly turning,
   meshing gear mechanism. Sits behind the .hexbox headline overlay.
   Progressive enhancement: layer is injected by gear-hero.js; if JS never
   runs, the original bg1.jpeg background remains untouched.
   ========================================================================== */

.ksis-gears {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;                 /* row content carries z-index:888, stays on top */
	pointer-events: none;
	/* Deep industrial navy base — echoes the original photo's palette so the
	   .hexbox overlay reads exactly as before. */
	background:
		radial-gradient(120% 120% at 12% 8%, #0d3255 0%, #072744 45%, #041b30 100%);
}

.ksis-gears__svg {
	position: absolute;
	inset: -2%;                /* slight bleed so cropped gears never show an edge */
	width: 104%;
	height: 104%;
	display: block;
	will-change: transform;
}

/* Depth layering for parallax between gear planes */
.ksis-gears__plane { will-change: transform; }

/* Far gears sit back: softened and dimmed */
.ksis-gear--far   { filter: blur(2.5px); opacity: 0.42; }
.ksis-gear--mid   { filter: blur(0.6px); opacity: 0.82; }
.ksis-gear--near  { opacity: 1; }

/* Warm rim light in the upper-left + cool sheen — matches the flare in the
   original photograph and gives the metal consistent, non-rotating lighting. */
.ksis-gears::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(38% 42% at 8% 4%, rgba(255, 150, 74, 0.30) 0%, rgba(255, 150, 74, 0) 60%),
		radial-gradient(45% 50% at 30% 38%, rgba(96, 196, 214, 0.14) 0%, rgba(96, 196, 214, 0) 70%);
	mix-blend-mode: screen;
	pointer-events: none;
}

/* Edge vignette for depth so gears feel recessed under the headline card. */
.ksis-gears::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(130% 120% at 50% 45%, rgba(4, 20, 33, 0) 48%, rgba(3, 12, 22, 0.80) 100%);
	pointer-events: none;
}

/* Respect reduced-motion: gears are rendered static (JS skips the rAF loop),
   and we soften the base a touch so it reads as a still backdrop. */
@media (prefers-reduced-motion: reduce) {
	.ksis-gears__svg { will-change: auto; }
}