/* BridgeWP backgrounds & decorations */

.bridgewp-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.bridgewp-bg + *,
.bridgewp-design > .bridgewp-section-inner,
.bridgewp-design > .bridgewp-design__inner {
	position: relative;
	z-index: 1;
}

.bridgewp-bg__color,
.bridgewp-bg__gradient,
.bridgewp-bg__image,
.bridgewp-bg__pattern,
.bridgewp-bg__overlay,
.bridgewp-bg__blobs,
.bridgewp-bg__glass,
.bridgewp-bg__video-wrap {
	position: absolute;
	inset: 0;
}

.bridgewp-bg__gradient--brand-soft {
	background: linear-gradient(var(--bridge-bg-angle, 135deg), color-mix(in srgb, var(--bridge-color-brand-primary) 18%, transparent), color-mix(in srgb, var(--bridge-color-surface-muted) 80%, white));
}
.bridgewp-bg__gradient--brand-deep {
	background: linear-gradient(var(--bridge-bg-angle, 145deg), var(--bridge-color-brand-secondary), var(--bridge-color-brand-primary));
}
.bridgewp-bg__gradient--accent-soft {
	background: linear-gradient(var(--bridge-bg-angle, 120deg), color-mix(in srgb, var(--bridge-color-brand-accent) 22%, transparent), var(--bridge-color-surface-default));
}
.bridgewp-bg__gradient--forest-mist {
	background: linear-gradient(var(--bridge-bg-angle, 160deg), #1c3b2e, #3d5c4e 45%, #f6f4ef);
}
.bridgewp-bg__gradient--ivory-fade {
	background: linear-gradient(var(--bridge-bg-angle, 180deg), #f6f4ef, #d9d2c2);
}
.bridgewp-bg__gradient--sunset-muted {
	background: linear-gradient(var(--bridge-bg-angle, 135deg), color-mix(in srgb, var(--bridge-color-brand-accent) 35%, #f6f4ef), #f6f4ef);
}

.bridgewp-bg__gradient--type-radial {
	background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--bridge-color-brand-accent) 28%, transparent), transparent 55%),
		radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--bridge-color-brand-primary) 22%, transparent), var(--bridge-color-surface-default));
}
.bridgewp-bg__gradient--type-conic {
	background: conic-gradient(from var(--bridge-bg-angle, 0deg) at 50% 50%, color-mix(in srgb, var(--bridge-color-brand-primary) 30%, transparent), color-mix(in srgb, var(--bridge-color-brand-accent) 25%, transparent), transparent);
}

.bridgewp-bg__overlay--muted { opacity: var(--bridge-opacity-muted); }
.bridgewp-bg__overlay--soft { opacity: var(--bridge-opacity-soft); }
.bridgewp-bg__overlay--solid { opacity: var(--bridge-opacity-solid); }

.bridgewp-bg__pattern--dots {
	background-image: radial-gradient(circle, color-mix(in srgb, var(--bridge-color-brand-primary) 18%, transparent) 1px, transparent 1.5px);
	background-size: 14px 14px;
}
.bridgewp-bg__pattern--grid {
	background-image:
		linear-gradient(color-mix(in srgb, var(--bridge-color-border-default) 70%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--bridge-color-border-default) 70%, transparent) 1px, transparent 1px);
	background-size: 28px 28px;
}
.bridgewp-bg__pattern--diagonals {
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, color-mix(in srgb, var(--bridge-color-brand-primary) 8%, transparent) 10px, color-mix(in srgb, var(--bridge-color-brand-primary) 8%, transparent) 11px);
}
.bridgewp-bg__pattern--noise {
	opacity: 0.08;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bridgewp-bg__pattern--waves {
	background:
		radial-gradient(120% 80% at 50% 120%, color-mix(in srgb, var(--bridge-color-brand-primary) 15%, transparent), transparent 60%),
		radial-gradient(100% 60% at 20% 100%, color-mix(in srgb, var(--bridge-color-brand-accent) 12%, transparent), transparent 55%);
}

.bridgewp-bg__blobs::before,
.bridgewp-bg__blobs::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(var(--bridge-blur-large, 24px));
	opacity: 0.35;
}
.bridgewp-bg__blobs::before {
	width: 42%;
	height: 55%;
	top: -10%;
	left: -8%;
	background: var(--bridge-color-brand-accent);
}
.bridgewp-bg__blobs::after {
	width: 48%;
	height: 50%;
	bottom: -15%;
	right: -10%;
	background: var(--bridge-color-brand-primary);
}

.bridgewp-bg__glass {
	backdrop-filter: blur(var(--bridge-blur-medium, 12px));
	background: color-mix(in srgb, var(--bridge-color-surface-default) 55%, transparent);
	border: 1px solid color-mix(in srgb, var(--bridge-color-border-default) 60%, transparent);
}

.bridgewp-bg__poster,
.bridgewp-bg__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bridgewp-bg__video {
	position: absolute;
	inset: 0;
}

.bridgewp-bg__video-pause {
	pointer-events: auto;
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
	border: 0;
	border-radius: var(--bridge-radius-pill);
	padding: 0.45rem 0.85rem;
	background: color-mix(in srgb, var(--bridge-color-surface-inverse) 75%, transparent);
	color: var(--bridge-color-text-inverse);
	font-size: 0.8rem;
}

.bridgewp-bg__decoration--divider-top,
.bridgewp-bg__decoration--divider-bottom {
	height: 1px;
	left: 5%;
	right: 5%;
	background: var(--bridge-color-border-default);
}
.bridgewp-bg__decoration--divider-top { top: 0; bottom: auto; }
.bridgewp-bg__decoration--divider-bottom { bottom: 0; top: auto; }

.bridgewp-bg__decoration--curve-bottom {
	top: auto;
	height: 48px;
	background: var(--bridge-color-surface-default);
	clip-path: ellipse(55% 100% at 50% 100%);
}
.bridgewp-bg__decoration--angle-bottom {
	top: auto;
	height: 64px;
	background: var(--bridge-color-surface-default);
	clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
}
.bridgewp-bg__decoration--octagon-cut {
	clip-path: var(--bridge-shape-octagon);
	background: color-mix(in srgb, var(--bridge-color-brand-primary) 8%, transparent);
}

@media (max-width: 767px) {
	.bridgewp-bg__image {
		background-attachment: scroll !important;
	}
	.bridgewp-bg__video {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bridgewp-bg__video {
		display: none;
	}
}

@media (prefers-reduced-data: reduce) {
	.bridgewp-bg__video {
		display: none;
	}
}