/*
 * Marquee widget — LAYER 5 (widget styles). Scoped to .redteam-marquee* markup; loaded
 * lazily via get_style_depends(). The three vars below are set per instance by the
 * widget's own Elementor `selectors`, so they are the widget's public knobs — change the
 * control, not these defaults.
 *
 * The image list is printed TWICE inside the track (the clone aria-hidden) and the track
 * translates by half its width PLUS half a gap — the same gap sits between the two
 * lists, which is what makes the seam invisible. Honours prefers-reduced-motion.
 */
.redteam-marquee {
	--redteam-marquee-duration: 30s;
	--redteam-marquee-gap: var(--s4);
	--redteam-marquee-image-height: 70rem;

	overflow: hidden;
	width: 100%;
	background-color: transparent;
	border-radius: var(--s1, 8rem);
}

.redteam-marquee__track {
	display: flex;
	width: max-content;
	gap: var(--redteam-marquee-gap);
	animation: redteam-marquee-scroll var(--redteam-marquee-duration) linear infinite;
}

.redteam-marquee--right .redteam-marquee__track {
	animation-direction: reverse;
}

.redteam-marquee-pause-yes .redteam-marquee:hover .redteam-marquee__track {
	animation-play-state: paused;
}

.redteam-marquee-fade-yes .redteam-marquee {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--s8), #000 calc(100% - var(--s8)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--s8), #000 calc(100% - var(--s8)), transparent);
}

.redteam-marquee__list {
	display: flex;
	align-items: center;
	gap: var(--redteam-marquee-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.redteam-marquee__item {
	display: flex;
	align-items: center;
	gap: var(--redteam-marquee-gap);
	flex: 0 0 auto;
	white-space: nowrap;
	margin: 0;
	max-height: 150rem;
	width: auto;
}

.redteam-marquee__image {
	display: block;
	width: auto;
	height: var(--redteam-marquee-image-height, 70rem);
	object-fit: contain;
}

.redteam-marquee-card-yes .redteam-marquee__card {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-white, #fffffd);
	border-radius: 5rem;
	padding: 20rem;
	overflow: hidden;
}

.redteam-marquee-card-yes .redteam-marquee__card > img {
	height: var(--redteam-marquee-image-height, 70rem);
	width: auto;
	aspect-ratio: auto;
}

@keyframes redteam-marquee-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		/* Half the track plus half a gap — the duplicate list lands exactly
		   where the original began, so the seam is invisible. */
		transform: translate3d(calc(-50% - (var(--redteam-marquee-gap) / 2)), 0, 0);
	}
}

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

	.redteam-marquee {
		overflow-x: auto;
	}
}