/* Rotated Text Ticker — estilos do front-end
 * Réplica do efeito de marquee duplo/rotacionado com divisor em círculo.
 */

.rtt-ticker-section {
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
	background: var( --rtt-bg, #ffffff );
	padding: var( --rtt-padding-y, 28px ) 0;
	width: 100%;
	box-sizing: border-box;
}

.rtt-row {
	position: relative;
	width: 100%;
	transform: rotate( var( --rtt-angle, 0deg ) );
	color: var( --rtt-color, #171717 );
	opacity: var( --rtt-opacity, 1 );
}

.rtt-row-clip {
	overflow: hidden;
	width: 100%;
}

.rtt-track {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	white-space: nowrap;
	width: max-content;
	will-change: transform;
	/* A posição é controlada via JavaScript (requestAnimationFrame) para permitir
	 * velocidade constante independente da quantidade de texto duplicado, e o
	 * "empurrão" extra ao rolar a página. Este transform inicial é só o estado
	 * antes do JS assumir o controle (ou fallback caso o JS não carregue). */
	transform: translateX( 0 );
}

.rtt-item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	gap: var( --rtt-gap, 35px );
	padding: 0 calc( var( --rtt-gap, 35px ) / 2 );
	box-sizing: border-box;
}

.rtt-dot {
	display: inline-block;
	flex-shrink: 0;
	width: var( --rtt-circle-size, 20px );
	height: var( --rtt-circle-size, 20px );
	border-radius: 50%;
	border: var( --rtt-circle-border, 1px ) solid var( --rtt-circle-color, currentColor );
	box-sizing: border-box;
}

.rtt-text {
	font-family: var( --rtt-font, "Inter", Arial, sans-serif );
	font-weight: 700;
	font-size: var( --rtt-font-size, 100px );
	line-height: 1.05;
	letter-spacing: var( --rtt-letter-spacing, -2.4px );
	white-space: nowrap;
}

/* prefers-reduced-motion é respeitado no JavaScript (o loop de animação nem
 * chega a iniciar, e o "empurrão" de scroll fica desativado). */