/* ═══════════════════════════════════════════════
 * Valley Background Fade
 * Add CSS class `valley-bg-fade` to any Elementor section.
 *
 * In Elementor on that section:
 *   • Background tab          → set the "FROM" image/color (visible at top)
 *   • Background Overlay tab  → set the "TO" image/color (visible at bottom)
 *
 * As the user scrolls through the section, the overlay fades from
 * opacity 0 → 1, revealing the second background. Both backgrounds are
 * editable in Elementor's UI — no CSS edits needed to swap photos.
 * ═══════════════════════════════════════════════ */

/* Override Elementor's inline opacity on the overlay. */
.valley-bg-fade > .elementor-background-overlay, .valley-bg-fade .elementor-background-overlay {
	opacity: 0 !important;
	transition: opacity 60ms linear;
	will-change: opacity;
}

/* Modern browsers (Chrome/Edge 115+, Safari 26+): pure-CSS scroll-driven animation. */
@supports (animation-timeline: view()) {
	.valley-bg-fade > .elementor-background-overlay, .valley-bg-fade .elementor-background-overlay {
		animation: valley-bg-fade-in linear both !important;
		animation-range: entry 0% exit 100%;
	}
}

@keyframes valley-bg-fade-in {
	from {
		opacity: 0;
	}
	
	to {
		opacity: 1;
	}
}