/**
 * CW background presets — Design Reference §04 (Background & Gradient System).
 * Wired from Elementor: Style → CW background presets (same hook order as Unlimited Elements).
 *
 * Tokens: design-tokens.css (--cw-bg, --cw-surface-*, --cw-accent-*).
 */

/* ——— Base preset shell ——— */
.elementor-element[class*="cw-bg-preset--"],
.elementor-element[class*="cw-bg-overlay--"] {
	position: relative;
	box-sizing: border-box;
}

/* ——— Demo hero ambiance (index.html: body gradients + fixed .bg-orb-1/2 + .bg-vignette + .bg-noise) ——— */
.cw-bg-preset--demo-hero {
	position: relative;
	isolation: isolate;
	background-color: var(--cw-bg);
	background-image:
		url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(
			ellipse 100% 100% at 50% 50%,
			transparent 40%,
			rgba(0, 0, 0, 0.2) 100%
		),
		radial-gradient(
			circle at 90% -10%,
			color-mix(in srgb, var(--cw-accent-secondary) 12%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-secondary) 4%, transparent) 40%,
			transparent 70%
		),
		radial-gradient(
			circle at -10% 40%,
			color-mix(in srgb, var(--cw-accent-primary) 8%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-primary) 3%, transparent) 40%,
			transparent 70%
		),
		radial-gradient(
			ellipse 80% 50% at 50% 0%,
			color-mix(in srgb, var(--cw-surface-2) 50%, transparent) 0%,
			transparent 55%
		),
		radial-gradient(
			ellipse 70% 70% at 100% 30%,
			color-mix(in srgb, var(--cw-surface-2) 25%, transparent) 0%,
			transparent 50%
		),
		radial-gradient(
			ellipse 70% 70% at 0% 70%,
			color-mix(in srgb, var(--cw-surface-2) 20%, transparent) 0%,
			transparent 50%
		);
	/* Noise layer must repeat (demo-skin .bg-noise); no-repeat + 256px tile = one visible square top-left */
	background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
	background-size: 256px 256px, auto, auto, auto, auto, auto, auto;
	background-blend-mode: soft-light, normal, screen, screen, normal, normal, normal;
}

/*
 * iOS / demo-skin parity — same SVG noise + vignette + orb radials + body radials as
 * demo-hero, but noise is a separate ::before at opacity 0.015 (no soft-light blend).
 * Keeps grain consistent with demo-skin/index.html .bg-noise on WebKit.
 */
.cw-bg-preset--ios {
	position: relative;
	isolation: isolate;
	background-color: var(--cw-bg);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.cw-bg-preset--ios {
		background-image:
			radial-gradient(
				ellipse 100% 100% at 50% 50%,
				transparent 40%,
				rgba(0, 0, 0, 0.2) 100%
			),
			radial-gradient(
				circle at 90% -10%,
				color-mix(in srgb, var(--cw-accent-secondary) 12%, transparent) 0%,
				color-mix(in srgb, var(--cw-accent-secondary) 4%, transparent) 40%,
				transparent 70%
			),
			radial-gradient(
				circle at -10% 40%,
				color-mix(in srgb, var(--cw-accent-primary) 8%, transparent) 0%,
				color-mix(in srgb, var(--cw-accent-primary) 3%, transparent) 40%,
				transparent 70%
			),
			radial-gradient(
				ellipse 80% 50% at 50% 0%,
				color-mix(in srgb, var(--cw-surface-2) 50%, transparent) 0%,
				transparent 55%
			),
			radial-gradient(
				ellipse 70% 70% at 100% 30%,
				color-mix(in srgb, var(--cw-surface-2) 25%, transparent) 0%,
				transparent 50%
			),
			radial-gradient(
				ellipse 70% 70% at 0% 70%,
				color-mix(in srgb, var(--cw-surface-2) 20%, transparent) 0%,
				transparent 50%
			);
		background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
		background-blend-mode: normal, screen, screen, normal, normal, normal;
	}
}

