/*
 * Gradual Blur for Elementor
 * Base structural CSS. Per-layer mask/blur styles are injected inline by
 * assets/js/gradual-blur.js, mirroring the original React Bits component.
 */

.gradual-blur-widget {
	pointer-events: none;
	isolation: isolate;
}

.gradual-blur-parent {
	position: absolute;
}

.gradual-blur-page {
	position: fixed !important;
}

.gradual-blur-widget[data-position="top"],
.gradual-blur-widget[data-position="bottom"] {
	left: 0;
	right: 0;
	height: var( --gb-thickness, 6rem );
	width: var( --gb-cross-size, 100% );
}

.gradual-blur-widget[data-position="left"],
.gradual-blur-widget[data-position="right"] {
	top: 0;
	bottom: 0;
	width: var( --gb-thickness, 6rem );
	height: var( --gb-cross-size, 100% );
}

.gradual-blur-widget[data-position="top"] {
	top: 0;
}

.gradual-blur-widget[data-position="bottom"] {
	bottom: 0;
}

.gradual-blur-widget[data-position="left"] {
	left: 0;
}

.gradual-blur-widget[data-position="right"] {
	right: 0;
}

.gradual-blur-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.gradual-blur-inner > div {
	position: absolute;
	inset: 0;
}

@supports not ( backdrop-filter: blur( 1px ) ) {
	.gradual-blur-inner > div {
		background: var( --gb-fallback-color, rgba( 0, 0, 0, 0.3 ) );
		opacity: 0.5;
	}
}