/* ═══════════════════════════════════════════════
 * Valley Header — sticky glass effect
 * Applies a dark, frosted-glass background to ANY Elementor section
 * (or container) that has scrolled past its sticky-effects threshold.
 *
 * Elementor configuration on the section:
 *   Advanced → Motion Effects → Sticky      = Top
 *   Advanced → Motion Effects → Effects Offset = 100  (or your taste)
 *
 * Elementor toggles two classes natively as the user scrolls:
 *   .elementor-sticky                  — element has sticky enabled
 *   .elementor-sticky--effects         — scroll has passed the effects offset
 *
 * No JS required.
 * ═══════════════════════════════════════════════ */

/* Smooth fade between transparent and glass states. Apply to any Elementor
 * section/container with the sticky class so the transition is pre-armed. */
.elementor-section.elementor-sticky,
.e-con.elementor-sticky {
	transition:
		background-color 280ms ease,
		-webkit-backdrop-filter 280ms ease,
		backdrop-filter 280ms ease,
		box-shadow 280ms ease,
		border-color 280ms ease;
}

/* Effects state — clean frosted-glass overlay once scroll passes the offset.
 * Very translucent slight-navy tint + strong blur reads as glass on most
 * backgrounds (light or dark hero). */
.elementor-section.elementor-sticky--effects,
.e-con.elementor-sticky--effects {
	background-color: rgba(20, 30, 50, 0.32) !important;
	background-image: none !important;
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	backdrop-filter: saturate(180%) blur(22px);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12);
	border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* When the parent sticky section enters effects state, also flatten any
 * inner column/container backgrounds so the glass shows through cleanly. */
.elementor-section.elementor-sticky--effects > .elementor-container > .elementor-column > .elementor-widget-wrap,
.elementor-section.elementor-sticky--effects > .elementor-container,
.e-con.elementor-sticky--effects > .e-con-inner {
	background-color: transparent !important;
	background-image: none !important;
}