.cw-bg-preset--ios::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border-radius: inherit;
	opacity: 0.015;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 256px 256px;
}

.elementor-section.cw-bg-preset--ios > .elementor-container,
.elementor-element.e-con.cw-bg-preset--ios > .e-con-inner {
	position: relative;
	z-index: 2;
}

/*
 * Video-aware layering — when Elementor's background-video container sits inside
 * a cw-bg-preset--ios element, lift the radial ambiance off the container itself
 * (where it would be hidden beneath the video at z-index:0) and repaint it on
 * ::after above the video. Content (.e-con-inner, z-index:2) still wins.
 * See: .cursor/reports/ANALYSIS-cw-hero-video-background-2026-04-20.md
 */
@supports selector(:has(*)) {
	.cw-bg-preset--ios:has(.elementor-background-video-container) {
		background-image: none;
	}

	.cw-bg-preset--ios:has(.elementor-background-video-container)::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		pointer-events: none;
		border-radius: inherit;
		background-image:
			radial-gradient(
				ellipse 100% 100% at 50% 50%,
				transparent 40%,
				rgba(0, 0, 0, 0.35) 100%
			),
			radial-gradient(
				circle at 90% -10%,
				color-mix(in srgb, var(--cw-accent-secondary) 18%, transparent) 0%,
				color-mix(in srgb, var(--cw-accent-secondary) 6%, transparent) 40%,
				transparent 70%
			),
			radial-gradient(
				circle at -10% 40%,
				color-mix(in srgb, var(--cw-accent-primary) 12%, transparent) 0%,
				color-mix(in srgb, var(--cw-accent-primary) 4%, transparent) 40%,
				transparent 70%
			),
			radial-gradient(
				ellipse 80% 50% at 50% 0%,
				color-mix(in srgb, var(--cw-surface-2) 60%, transparent) 0%,
				transparent 55%
			),
			radial-gradient(
				ellipse 70% 70% at 100% 30%,
				color-mix(in srgb, var(--cw-surface-2) 30%, transparent) 0%,
				transparent 50%
			),
			radial-gradient(
				ellipse 70% 70% at 0% 70%,
				color-mix(in srgb, var(--cw-surface-2) 25%, transparent) 0%,
				transparent 50%
			);
		background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
		background-blend-mode: normal, screen, screen, normal, normal, normal;
		/* Live-tunable in Elementor: Style → CW background presets → "Gradient overlay opacity (over video)". */
		opacity: var(--cw-bg-video-overlay-opacity, 1);
	}
}

/* ——— Body base (demo body { … rgb(--bg1) + 3 ellipses }) ——— */
.cw-bg-preset--body-radials {
	background:
		radial-gradient(
			ellipse 80% 50% at 50% 0%,
			color-mix(in srgb, var(--cw-surface-2) 50%, transparent) 0%,
			transparent 55%
		),
		radial-gradient(
			ellipse 70% 70% at 100% 30%,
			color-mix(in srgb, var(--cw-surface-2) 25%, transparent) 0%,
			transparent 50%
		),
		radial-gradient(
			ellipse 70% 70% at 0% 70%,
			color-mix(in srgb, var(--cw-surface-2) 20%, transparent) 0%,
			transparent 50%
		),
		var(--cw-bg);
}

/* ——— Trust strip premium ——— */
.cw-bg-preset--trust-strip {
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--cw-accent-primary) 3%, transparent) 0%,
		transparent 30%,
		transparent 70%,
		color-mix(in srgb, var(--cw-accent-secondary) 3%, transparent) 100%
	);
	background-color: color-mix(in srgb, var(--cw-surface-2) 88%, transparent);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ——— Footer premium ——— */
.cw-bg-preset--footer-premium {
	background: color-mix(in srgb, var(--cw-surface-2) 92%, transparent);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	box-sizing: border-box;
}

