/* Motion Kit — Big-Type Marquee. Needs core.css.
   marquee.js moves the track with --x (px) and leans it with --lean (deg) from the scroll speed.
   Without the script a plain CSS loop runs instead; with reduced motion the words sit still, wrapped. */

.mkit-marquee {
	--size: var(--mkit-marquee-size, clamp(3rem, 1.4rem + 6.5vw, 8.5rem));
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-block: .08em;
	color: var(--mkit-text);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.mkit-marquee__track {
	display: flex;
	width: max-content;
	translate: var(--x, 0px) 0;
	transform: skewX(calc(var(--lean, 0) * 1deg));
	will-change: translate;
}

.mkit-marquee__set {
	display: flex;
	flex: none;
	align-items: center;
}

.mkit-marquee__word {
	flex: none;
	padding-inline: .3em;
	font-size: var(--size);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
	white-space: nowrap;
}

.mkit-marquee--alternate .mkit-marquee__word.is-outline,
.mkit-marquee--outline .mkit-marquee__word {
	/* stroke under a fill in the section colour, so the overlapping shapes inside variable-font glyphs don't show */
	color: var(--mkit-surface);
	-webkit-text-stroke: max(2px, calc(var(--size) * .024)) var(--mkit-text);
	paint-order: stroke fill;
}

.mkit-marquee__sep {
	flex: none;
	display: inline-grid;
	place-items: center;
	color: var(--mkit-accent-soft);
	font-size: calc(var(--size) * .42);
	line-height: 1;
}

.mkit-marquee__sep--dot::before {
	content: "";
	width: calc(var(--size) * .11);
	height: calc(var(--size) * .11);
	background: var(--mkit-accent-soft);
}

@media (prefers-reduced-motion: no-preference) {
	.mkit-marquee:not([data-mkit-ready]) .mkit-marquee__set {
		animation: mkit-marquee var(--mkit-marquee-dur, 40s) linear infinite;
	}
	.mkit-marquee[data-direction="right"]:not([data-mkit-ready]) .mkit-marquee__set {
		animation-direction: reverse;
	}
	.mkit-marquee:not([data-mkit-ready]):hover .mkit-marquee__set {
		animation-play-state: paused;
	}
}

@keyframes mkit-marquee {
	to { translate: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mkit-marquee {
		--size: var(--mkit-marquee-size, clamp(2rem, 1.4rem + 3vw, 4.5rem));
		-webkit-mask-image: none;
		mask-image: none;
	}
	.mkit-marquee__track,
	.mkit-marquee__set {
		flex: 1;
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
		row-gap: .2em;
	}
	.mkit-marquee__set + .mkit-marquee__set,
	.mkit-marquee__word.is-repeat,
	.mkit-marquee__sep.is-repeat,
	.mkit-marquee__set > .mkit-marquee__sep:last-child {
		display: none;
	}
}