/**
 * CP — Marquee
 *
 * A duração da animação é calculada pelo JS a partir da largura do set e da
 * velocidade em px/s. O valor aqui é só um ponto de partida até o JS rodar.
 */

.rkscp-marquee {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.rkscp-marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: rkscp-marquee-left 20s linear infinite;
}

.rkscp-marquee[data-direction="right"] .rkscp-marquee__track {
	animation-name: rkscp-marquee-right;
}

.rkscp-marquee__set {
	display: flex;
	align-items: center;
	gap: var(--rkscp-marquee-gap, 56px);
	/* O padding-right replica o gap na emenda entre os dois sets. Sem ele,
	   os itens se encostam exatamente uma vez por volta. */
	padding-right: var(--rkscp-marquee-gap, 56px);
	flex-shrink: 0;
}

.rkscp-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
	flex-shrink: 0;
}

.rkscp-marquee__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}

.rkscp-marquee__icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

.rkscp-marquee__icon i {
	line-height: 1;
}

.rkscp-marquee__text {
	white-space: nowrap;
	line-height: 1;
}

.rkscp-marquee__sep {
	flex-shrink: 0;
	line-height: 1;
	user-select: none;
}

.rkscp-marquee__item--image {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.rkscp-marquee__image {
	display: block;
	width: fit-content;
	height: 40px;
	max-width: 160px;
	object-fit: contain;
	flex-shrink: 0;
}

@keyframes rkscp-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes rkscp-marquee-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* Movimento infinito é gatilho de enjoo para quem tem sensibilidade
   vestibular. Quem pediu menos movimento no sistema vê a faixa parada,
   com todos os itens legíveis. */
@media ( prefers-reduced-motion: reduce ) {
	.rkscp-marquee__track {
		animation: none;
		transform: none;
		flex-wrap: wrap;
	}

	.rkscp-marquee__set[aria-hidden="true"] {
		display: none;
	}

	.rkscp-marquee__set {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 8px;
	}
}