/**
 * ETheme semantic section backgrounds.
 * Loaded after template styles so background ownership is deterministic.
 */

.eth-section--bg-none {
	background: transparent;
	background-image: none;
}

.eth-section--bg-surface {
	background: var(--eth-bg-surface);
}

.eth-section--bg-muted {
	background: var(--eth-bg-muted);
}

.eth-section--bg-brand {
	background:
		radial-gradient(85% 70% at 12% -5%, color-mix(in srgb, var(--eth-primary) 7%, transparent), transparent 48%),
		radial-gradient(75% 60% at 95% 15%, color-mix(in srgb, var(--eth-tertiary) 6%, transparent), transparent 50%),
		var(--eth-bg-surface);
}

.eth-module--bg-soft,
.eth-hero.eth-hero--bg-soft {
	background:
		radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--eth-tertiary) 10%, transparent), transparent 28rem),
		radial-gradient(circle at 8% 88%, color-mix(in srgb, var(--eth-primary) 8%, transparent), transparent 26rem),
		linear-gradient(160deg, var(--eth-bg-surface), color-mix(in srgb, var(--eth-primary) 4%, var(--eth-bg-surface)));
}

.eth-module--bg-accent,
.eth-hero.eth-hero--bg-accent {
	background:
		radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--eth-secondary) 9%, transparent), transparent 24rem),
		radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--eth-tertiary) 9%, transparent), transparent 26rem),
		linear-gradient(135deg, color-mix(in srgb, var(--eth-primary) 7%, var(--eth-bg-surface)), color-mix(in srgb, var(--eth-secondary) 4%, var(--eth-bg-surface)));
}

.eth-module--bg-sunset,
.eth-hero.eth-hero--bg-sunset {
	background:
		radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--eth-secondary) 14%, transparent), transparent 26rem),
		radial-gradient(circle at 8% 82%, color-mix(in srgb, var(--eth-primary) 7%, transparent), transparent 24rem),
		linear-gradient(165deg, color-mix(in srgb, var(--eth-secondary) 6%, var(--eth-bg-surface)), var(--eth-bg-surface));
}

.eth-module--bg-cool,
.eth-hero.eth-hero--bg-cool {
	background:
		radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--eth-tertiary) 12%, transparent), transparent 28rem),
		radial-gradient(circle at 12% 85%, color-mix(in srgb, var(--eth-primary) 7%, transparent), transparent 24rem),
		linear-gradient(170deg, color-mix(in srgb, var(--eth-tertiary) 5%, var(--eth-bg-surface)), var(--eth-bg-surface));
}

/* Per-module values are emitted by the Customizer as --eth-section-gradient-* vars. */
.eth-module--bg-custom-gradient,
.eth-hero.eth-hero--bg-custom-gradient {
	background: linear-gradient(
		var(--eth-section-gradient-angle, 135deg),
		var(--eth-section-gradient-start, var(--eth-bg-surface)),
		var(--eth-section-gradient-end, color-mix(in srgb, var(--eth-primary) 10%, var(--eth-bg-surface)))
	);
}