/* ==========================================================================
   FAIXA ROLANTE
   Tarja verde com a frase deslizando continuamente.
   ========================================================================== */

.faixa-rolante {
	/* ------------------------------------------------------------------
	   --faixa-duracao: tempo de uma volta completa. Maior = mais devagar.
	   --faixa-espaco:  distancia entre uma repeticao da frase e a seguinte.
	   ------------------------------------------------------------------ */
	--faixa-duracao: 38s;
	--faixa-espaco: clamp(2.5rem, 6vw, 5rem);

	/* Degrade do layout */
	background-image: linear-gradient(90deg, #69b863 0%, #bce36f 100%);
	color: var(--cor-branco);
	overflow: hidden;
	/* Altura de 85px no layout */
	padding-block: clamp(1.25rem, 2.4vw, 1.875rem);
}

.faixa-rolante__trilha {
	display: flex;
	/* max-content impede que o flex comprima o conteudo para caber na tela */
	width: max-content;
	animation: rolar-faixa var(--faixa-duracao) linear infinite;
	will-change: transform;
}

.faixa-rolante__grupo {
	display: flex;
	align-items: center;
	gap: var(--faixa-espaco);
	/* Mantem o mesmo respiro na emenda entre os dois grupos */
	padding-right: var(--faixa-espaco);
	margin: 0;
	list-style: none;
}

.faixa-rolante__item {
	white-space: nowrap;
	font-size: clamp(0.8125rem, 0.4vw + 0.6875rem, 1rem);
	font-weight: var(--peso-medio);
	line-height: 1.4;
}

/* Deslocar metade da trilha equivale a um grupo inteiro: ao terminar, a
   segunda copia esta exatamente onde a primeira comecou. */
@keyframes rolar-faixa {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* Pausa ao passar o cursor ou ao focar por teclado.
   Alem de util para ler a frase, atende a WCAG 2.2.2, que pede um meio de
   pausar conteudo em movimento automatico. */
.faixa-rolante:hover .faixa-rolante__trilha,
.faixa-rolante:focus-within .faixa-rolante__trilha {
	animation-play-state: paused;
}

/* Quem pediu menos movimento ve a frase parada */
@media (prefers-reduced-motion: reduce) {
	.faixa-rolante__trilha {
		animation: none;
	}
}