/* ============================================================
   Scroll Background Transition (JS-Pinned)
   Panel Haus Elementor — crossfade with JS-based fixed pinning.
   ============================================================ */

/* ── Pin-spacer wrapper ──
   Created by JS. Provides 2× the section height:
   1× for the section itself, 1× scroll buffer for the crossfade. */
.ph-scroll-pin-spacer {
	position: relative;
	/* height set inline by JS */
}

/* ── Host section ── */
.ph-has-scroll-bg {
	overflow: hidden;
}

/* ── Overlay layer ── */
.ph-scroll-bg-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	background-repeat: no-repeat;
	pointer-events: none;
	will-change: opacity, transform;
}

/* ── Color overlay on top of the image ── */
.ph-scroll-bg-color-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* ── Zoom variant ── */
.ph-scroll-bg-overlay--zoom {
	transform: scale(1);
	will-change: opacity, transform;
}

/* ── Content stays ABOVE the overlay ── */

.ph-has-scroll-bg > .elementor-container {
	position: relative;
	z-index: 1;
}

.ph-has-scroll-bg > .e-con-inner {
	position: relative;
	z-index: 1;
}

.ph-has-scroll-bg > .elementor-widget-wrap {
	position: relative;
	z-index: 1;
}

.ph-has-scroll-bg > .elementor-background-overlay {
	z-index: 0;
}

/* ── Elementor editor preview ── */
.elementor-editor-active .ph-scroll-bg-overlay {
	opacity: 0.35;
	outline: 2px dashed rgba(107, 79, 58, 0.4);
	outline-offset: -2px;
}

.elementor-editor-active .ph-scroll-bg-overlay::after {
	content: 'Scroll → image';
	position: absolute;
	top: 8px;
	right: 8px;
	font-family: system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	color: #fff;
	background: rgba(107, 79, 58, 0.75);
	padding: 3px 10px;
	border-radius: 4px;
	z-index: 2;
	letter-spacing: 0.03em;
}

/* ── Content fade ── */
.ph-scroll-content-fade > .elementor-container,
.ph-scroll-content-fade > .e-con-inner,
.ph-scroll-content-fade > .elementor-widget-wrap {
	will-change: opacity, transform;
}
