/**
 * 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: hidden !important;
		overflow-x: clip !important;
		overflow-y: visible !important;
		height: auto !important;
		position: static !important;
		overscroll-behavior-x: none;
	}

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

	/*
	 * Prefer native vertical flick. Horizontal page pan is blocked by the
	 * browser instead of JS preventDefault / scrollTo (those kill iOS momentum).
	 */
	html:not(.elementor-editor-active),
	body:not(.elementor-editor-active):not(.elementor-editor-preview),
	#page,
	#content,
	#smooth-wrapper,
	#smooth-content {
		touch-action: pan-y;
		overscroll-behavior-x: none;
	}

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

	/*
	 * AAE testimonial / nested sliders use overflow:visible on the widget,
	 * so translated swiper slides expand document scrollWidth and iOS
	 * starts a 2-axis scroll (Iris overflow-x).
	 */
	[class*='aae--slider'],
	.wcf__slider-wrapper,
	.elementor-widget-n-carousel,
	.elementor-widget-nested-slider,
	.elementor-widget-wcf--testimonial,
	.elementor-widget-wcf--testimonial2,
	.elementor-widget-wcf--testimonial3,
	.elementor-widget-testimonial2,
	.elementor-widget-testimonial3 {
		overflow-x: hidden;
		max-width: 100%;
	}

	/* Local clips only — never overflow-x on html/.elementor (cube + MENU).
	 * iOS ignores overflow-x:clip when overflow-y is visible, and still pans
	 * from transformed descendants (marquee track, hover-box scale, PF previews)
	 * unless the widget uses overflow:hidden + contain:paint. */
	.tt-marquee,
	.tt-curve-portal-host,
	.tt-bubble-portal-host,
	.tt-bubble-portal,
	.tt-project-folders,
	.elementor-widget-treethemes-project-folders,
	.elementor-widget-treethemes-project-folders > .elementor-widget-container,
	.tt-hover-box,
	.elementor-widget-treethemes-hover-box,
	.elementor-widget-treethemes-hover-box > .elementor-widget-container {
		overflow: hidden;
		max-width: 100%;
		contain: paint;
		clip-path: inset(0);
		-webkit-clip-path: inset(0);
	}

	.tt-unwoven,
	.tt-unwoven__stage,
	.elementor-widget-treethemes-unwoven,
	.elementor-widget-treethemes-unwoven > .elementor-widget-container {
		overflow: hidden;
		max-width: 100%;
	}
}