/**
 * Scroll Crossfade — inverse mask-image wipe + PHP-rendered hero spacer (Chunk 30 Bugfixes 2)
 *
 * @package celeste_Theme
 * @since   2.28.0
 */

/* Shared scroll/mask variables + inline scrub */
.celeste-crossfade {
	--scroll-progress: 0;
	--scroll-progress-top: 0;
	--wipe-feather: 15%;
	--wipe-pos: clamp(-20%, calc((var(--scroll-progress-top) - 0.10) * 350% - 20%), 120%);
	width: 100%;
	display: grid;
	place-items: center;
	align-content: var(--cf-align, center);
	flex: 1;
}

/* Pinned/Hero — Phantom Tracker syncs perfectly with 50vh spacer */
.celeste-crossfade[data-crossfade-behavior="pinned"] {
	--wipe-pos: clamp(-20%, calc(var(--scroll-progress) * 420% - 20%), 120%);
}

/* Hero wrapper — CSS-first sticky + flex isolation */
.celeste-crossfade-hero-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	position: sticky;
	top: var(--celeste-header-spacing, 0px);
	min-height: calc(100vh - var(--celeste-header-spacing, 0px));
	min-height: calc(100dvh - var(--celeste-header-spacing, 0px));
	overflow: visible;
	align-self: flex-start !important;
}

/* Overflow fix — CSS :has() (replaces JS fixOverflowAncestors) */
.vc_row:has(.celeste-crossfade[data-crossfade-behavior="pinned"]),
.vc_row:has(.celeste-crossfade[data-crossfade-behavior="pinned"]) > .vc_column_container,
.vc_row:has(.celeste-crossfade[data-crossfade-behavior="pinned"]) .vc_column_inner,
.vc_row:has(.celeste-crossfade[data-crossfade-behavior="pinned"]) .wpb_column,
.vc_row:has(.celeste-crossfade[data-crossfade-behavior="pinned"]) .wpb_wrapper {
	overflow: visible !important;
}

.celeste-crossfade-tracker {
	position: absolute;
	top: calc(100vh - var(--celeste-header-spacing, 0px));
	left: 0;
	width: 100%;
	height: 50vh;
	pointer-events: none;
	visibility: hidden;
}

.celeste-crossfade-spacer {
	display: block;
	width: 100%;
	height: 50vh;
	pointer-events: none;
}

@media (max-width: 767px) {
	.celeste-crossfade-hero-wrapper[data-crossfade-mobile-disable="1"] {
		position: static !important;
		min-height: auto !important;
	}

	.celeste-crossfade-spacer[data-crossfade-mobile-disable="1"] {
		display: none !important;
	}
}

/* Both layers — perfect stack */
.celeste-crossfade__layer {
	grid-area: 1 / 1;
	width: 100%;
	min-width: 0;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Initial layer — fades out at the wipe line; non-interactive */
.celeste-crossfade__layer--initial {
	z-index: 2;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(135deg, transparent calc(var(--wipe-pos) - var(--wipe-feather)), #000 calc(var(--wipe-pos) + var(--wipe-feather)));
	mask-image: linear-gradient(135deg, transparent calc(var(--wipe-pos) - var(--wipe-feather)), #000 calc(var(--wipe-pos) + var(--wipe-feather)));
}

/* Reveal layer — mathematically inverted mask */
.celeste-crossfade__layer--reveal {
	z-index: 1;
	-webkit-mask-image: linear-gradient(135deg, #000 calc(var(--wipe-pos) - var(--wipe-feather)), transparent calc(var(--wipe-pos) + var(--wipe-feather)));
	mask-image: linear-gradient(135deg, #000 calc(var(--wipe-pos) - var(--wipe-feather)), transparent calc(var(--wipe-pos) + var(--wipe-feather)));
}

@media (prefers-reduced-motion: reduce) {
	.celeste-crossfade__layer--initial {
		-webkit-mask-image: none;
		mask-image: none;
		opacity: 0;
	}

	.celeste-crossfade__layer--reveal {
		-webkit-mask-image: none;
		mask-image: none;
	}
}