/**
 * AAE / GSAP pin + ScrollSmoother compatibility
 *
 * Elementor parents often use overflow:hidden. With ScrollSmoother, pins use
 * transforms — overflow:hidden on an ancestor clips the pinned content mid-scroll
 * (visible as cards “cut” across section backgrounds). Also common on mobile.
 */

/* Any container that wraps a GSAP pin-spacer must not clip the pin. */
.e-con:has(> .pin-spacer),
.elementor-element:has(> .pin-spacer),
.pin-benefits,
.pin-benefits.e-con {
	overflow: visible !important;
}

/* Keep pin spacers from inheriting clipped stacking contexts. */
.pin-spacer {
	overflow: visible !important;
}

/* While AAE marks a pin as translating, avoid ancestor clip fights. */
.aae-is-translating,
.aae-pro-sticky-active {
	overflow: visible !important;
}

/* Elementor entrance animations never trip inside a pin — keep those nodes visible. */
.pin-spacer .elementor-invisible,
.aae-pro-sticky-active .elementor-invisible {
	visibility: visible !important;
}

/*
 * After the first play, strip Animate.css so GSAP pin/sticky transforms
 * cannot restart fadeInUp (and similar) on every scroll.
 */
.pin-spacer .elementor-element.tt-entrance-done,
.aae-pro-sticky-active .elementor-element.tt-entrance-done,
.pin-area .elementor-element.tt-entrance-done,
.elementor-sticky .elementor-element.tt-entrance-done {
	animation: none !important;
	visibility: visible !important;
}

/*
 * iOS: overflow-x:hidden on #smooth-wrapper computes overflow-y:auto and turns
 * the wrapper into a nested scroller. Until ScrollSmoother is ready (or if it
 * is off on mobile), the first swipe after load does nothing.
 * Keep native document scroll on touch / tablet.
 */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
	html:not(.elementor-editor-active) #smooth-wrapper,
	body:not(.elementor-editor-active):not(.elementor-editor-preview) #smooth-wrapper {
		position: static !important;
		overflow: visible !important;
		height: auto !important;
		width: auto !important;
		max-width: 100% !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		bottom: auto !important;
		transform: none !important;
	}

	html:not(.elementor-editor-active) #smooth-content,
	body:not(.elementor-editor-active):not(.elementor-editor-preview) #smooth-content {
		transform: none !important;
		overflow: visible !important;
		height: auto !important;
		width: auto !important;
		max-width: 100% !important;
	}

	/*
	 * Native document scroll lives on html (overflow visible).
	 * overflow-x on html computes overflow-y:auto and iOS nested-scrolls
	 * the viewport — flick dies. Body can clip X: it is height:auto so
	 * overflow-y:auto has nothing to scroll, and it stops sideways pan
	 * from cube/marquee/GSAP from() without clipping the MENU (do not
	 * overflow-x clip .elementor — that shrinks the pill panel).
	 */
	html:not(.elementor-editor-active) {
		overflow: visible !important;
		width: 100%;
		max-width: 100%;
		height: auto !important;
		position: static !important;
	}

	body:not(.elementor-editor-active):not(.elementor-editor-preview):not(.wcf-preloader-active):not(.willows-preloader-active) {
		overflow-x: clip !important;
		overflow-y: visible !important;
		height: auto !important;
		position: static !important;
		overscroll-behavior-x: none;
	}

	#page,
	#content,
	.elementor {
		max-width: 100%;
	}

	/* Keep horizontal carousels swipeable. */
	.swiper,
	.swiper-wrapper {
		touch-action: pan-x pan-y;
	}
}