/**
 * Elementor Glassmorphic Scroll Blur - Frontend Styles
 * Optimized for performance and smooth transitions.
 */

/* Hide the data-attribute carrier on the frontend */
.elementor-scroll-blur-controller-data {
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	height: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* 
 * Base optimization for targeted container.
 * Added via JS immediately upon load to enable GPU acceleration.
 */
.has-scroll-blur {
	will-change: background-color, backdrop-filter, box-shadow, border-color;
	/* Force hardware acceleration (GPU) for butter-smooth scrolling and blur transition */
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}

/* Style for Elementor editor placeholder */
.elementor-scroll-blur-placeholder {
	margin: 10px 0;
	transition: all 0.3s ease;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.elementor-scroll-blur-placeholder code {
	background: rgba(0, 0, 0, 0.05);
	padding: 2px 6px;
	border-radius: 4px;
	font-family: monospace;
	color: #e11d48;
}