/* ——— Section premium depth (::before veil) ——— */
.cw-bg-preset--section-depth {
	isolation: isolate;
	overflow: hidden;
}

.cw-bg-preset--section-depth::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--cw-accent-secondary) 2%, transparent) 0%,
		transparent 45%,
		transparent 55%,
		color-mix(in srgb, var(--cw-accent-primary) 2%, transparent) 100%
	);
}

/* ——— Resource tile tints ——— */
.cw-bg-preset--resource-warm {
	background:
		radial-gradient(ellipse 80% 50% at 70% 20%, rgba(255, 255, 255, 0.04), transparent 50%),
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--cw-accent-primary) 22%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-primary) 8%, transparent) 42%,
			color-mix(in srgb, var(--cw-bg) 98%, transparent) 100%
		);
}

.cw-bg-preset--resource-cool {
	background:
		radial-gradient(ellipse 80% 50% at 70% 20%, rgba(255, 255, 255, 0.04), transparent 50%),
		linear-gradient(
			135deg,
			color-mix(in srgb, var(--cw-accent-secondary) 22%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-secondary) 8%, transparent) 42%,
			color-mix(in srgb, var(--cw-bg) 98%, transparent) 100%
		);
}

/* ——— Parallax card gradient (visible fill for sections; cards can override opacity in child CSS) ——— */
.cw-bg-preset--parallax-bg {
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--cw-accent-primary) 12%, transparent),
		color-mix(in srgb, var(--cw-accent-secondary) 12%, transparent)
	);
}

/* ——— Button-scale fills (usable on bands / CTAs) ——— */
.cw-bg-preset--nova-gradient-fill {
	background: linear-gradient(
		135deg,
		var(--cw-accent-primary) 0%,
		var(--cw-accent-secondary) 100%
	);
}

.cw-bg-preset--nova-flat {
	background: var(--cw-accent-primary);
}

/* ——— Ambient orbs (demo .bg-orb-1 / .bg-orb-2 as layered radials) ——— */
.cw-bg-preset--ambient-orbs {
	background:
		radial-gradient(
			circle at 90% -10%,
			color-mix(in srgb, var(--cw-accent-secondary) 12%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-secondary) 4%, transparent) 40%,
			transparent 70%
		),
		radial-gradient(
			circle at -10% 40%,
			color-mix(in srgb, var(--cw-accent-primary) 8%, transparent) 0%,
			color-mix(in srgb, var(--cw-accent-primary) 3%, transparent) 40%,
			transparent 70%
		),
		var(--cw-bg);
	background-repeat: no-repeat;
	background-blend-mode: screen, screen, normal;
}

/* ——— Legacy utility classes (Advanced → CSS class) ——— */
.cw-bg-surface-1 {
	background-color: var(--cw-surface-1);
}

.cw-bg-surface-2 {
	background-color: var(--cw-surface-2);
}

.cw-hero-gradient {
	background: linear-gradient(
		135deg,
		var(--cw-surface-1) 0%,
		var(--cw-bg) 45%,
		var(--cw-surface-2) 100%
	);
}

/* ——— Overlays (::after — compatible with section-depth ::before) ——— */
.elementor-element[class*="cw-bg-overlay--"] {
	isolation: isolate;
}

.elementor-element.cw-bg-overlay--vignette::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	background: radial-gradient(
		ellipse 100% 100% at 50% 50%,
		transparent 40%,
		rgba(0, 0, 0, 0.2) 100%
	);
}

.elementor-element.cw-bg-overlay--noise::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	opacity: 0.015;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 256px 256px;
}

.elementor-element.cw-bg-overlay--vignette-noise::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	opacity: 1;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(
			ellipse 100% 100% at 50% 50%,
			transparent 40%,
			rgba(0, 0, 0, 0.2) 100%
		);
	background-repeat: repeat, no-repeat;
	background-size: 256px 256px, auto;
	background-blend-mode: soft-light, normal;
}