/* Hero collage — scroll-scrubbed parallax reassembly of the product
   screenshot pieces. Base layout matches the original flattened composite
   (ICM-incentX.webp); JS animates each piece in from a scattered offset.

   Structure: .hero-piece (outer, positioned) is what the scroll-scrub
   animation moves — GSAP owns its transform. .hero-piece-img (inner) is
   what the hover lift animates via plain CSS. Splitting them means the
   two transforms never fight over the same element. */

/* Elementor v4 "Media" columns are flex-direction:column with varying
   align-items across pages (stretch on some, flex-end on others). When it
   isn't stretch, the auto-generated widget wrapper shrink-to-fits its
   content — and since every .hero-piece is position:absolute, there's no
   in-flow content to size against, so the wrapper (and the collage inside
   it) collapses to 0 width/height. Force it to fill the column regardless
   of the parent's align-items. */
.elementor-widget-html:has(.hero-collage) {
	align-self: stretch;
	width: 100%;
}

.hero-collage {
	position: relative;
	width: 100%;
	aspect-ratio: 1786 / 930;
}

.hero-piece {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--w);
	z-index: var(--z);
	will-change: transform, opacity;
}

.hero-piece:hover {
	z-index: 20;
}

.hero-piece-img {
	display: block;
	width: 100%;
	/* No border-radius/box-shadow here on purpose — the source webp files
	   already have their own drop shadow baked in. Adding a second CSS
	   shadow compounded into a visible rectangular "frame" around the
	   card, worst on hover when the shadow intensified. */
	transition: transform 0.25s ease;
}

.hero-piece:hover .hero-piece-img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.hero-piece {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
	}
}