/**
 * Testimonies fan scroll animation — layout rules.
 *
 * Every rule is gated behind `.kuaa-fan-active`, which script.js adds to
 * #testimonies only on desktop viewports (min-width: 765px) when the user
 * does not prefer reduced motion. Without JavaScript the section renders
 * exactly as before.
 */

/* Tall scroll track created by script.js around #testimonies. Its height
   (100vh + N * per-card distance) is what the visitor scrolls through while
   the section stays pinned. */
.kuaa-testimonies-fan-track {
	position: relative;
}

/* Pin the whole section (background included) for the duration of the
   track. `--min-height` overrides Elementor's 800px container min-height;
   overflow keeps the not-yet-arrived cards (translated below the viewport)
   from painting over the sections that follow. */
#testimonies.kuaa-fan-active {
	position: sticky;
	top: 0;
	height: 100vh;
	min-height: 800px;
	--min-height: 0px;
	overflow: hidden;
}

/* Stretch the column grid and the loop-grid widget to the pinned height so
   the fan can center itself vertically in the right column. The 80px
   compensates the widget container's 40px top/bottom margins. */
#testimonies.kuaa-fan-active > .e-con-inner {
	height: 100%;
	justify-content: center;
	/* The section's only grid row is auto-sized; make it fill the pinned
	   viewport so the left texts keep their space-between spread and the
	   fan can center vertically. */
	grid-template-rows: minmax(0, 1fr);
}

/* `width: 450px` alone lets the card overflow its grid track on narrow
   screens (a grid item's default `min-width: auto` refuses to shrink below
   its explicit width, so `max-width: 100%` never gets a chance to cap it).
   Driving the size from `width` instead makes it shrink with the track, capped
   at 450px on wide ones. */
#testimonies .testimony {
	width: 100%;
	max-width: 450px;
	min-width: 0;
}

/* The loop-item template's "Transform" hover effect (3D rotateX/rotateZ tilt)
   is meant for a desktop mouse hover; touch browsers trigger `:hover` on tap,
   flipping the card into an unreadable angle. It's paired with a desktop-only
   static rotate() (min-width: 768px in the widget's custom CSS), so disable
   it below that breakpoint, where cards render flat anyway. */
@media (max-width: 767px) {
	#testimonies .e-con:hover {
		transform: none !important;
	}
}

#testimonies.kuaa-fan-active .testimonies-slider {
	height: 100%;
}

#testimonies.kuaa-fan-active .testimonies-slider > .elementor-widget-container {
	height: calc(100% - 80px);
}

/* Collapse the loop grid into a positioning canvas: all cards occupy the
   same centered spot and overlap; script.js drives their transforms. */
#testimonies.kuaa-fan-active .elementor-loop-container {
	display: block;
	position: relative;
	height: 100%;
}

#testimonies.kuaa-fan-active .elementor-loop-container > .e-loop-item {
	position: absolute;
	top: 50%;
	left: 50%;
	/* width: 100%; */
	/* Pre-JS frame: keep cards parked below the viewport until the first
	   scripted update runs. */
	transform: translate(-50%, -50%) translateY(150vh);
	will-change: transform;
}

/* The loop-item template rotates the card (-10deg) and runs an Elementor
   entrance animation. The fan owns rotation and visibility, so neutralise
   both while active. */
#testimonies.kuaa-fan-active .elementor-loop-container .e-loop-item > .e-con {
	transform: none !important;
	animation: none !important;
	visibility: visible !important;
	opacity: 1 !important;
}

@media all and (min-width: 768px) {
	#testimonies .testimony-card {
		box-shadow: none !important;
	}

	#testimonies .testimony-card::before, #testimonies .testimony-card::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		pointer-events: none;
		border-radius: inherit;
	}

	#testimonies .testimony-card::before {
		top: 6px;
		left: 6px;
		background-color: #357B9F;
		z-index: -1;
	}

	#testimonies .testimony-card::after {
		top: 12px;
		left: 12px;
		background-color: rgba(0, 0, 0, 0.2);
		z-index: -2;
		filter: blur(10px);
	}
}