/**
 * GO Marquee for Elementor
 * Functional styles only. Visual design remains controlled by Elementor.
 */

.go-marquee-enabled.go-marquee--ready {
	overflow: hidden;
	position: relative;
}

@supports (overflow: clip) {
	.go-marquee-enabled.go-marquee--ready {
		overflow: clip;
	}
}

.go-marquee-enabled.go-marquee--ready.go-marquee--axis-y {
	height: var(--go-marquee-height, 480px);
}

.go-marquee-enabled .go-marquee__track {
	display: flex;
	flex: 0 0 auto !important;
	max-width: none !important;
	max-height: none !important;
	will-change: transform;
}

.go-marquee-enabled.go-marquee--axis-x .go-marquee__track {
	flex-direction: row;
	width: max-content;
	min-width: max-content;
}

.go-marquee-enabled.go-marquee--axis-y .go-marquee__track {
	flex-direction: column;
	width: 100%;
	height: max-content;
	min-height: max-content;
}

.go-marquee-enabled .go-marquee__group {
	display: flex !important;
	flex: 0 0 auto !important;
	max-width: none !important;
	max-height: none !important;
}

.go-marquee-enabled.go-marquee--axis-x .go-marquee__group {
	flex-direction: row !important;
	width: max-content !important;
	min-width: max-content !important;
}

.go-marquee-enabled.go-marquee--axis-y .go-marquee__group {
	flex-direction: column !important;
	width: 100% !important;
	height: max-content !important;
	min-height: max-content !important;
}

.go-marquee-enabled .go-marquee__item {
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
}

/* Horizontal percentage/auto widths are frozen to their rendered width so
 * moving the card under a max-content track does not alter its design. */
.go-marquee-enabled.go-marquee--axis-x:not(.go-marquee--force-width) .go-marquee__item {
	width: var(--go-marquee-measured-width) !important;
	flex-basis: var(--go-marquee-measured-width) !important;
}

.go-marquee-enabled.go-marquee--axis-x.go-marquee--force-width .go-marquee__item {
	width: var(--go-marquee-item-width, 320px) !important;
	flex-basis: var(--go-marquee-item-width, 320px) !important;
}

.go-marquee-enabled.go-marquee--axis-y.go-marquee--force-width .go-marquee__item {
	width: var(--go-marquee-item-width, 320px) !important;
	flex-basis: auto !important;
}

.go-marquee-enabled.go-marquee--paused .go-marquee__track {
	will-change: auto;
}

.go-marquee-enabled .go-marquee__clone {
	pointer-events: none !important;
	user-select: none;
}

.go-marquee-enabled.go-marquee--fade.go-marquee--axis-x {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		black var(--go-marquee-fade, 8%),
		black calc(100% - var(--go-marquee-fade, 8%)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		black var(--go-marquee-fade, 8%),
		black calc(100% - var(--go-marquee-fade, 8%)),
		transparent 100%
	);
}

.go-marquee-enabled.go-marquee--fade.go-marquee--axis-y {
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		black var(--go-marquee-fade, 8%),
		black calc(100% - var(--go-marquee-fade, 8%)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		black var(--go-marquee-fade, 8%),
		black calc(100% - var(--go-marquee-fade, 8%)),
		transparent 100%
	);
}

/* Progressive enhancement: reduced-motion keeps the original Elementor
 * children untouched and visible. */
@media (prefers-reduced-motion: reduce) {
	.go-marquee-enabled.go-marquee--ready .go-marquee__track {
		transform: none !important;
		animation: none !important;
		will-change: auto;
	}
}
