/**
 * BV Interactions - Marquee
 *
 * The motion is a plain CSS keyframe animation on the track, so it runs on the
 * compositor (off the main thread) and stays smooth with many items. The JS
 * only builds the structure and writes two custom properties:
 *
 *   --bv-marquee-shift     one repeat distance, in px (how far one loop travels)
 *   --bv-marquee-duration  time for one loop, derived from shift ÷ speed
 *
 * The track holds N identical copies of your items laid end to end. Translating
 * by exactly one copy's size lands the next copy precisely where the last one
 * started, so the reset back to 0 is invisible — that's the seamless loop.
 *
 * Works on either axis. Horizontal (default) scrolls left/right; add
 * .bv-marquee-vertical to scroll up/down — the vertical variant needs a height
 * on the element (set your own, or use data-bv-marquee-height).
 */

.bv-marquee {
	overflow: hidden;

	--bv-marquee-gap: 3rem;
	--bv-marquee-fade-size: 80px;
}

.bv-marquee__track {
	display: flex;
	flex: 0 0 auto;
	gap: var(--bv-marquee-gap);
	will-change: transform;
	animation-name: bv-marquee-x;
	animation-duration: var(--bv-marquee-duration, 30s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.bv-marquee__group {
	display: flex;
	flex: 0 0 auto;
	gap: var(--bv-marquee-gap);
}

/* ---------- Horizontal (default) ---------- */

.bv-marquee:not(.bv-marquee-vertical) {
	display: flex;
	align-items: center;
}

.bv-marquee:not(.bv-marquee-vertical) .bv-marquee__track {
	flex-direction: row;
	width: max-content;
}

.bv-marquee:not(.bv-marquee-vertical) .bv-marquee__group {
	flex-direction: row;
	align-items: center;
}

/* Logos are usually width-constrained by the theme's img { max-width:100% };
   inside a max-content track that would collapse them, so opt out. */
.bv-marquee:not(.bv-marquee-vertical) .bv-marquee__group img {
	max-width: none;
	display: block;
}

@keyframes bv-marquee-x {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--bv-marquee-shift, 0px))); }
}

/* ---------- Vertical ---------- */

.bv-marquee-vertical {
	display: block;
}

.bv-marquee-vertical .bv-marquee__track {
	flex-direction: column;
	height: max-content;
	width: auto;
	animation-name: bv-marquee-y;
}

.bv-marquee-vertical .bv-marquee__group {
	flex-direction: column;
}

@keyframes bv-marquee-y {
	from { transform: translateY(0); }
	to   { transform: translateY(calc(-1 * var(--bv-marquee-shift, 0px))); }
}

/* ---------- Shared modifiers ---------- */

/* Direction. On the vertical axis this flips up <-> down. */
.bv-marquee-reverse .bv-marquee__track {
	animation-direction: reverse;
}

/* Opt-in pause. focus-within matters for keyboard users: tabbing onto a link
   inside the strip freezes the motion so it can be read and activated. */
.bv-marquee--pause-on-hover:hover .bv-marquee__track,
.bv-marquee--pause-on-hover:focus-within .bv-marquee__track {
	animation-play-state: paused;
}

/* Opt-in edge fade. Uses a CSS mask, so it fades to transparent on ANY
   background — no need to match a solid section colour. */
.bv-marquee--fade {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--bv-marquee-fade-size),
		#000 calc(100% - var(--bv-marquee-fade-size)),
		transparent 100%
	);
	        mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--bv-marquee-fade-size),
		#000 calc(100% - var(--bv-marquee-fade-size)),
		transparent 100%
	);
}

.bv-marquee-vertical.bv-marquee--fade {
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 var(--bv-marquee-fade-size),
		#000 calc(100% - var(--bv-marquee-fade-size)),
		transparent 100%
	);
	        mask-image: linear-gradient(
		to bottom,
		transparent 0,
		#000 var(--bv-marquee-fade-size),
		#000 calc(100% - var(--bv-marquee-fade-size)),
		transparent 100%
	);
}

/* A perpetually moving strip is exactly what this setting is for: stop the
   animation and reveal everything statically. Horizontal wraps to rows;
   vertical drops its fixed height and lets the items stack. */
@media (prefers-reduced-motion: reduce) {
	.bv-marquee {
		overflow: visible;
	}
	.bv-marquee:not(.bv-marquee-vertical) {
		flex-wrap: wrap;
	}
	.bv-marquee-vertical {
		height: auto !important;
	}
	.bv-marquee__track {
		animation: none;
	}
}