/* Ambient Background Shapes — decorative medical-motif SVGs scattered across
   each page's sections by ambient-shapes.js. Elementor's own widgets are
   already position:relative by default, so a shape sitting behind them in
   DOM order would simply be invisible under their opaque backgrounds — an
   explicit z-index:1 is what actually lifts the shape above that content.
   Colors come from the locked palette (PRIMARY #0048A8 / SECONDARY #0066CC)
   via `color`, read by the SVG's `currentColor`. The site is dark
   everywhere now, so mix-blend-mode:screen (not multiply — multiply only
   tints light backgrounds and nearly vanishes on dark ones) lightens these
   shapes against the dark navy sections, keeping them visible throughout.
   pointer-events:none keeps them from ever intercepting clicks despite
   sitting above the content layer. */

.amb-shape {
	position: absolute;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
	opacity: 0;
	mix-blend-mode: screen;
	color: var(--amb-color, #0048A8);
	transform: translateY(22px) scale(0.85) rotate(var(--amb-rot, 0deg));
	transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
		transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform, opacity;
}

.amb-shape svg {
	display: block;
	width: 100%;
	height: 100%;
}

.amb-shape.is-visible {
	opacity: var(--amb-opacity, 0.17);
	transform: translateY(0) scale(1) rotate(var(--amb-rot, 0deg));
}

/* Continuous slow ambient drift once revealed — layered on top of the
   scroll-parallax transform ambient-shapes.js applies via a CSS variable,
   so the two motions combine rather than fight. */
@media (prefers-reduced-motion: no-preference) {
	.amb-shape.is-visible {
		animation: amb-drift var(--amb-duration, 14s) ease-in-out infinite;
		animation-delay: var(--amb-delay, 0s);
	}
}

@keyframes amb-drift {
	0%, 100% {
		transform: translate(0, var(--amb-parallax, 0px)) scale(1) rotate(var(--amb-rot, 0deg));
	}
	25% {
		transform: translate(14px, calc(var(--amb-parallax, 0px) - 26px)) scale(1.08) rotate(calc(var(--amb-rot, 0deg) + 9deg));
	}
	50% {
		transform: translate(-10px, calc(var(--amb-parallax, 0px) - 40px)) scale(0.94) rotate(calc(var(--amb-rot, 0deg) - 7deg));
	}
	75% {
		transform: translate(16px, calc(var(--amb-parallax, 0px) - 18px)) scale(1.05) rotate(calc(var(--amb-rot, 0deg) + 11deg));
	}
}

@media (prefers-reduced-motion: reduce) {
	.amb-shape {
		transition: opacity 0.6s ease;
		transform: none !important;
		animation: none !important;
	}
	.amb-shape.is-visible {
		opacity: calc(var(--amb-opacity, 0.17) * 0.85);
	}
}

/* Keep shapes out of the way on narrow viewports — plenty of real content
   competing for space, and the sections are shorter so parallax reads oddly. */
@media (max-width: 600px) {
	.amb-shape {
		display: none;
	}
}