/**
 * ZZ Marquee — frontend styles
 * Version: 1.0.0
 */

.zz-marquee {
	--zz-mq-gap: 48px;
	--zz-mq-pad: 16px;
	--zz-mq-fade: 80px;
	--zz-mq-img-h: 48px;

	position: relative;
	overflow: hidden;
	width: 100%;
	padding-top: var(--zz-mq-pad);
	padding-bottom: var(--zz-mq-pad);
	white-space: nowrap;
}

.zz-mq-track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.zz-mq-group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--zz-mq-gap);
	padding-right: var(--zz-mq-gap);
}

.zz-mq-item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.zz-mq-sep {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 1;
}

/* Images */
.zz-mq-image img {
	display: block;
	transition: filter 0.3s ease;
}

.zz-marquee.zz-mq-same-height .zz-mq-image img {
	height: var(--zz-mq-img-h);
	width: auto;
	object-fit: contain;
}

.zz-marquee:not(.zz-mq-same-height) .zz-mq-image img {
	max-height: var(--zz-mq-img-h);
	width: auto;
}

/* Outline text */
.zz-marquee.zz-mq-outline .zz-mq-text {
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: currentColor;
	-webkit-text-fill-color: transparent;
}

/* Edge fade */
.zz-marquee.zz-mq-has-fade {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--zz-mq-fade),
		#000 calc(100% - var(--zz-mq-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--zz-mq-fade),
		#000 calc(100% - var(--zz-mq-fade)),
		transparent 100%
	);
}

/* Load animations — initial states only apply once JS confirms it will run.
   The zz-mq-pending class is added by JS, so no-JS visitors always see content. */
.zz-marquee.zz-mq-pending.zz-mq-load-fade {
	opacity: 0;
}

.zz-marquee.zz-mq-pending.zz-mq-load-slide {
	opacity: 0;
	transform: translateY(24px);
}

.zz-marquee.zz-mq-pending.zz-mq-load-wipe {
	clip-path: inset(0 100% 0 0);
}

.zz-marquee.zz-mq-load-fade,
.zz-marquee.zz-mq-load-slide {
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.zz-marquee.zz-mq-load-wipe {
	transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
}

.zz-marquee.zz-mq-revealed {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 0 0);
}

/* Reduced motion: static, no transform animation */
@media (prefers-reduced-motion: reduce) {
	.zz-mq-track {
		transform: none !important;
	}

	.zz-marquee.zz-mq-pending {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
}