/* Hackflo Widgets — Logo Marquee
 * Budget: < 2KB. Pure CSS animation, zero JS.
 * All tunable values are custom properties written by Elementor controls.
 */

.hfw-marquee {
	--hfw-logo-h: 48px;
	--hfw-gap: 64px;
	--hfw-duration: 30s;

	display: flex;
	overflow: hidden;
	user-select: none;
}

.hfw-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--hfw-gap);
	padding: 0;
	margin: 0;
	list-style: none;
	flex-shrink: 0;
	/* Track must size to its content so the duplicate track starts
	 * exactly where this one ends — this is what makes the loop
	 * seamless instead of jumping at the restart point. */
	width: max-content;
	padding-inline-end: var(--hfw-gap);
	/* GPU-composited animation: translate3d keeps this off the CPU
	 * layout path, which is what removes the jitter. */
	animation: hfw-scroll var(--hfw-duration) linear infinite;
	will-change: transform;
	backface-visibility: hidden;
}

.hfw-marquee--reverse .hfw-marquee__track {
	animation-direction: reverse;
}

.hfw-marquee--pausable:hover .hfw-marquee__track {
	animation-play-state: paused;
}

.hfw-marquee__item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.hfw-marquee__item img {
	/* Precedence: manual override > Smart Balance > global.
	 * Three separate variables means inline styles and Elementor's
	 * generated stylesheet never compete for the same property. */
	height: var(--hfw-item-h, var(--hfw-balance-h, var(--hfw-logo-h)));
	width: auto;
	max-width: none;
	object-fit: contain;
	display: block;
	/* Keeps downscaled raster logos crisp while the layer animates */
	image-rendering: -webkit-optimize-contrast;
	transform: translateZ(0);
}

/* Premium default: quiet grayscale, color on hover */
.hfw-marquee--gray .hfw-marquee__item img {
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.hfw-marquee--gray .hfw-marquee__item:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* Edge fade via mask — no overlay divs */
.hfw-marquee--fade {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

@keyframes hfw-scroll {
	to {
		/* Exactly -100%. The trailing gap is already part of the track's
		 * width via padding-inline-end — subtracting it again overshoots
		 * and causes a visible jump every loop. */
		transform: translate3d(-100%, 0, 0);
	}
}

/* Accessibility: respect reduced motion. Marquee becomes a static,
 * wrapping logo row and the duplicate track is hidden. */
@media (prefers-reduced-motion: reduce) {
	.hfw-marquee__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		will-change: auto;
	}
	.hfw-marquee__track[aria-hidden="true"] {
		display: none;
	}
}