/*
 * Motion gradient ("aurora"): slow-moving blurred color fields behind a
 * section. Add the class sal-aurora to any Elementor container (Advanced →
 * CSS Classes). sal-aurora--soft is a quieter version for content sections.
 * Colors follow the site's brand colors.
 */

.sal-aurora,
.sal-aurora-heroes .sal-page-hero {
	--_a1: var(--sal-primary, #4F6BFF);
	--_a2: color-mix(in srgb, var(--sal-primary, #4F6BFF) 55%, #B04CFF);
	--_a3: color-mix(in srgb, var(--sal-primary, #4F6BFF) 40%, #18C8D8);
	--_a4: var(--sal-secondary, #F2B33D);
	--_strength: 1;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--sal-bg, #07080F);
	background-image:
		radial-gradient(38% 52% at 20% 30%, color-mix(in srgb, var(--_a1) calc(42% * var(--_strength)), transparent), transparent 70%),
		radial-gradient(34% 46% at 80% 20%, color-mix(in srgb, var(--_a2) calc(38% * var(--_strength)), transparent), transparent 70%),
		radial-gradient(40% 50% at 70% 85%, color-mix(in srgb, var(--_a3) calc(30% * var(--_strength)), transparent), transparent 70%),
		radial-gradient(26% 34% at 30% 90%, color-mix(in srgb, var(--_a4) calc(14% * var(--_strength)), transparent), transparent 70%);
	background-repeat: no-repeat;
	background-size: 160% 160%, 170% 170%, 180% 180%, 150% 150%;
	background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%;
	animation: sal-aurora 22s ease-in-out infinite alternate;
}
.sal-aurora--soft { --_strength: .55; }

@keyframes sal-aurora {
	0%   { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
	33%  { background-position: 40% 30%, 60% 40%, 70% 60%, 30% 70%; }
	66%  { background-position: 80% 10%, 20% 70%, 40% 90%, 70% 40%; }
	100% { background-position: 100% 60%, 0% 100%, 0% 40%, 100% 0%; }
}

/* A faint grid of light over the gradient for depth. */
.sal-aurora::after,
.sal-aurora-heroes .sal-page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(color-mix(in srgb, var(--sal-text, #fff) 4%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--sal-text, #fff) 4%, transparent) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
	mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}

@media (prefers-reduced-motion: reduce) {
	.sal-aurora, .sal-aurora-heroes .sal-page-hero { animation: none; }
}