/* ==========================================================================
   Gear Animation Styles
   Performance-optimized for 2026
   Background positioning - dezent und raffiniert
   ========================================================================== */

/* Gears Wrapper - fixed position, doesn't scroll with content */
.gears-wrapper {
	position: fixed;
	top: 0px;
	right: 0px;
	overflow: visible;
	display: block;
	opacity: 0.25;
	pointer-events: none; /* Don't interfere with clicks */
	z-index: calc(var(--z-index-sticky) + 1);
	contain: layout paint;
	--gear-0: var(--color-primary-green);
	--gear-0-accent: #7aa313;
	--gear-1: var(--color-primary-cyan);
	--gear-1-accent: #1e8ab8;
	--gear-2: var(--color-primary-red);
	--gear-2-accent: #a8093f;
	--gear-3: var(--color-primary-orange);
	--gear-3-accent: #c56632;
	--gear-4: #ca332e;
	--gear-4-accent: #9a2622;
}

.gears-blur {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--header-height);
	height: calc(100% - var(--header-height));
	pointer-events: none;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	z-index: calc(var(--z-index-sticky) + 2);
}

/* Mobile - compact and extends beyond top */
@media (max-width: 767px) {
	.gears-wrapper {
		width: clamp(260px, 55vw, 420px);
		height: clamp(260px, 55vw, 420px);
		top: -15%; /* Extends above viewport */
		right: 0;
	}
}

/* Tablet - medium size */
@media (min-width: 768px) {
	.gears-wrapper {
		width: clamp(320px, 42vw, 520px);
		height: clamp(320px, 42vw, 520px);
		opacity: 0.3;
		top: -15%;
		right: 0;
	}
}

/* Desktop - medium size */
@media (min-width: 1024px) {
	.gears-wrapper {
		width: clamp(420px, 38vw, 680px);
		height: clamp(420px, 38vw, 680px);
		opacity: 0.1;
		top: -15%;
		right: 0;
	}
}

/* Gears Container */
#gears {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Gear Container - optimized for performance */
.gear-container {
	position: absolute;
	margin: 0;
	padding: 0;
	will-change: transform;
	pointer-events: none;
}

/* SVG Gear Elements */
.svggear {
	display: block;
	width: 100%;
	height: 100%;
}

/* Gear Color Scheme - using brand colors */
.gear-container[data-gear-index="0"] {
	--gear-color: var(--gear-0);
	--gear-accent: var(--gear-0-accent);
}

.gear-container[data-gear-index="1"] {
	--gear-color: var(--gear-1);
	--gear-accent: var(--gear-1-accent);
}

.gear-container[data-gear-index="2"] {
	--gear-color: var(--gear-2);
	--gear-accent: var(--gear-2-accent);
}

.gear-container[data-gear-index="3"] {
	--gear-color: var(--gear-3);
	--gear-accent: var(--gear-3-accent);
}

.gear-container[data-gear-index="4"] {
	--gear-color: var(--gear-4);
	--gear-accent: var(--gear-4-accent);
}

/* Axle colors - creates the "hole" and "ring" effect in gear centers */
/* ar1 is used in the SVG mask - leave as-is (black for mask) */
.ar1 {
	/* Do not override - used by SVG mask */
}

/* ar2 circles - inner ring with gear-specific colors */
.ar2 {
	fill: var(--gear-accent, #1b2c3c);
	/* Default dark blue from SVG */
}

/* Gear stroke styling */
.gear {
	fill: var(--gear-color, #ddd);
	stroke: var(--gear-color, #444);
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Old background positioning removed - now using header positioning */

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
	.ar2 {
		/* Keep darker shades in dark mode */
		opacity: 0.9;
	}
}

/* Disable animation for reduced motion */
@media (prefers-reduced-motion: reduce) {
	#gears,
	.gear-container {
		animation: none !important;
		transform: none !important;
	}
}