/**
 * Flavors Image Trail - cursor image-trail container.
 *
 * The stage clips its overflow; source images live in a hidden pool the JS clones
 * from. Spawned nodes are absolutely positioned at the pointer and transition
 * their opacity + transform in/out. A single static fallback image is shown until
 * the JS marks the container `.fit-live` (so no-JS, reduced-motion and touch all
 * degrade to one centered image). Per-instance sizes come from Elementor
 * `selectors` as CSS custom properties.
 */

.flavor-image-trail {
	--fit-img-width: 220px;
	--fit-img-ratio: 3 / 4;
	--fit-img-radius: 8px;
	--fit-z: 5;
	position: relative;
	width: 100%;
}

.fit-stage {
	position: relative;
	overflow: hidden;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fit-pool {
	display: none;
}

/* Static fallback: shown by default and under reduced-motion / touch / no-JS. */
.fit-fallback {
	display: block;
	width: var(--fit-img-width);
	max-width: 100%;
	height: auto;
	aspect-ratio: var(--fit-img-ratio, auto);
	object-fit: cover;
	border-radius: var(--fit-img-radius);
}

.flavor-image-trail.fit-live .fit-fallback {
	display: none;
}

/* Spawned trail nodes. */
.fit-node {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--fit-img-width);
	z-index: var(--fit-z, 5);
	opacity: 0;
	transform: translate(-50%, -50%) rotate(var(--fit-rot, 0deg)) scale(0.6);
	transition:
		transform var(--fit-trans, 400ms) var(--fit-ease, ease-out),
		opacity var(--fit-trans, 400ms) var(--fit-ease, ease-out);
	will-change: transform, opacity;
	pointer-events: none;
}

.fit-node--in {
	opacity: 1;
	transform: translate(-50%, -50%) rotate(var(--fit-rot, 0deg)) scale(1);
}

.fit-node--out {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(var(--fit-rot, 0deg)) scale(1.15);
}

.fit-node-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--fit-img-ratio, auto);
	object-fit: cover;
	border-radius: var(--fit-img-radius);
}

/* Reduced motion: no trail, keep the single centered fallback. */
@media (prefers-reduced-motion: reduce) {
	.fit-node {
		display: none !important;
	}

	.flavor-image-trail.fit-live .fit-fallback {
		display: block;
	}
}