/* Pixelz360 blob animation — matches /blob-animation/ reference */

.px-blob-animation,
.px-blob-animation.hero-free {
	position: relative;
	overflow: hidden;
	min-height: clamp(560px, 88vh, 860px);
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
}

.px-blob-animation .blob-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

.px-blob-animation .blob-handles {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.px-blob-animation .blob-handles .h {
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 50%;
	pointer-events: auto;
	touch-action: none;
	cursor: grab;
	will-change: transform;
}

.px-blob-animation .blob-handles .h:active {
	cursor: grabbing;
}

.px-blob-animation .hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	pointer-events: none;
}

.px-blob-animation .hero-inner a,
.px-blob-animation .hero-inner button {
	pointer-events: auto;
}

.px-blob-animation .hero-copy {
	max-width: 640px;
	padding: clamp(48px, 9vw, 90px) clamp(16px, 4vw, 28px);
}

.px-blob-animation .free-hint {
	position: absolute;
	bottom: 14px;
	right: 14px;
	z-index: 3;
	font-family: ui-monospace, monospace;
	font-size: 11px;
	color: #55554f;
	background: rgba(255, 255, 255, 0.88);
	border: 1px solid #e4e3dc;
	padding: 5px 10px;
	border-radius: 999px;
	pointer-events: none;
}

/* Elementor hero overlay — fill parent hero container, sit behind content */
.px-blob-animation--bare {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	display: block;
	z-index: 1;
}

.elementor-widget-shortcode.home-blob-animation {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 1 !important;
	pointer-events: none;
}

.elementor-widget-shortcode.home-blob-animation .elementor-shortcode {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.elementor-widget-shortcode.home-blob-animation .px-blob-animation--bare {
	pointer-events: auto;
}

.e-con.e-child:has(.home-blob-animation) {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 1 !important;
	pointer-events: none;
}

.e-con.e-child:has(.home-blob-animation) .px-blob-animation--bare {
	pointer-events: auto;
}