/*
 * Hamo Texto - Infinity — esteira infinita de blocos de texto (marquee).
 * 100% CSS: cada faixa tem DOIS grupos idênticos lado a lado e o track
 * anima translateX(-50%) em loop linear — quando a primeira metade sai, a
 * segunda está exatamente no lugar dela (loop invisível). O padding-right
 * do grupo espelha o gap para a emenda entre grupos manter o espaçamento.
 * Nunca declarar aqui as CSS vars escritas pelos controles (lição do
 * shadowing) — apenas consumir com var(--x, fallback).
 */

.hamo-ti__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.hamo-ti__track {
	display: flex;
	width: max-content;
	animation: hamo-ti-scroll var(--hamo-ti-speed, 20s) linear infinite;
}

/* Direção para a direita = animação reversa. */
.hamo-ti-dir-right .hamo-ti__track {
	animation-direction: reverse;
}

.hamo-ti__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--hamo-ti-gap, 28px);
	padding-right: var(--hamo-ti-gap, 28px);
}

@keyframes hamo-ti-scroll {
	to {
		transform: translateX(-50%);
	}
}

.hamo-ti__item {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	line-height: 1.2;
}

.hamo-ti__sep {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 1;
	color: var(--hamo-ti-sep-color, currentColor);
}

.hamo-ti__sep svg {
	width: var(--hamo-ti-sep-size, 24px);
	height: auto;
	fill: currentColor;
}

.hamo-ti__sep i {
	font-size: var(--hamo-ti-sep-size, 24px);
}

/* Pausa a esteira quando o mouse está sobre ela. */
.hamo-ti--pause:hover .hamo-ti__track {
	animation-play-state: paused;
}

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