/*
 * Auto scrolling logo strip (marquee).
 *
 * Its own file so it never collides with the design work going on in style.css.
 * Enqueued from inc/custom-function.php (handle: uks-marquee).
 *
 * Gutenberg has no marquee block. js/marquee.js takes whatever is inside the
 * strip, moves it into a track and duplicates it until the track is at least
 * twice the width of the strip; the animation below then moves the track
 * exactly half its width, so the copy lands where the original started and the
 * loop has no seam.
 *
 * Which element becomes a strip:
 *   .logo-slider-sec   the home page logo row, recognised as it stands
 *   .uks-marquee       add this to any other row in the editor
 *                      (Advanced > Additional CSS class(es))
 *
 * Tune per strip by overriding these on .uks-marquee:
 *   --uks-marquee-speed   how long one full loop takes (bigger = slower)
 *   --uks-marquee-gap     space between logos
 */

/*
 * display:block overrides the editor's own flex layout on the strip
 * (is-layout-flex): its wrap and gap would fight the track, which has to be a
 * single nowrap row wider than the strip itself.
 */
.uks-marquee.uks-marquee {
	--uks-marquee-speed: 40s;
	--uks-marquee-gap: 13px;

	/* How tall the strip is. Remove this line to let it take the height the
	   logos actually need - js/marquee.js measures that into
	   --uks-marquee-track-height. */
	--uks-marquee-height: 90px;

	height: var(--uks-marquee-height, var(--uks-marquee-track-height, auto));

	display: block;
	position: relative;   /* the track is positioned against this */
	overflow: hidden;
	gap: 0;

	/* The track is deliberately wider than the strip. A flex or grid item
	   defaults to min-width:auto, which would let that width push the column
	   around it open, so it is pinned shut here. */
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

/*
 * Same again one level up: the column holding the strip is itself a flex item
 * with min-width:auto, so without this the track's width still forces the
 * whole row wider than the screen.
 */
.wp-block-column:has(.uks-marquee),
.wp-block-group:has(> .uks-marquee) {
	min-width: 0;
}

/*
 * The track is taken right out of the layout.
 *
 * It has to be wider than the strip for the loop to work, and while it was in
 * normal flow that width kept travelling up the tree - a flex item is
 * min-width:auto by default - and pushed the whole row off the screen.
 * Absolutely positioned, it cannot affect anything around it whatever the
 * surrounding CSS does. js/marquee.js gives the strip its height to match.
 */
.uks-marquee .uks-marquee__track {
	position: absolute;
	top: 0;
	left: 0;

	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	max-width: none;
	gap: var(--uks-marquee-gap);
	margin: 0;
	padding: 0;
}

/* The logos are figures, which arrive with the editor's own margins. */
.uks-marquee .uks-marquee__track > * {
	flex: 0 0 auto;
	margin: 0;
	max-width: none;
}

.uks-marquee .uks-marquee__track img {
	display: block;
	max-width: none;
}

/* Only animate once the JS has added enough copies for a seamless loop. */
.uks-marquee.is-running .uks-marquee__track {
	animation: uks-marquee-scroll var(--uks-marquee-speed) linear infinite;
}

/* Half the track is the duplicated copy, so moving exactly half puts the copy
   where the original started. The half gap keeps the spacing even at the join. */
@keyframes uks-marquee-scroll {
	to {
		transform: translateX(calc(-50% - (var(--uks-marquee-gap) / 2)));
	}
}

.uks-marquee:hover .uks-marquee__track,
.uks-marquee:focus-within .uks-marquee__track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.uks-marquee .uks-marquee__track {
		animation: none;
	}
}