#iao-animated-background {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	/* Base background (moved from ::before) */
	background-color: var(--iao-abg-bg-color, inherit);
	background-image: var(--iao-abg-bg-image, inherit);
	background-repeat: var(--iao-abg-bg-repeat, inherit);
	background-size: var(--iao-abg-bg-size, inherit);
	background-position: var(--iao-abg-bg-position, inherit);
	background-attachment: var(--iao-abg-bg-attachment, inherit);
	background-origin: var(--iao-abg-bg-origin, inherit);
	background-clip: var(--iao-abg-bg-clip, inherit);
}

/* Keep Elementor content above the overlay. */
body.iao-animated-bg .elementor,
body.iao-animated-bg #page,
body.iao-animated-bg #content {
	position: relative;
	z-index: 1;
}

/* Ensure fixed/sticky headers stay above the overlay (menu visibility on scroll). */
body.iao-animated-bg header,
body.iao-animated-bg #masthead,
body.iao-animated-bg .site-header,
body.iao-animated-bg .elementor-location-header {
	position: relative;
	z-index: 1000;
}

/* Remove any sticky header shadow/blur on animated-bg pages. */
body.iao-animated-bg {
	--iao-sticky-header-shadow: none;
	--iao-sticky-header-blur: 0px;
}

body.iao-animated-bg .iao-sticky-header.iao-sticky-header--visible,
body.iao-animated-bg .iao-sticky-header-compact.iao-sticky-header--visible,
body.iao-animated-bg header.elementor-location-header,
body.iao-animated-bg .sub-nav-wrapper {
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* Force submenu background to match header exactly (only when we have a valid header bg). */
body.iao-animated-bg.iao-abg-has-header-bg .sub-nav-wrapper {
	background-color: var(--iao-abg-header-bg) !important;
}

#iao-animated-background::before,
#iao-animated-background::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

#iao-animated-background::before {
	/*
	 * Highlight layer (min):
	 * - acts ONLY on symbols (pattern has transparency)
	 * - uses the "min highlight color" derived from page bg (JS sets it)
	 * - revealed by vertical-bands noise mask
	 */
	background-image: var(--iao-abg-bg-image, none);
	background-repeat: var(--iao-abg-bg-repeat, repeat);
	background-size: var(--iao-abg-bg-size, auto);
	background-position: var(--iao-abg-bg-position, 0 0);

	opacity: calc(var(--iao-abg-overlay-opacity, 0.25) * var(--iao-abg-start-alpha, 1));
	transition: opacity 900ms ease;
	filter:
		invert(1)
		drop-shadow(0 0 0 var(--iao-abg-highlight-min-color, rgba(255,255,255,0.35)))
		/* no blur here: keep symbols sharp; softness comes from the noise bands */
		blur(0px);
	mix-blend-mode: screen;

	-webkit-mask-image: var(--iao-abg-noise-image);
	mask-image: var(--iao-abg-noise-image);
	-webkit-mask-mode: luminance;
	mask-mode: luminance;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	-webkit-mask-size: var(--iao-abg-noise-size, 120px 120px);
	mask-size: var(--iao-abg-noise-size, 120px 120px);
	-webkit-mask-position: var(--iao-abg-noise-start-x, 0px) 0;
	mask-position: var(--iao-abg-noise-start-x, 0px) 0;

	animation: iao-abg-noise var(--iao-abg-noise-duration, 1.2s) linear infinite;
	will-change: -webkit-mask-position, mask-position;
}

#iao-animated-background::after {
	/*
	 * Highlight layer (max):
	 * - pushes symbols towards the final tint color
	 * - uses a "strong" noise mask so only peaks reach the max tint
	 */
	background-image: var(--iao-abg-bg-image, none);
	background-repeat: var(--iao-abg-bg-repeat, repeat);
	background-size: var(--iao-abg-bg-size, auto);
	background-position: var(--iao-abg-bg-position, 0 0);

	opacity: calc(var(--iao-abg-overlay-opacity, 0.25) * 0.85 * var(--iao-abg-start-alpha, 1));
	transition: opacity 900ms ease;
	filter:
		invert(1)
		brightness(var(--iao-abg-brightness, 2.2))
		contrast(var(--iao-abg-contrast, 1.1))
		drop-shadow(0 0 0 var(--iao-abg-tint-color, #fff))
		/* no blur here: keep symbols sharp; softness comes from the noise bands */
		blur(0px);
	mix-blend-mode: screen;

	-webkit-mask-image: var(--iao-abg-noise-image-strong, var(--iao-abg-noise-image));
	mask-image: var(--iao-abg-noise-image-strong, var(--iao-abg-noise-image));
	-webkit-mask-mode: luminance;
	mask-mode: luminance;
	-webkit-mask-repeat: repeat;
	mask-repeat: repeat;
	-webkit-mask-size: var(--iao-abg-noise-size, 120px 120px);
	mask-size: var(--iao-abg-noise-size, 120px 120px);
	-webkit-mask-position: var(--iao-abg-noise-start-x, 0px) 0;
	mask-position: var(--iao-abg-noise-start-x, 0px) 0;

	animation: iao-abg-noise var(--iao-abg-noise-duration, 1.2s) linear infinite;
	will-change: -webkit-mask-position, mask-position;
}

/* Do NOT override header/subnav colors here.
 * If the header appears different, it's usually caused by theme sticky effects
 * (blur/shadow/background) – handle those in the header CSS itself or via Elementor.
 */

@keyframes iao-abg-noise {
	from {
		-webkit-mask-position: var(--iao-abg-noise-start-x, 0px) 0;
		mask-position: var(--iao-abg-noise-start-x, 0px) 0;
	}
	to {
		/* Seamless loop: shift exactly by one tile size, horizontally only. */
		-webkit-mask-position: calc(var(--iao-abg-noise-start-x, 0px) + (var(--iao-abg-noise-size-px, 120px) * var(--iao-abg-noise-dir, 1))) 0;
		mask-position: calc(var(--iao-abg-noise-start-x, 0px) + (var(--iao-abg-noise-size-px, 120px) * var(--iao-abg-noise-dir, 1))) 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#iao-animated-background::after {
		animation: none;
	}
}