/*
 * Hamo Carrossel - Infinity — esteira infinita de imagens (marquee).
 * 100% CSS: cada linha 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).
 * Nunca declarar aqui as CSS vars escritas pelos controles (lição do
 * shadowing) — apenas consumir com var(--x, fallback).
 */

.hamo-cif__viewport {
	position: relative;
	overflow: hidden;
}

.hamo-cif__rows {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.hamo-cif__row {
	overflow: hidden;
}

.hamo-cif__track {
	display: flex;
	width: max-content;
	animation: hamo-cif-scroll var(--hamo-cif-speed, 30s) linear infinite;
}

.hamo-cif__track--reverse {
	animation-direction: reverse;
}

/* O padding-right espelha o gap interno: assim a emenda entre o fim de um
   grupo e o início do outro tem exatamente o mesmo espaçamento. */
.hamo-cif__group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--hamo-cif-gap, 64px);
	padding-right: var(--hamo-cif-gap, 64px);
}

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

.hamo-cif__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Equalização: todas as imagens com a mesma altura, largura proporcional. */
.hamo-cif__item img {
	display: block;
	height: var(--hamo-cif-img-h, 64px);
	width: auto;
	max-width: none;
	object-fit: contain;
}

/* Preto e branco com cor restaurada no hover. */
.hamo-cif--gray .hamo-cif__item img {
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.hamo-cif--gray .hamo-cif__item:hover img {
	filter: none;
	opacity: 1;
}

/* Pausa no hover (esteira e indicador dos dots juntos). */
.hamo-cif--pause:hover .hamo-cif__track,
.hamo-cif--pause:hover .hamo-cif__dots-pill {
	animation-play-state: paused;
}

/* ---------------- Gradientes laterais (efeito infinito) ---------------- */

.hamo-cif__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--hamo-cif-fade-w, 12%);
	z-index: 2;
	pointer-events: none;
}

.hamo-cif__fade--left {
	left: 0;
	background: linear-gradient(to right, var(--hamo-cif-fade, #fff), transparent);
}

.hamo-cif__fade--right {
	right: 0;
	background: linear-gradient(to left, var(--hamo-cif-fade, #fff), transparent);
}

/* ---------------- Dots ---------------- */

.hamo-cif__dots {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.hamo-cif__dots-inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--hamo-cif-dot-gap, 8px);
}

.hamo-cif__dot {
	width: var(--hamo-cif-dot, 10px);
	height: var(--hamo-cif-dot, 10px);
	border-radius: 999px;
	background-color: var(--hamo-cif-dot-color, #cfcfcf);
	flex-shrink: 0;
}

/* Dot ativo convencional: um ponto redondo (mesmo tamanho dos demais, na
   cor ativa) que avança de dot em dot — paginado em degraus (steps definido
   inline pelo PHP conforme a quantidade), no MESMO ritmo da esteira. Se o
   usuário definir uma largura ativa maior, vira pílula alongada. */
.hamo-cif__dots-pill {
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
	width: var(--hamo-cif-dot-active-w, var(--hamo-cif-dot, 10px));
	height: var(--hamo-cif-dot, 10px);
	border-radius: 999px;
	background-color: var(--hamo-cif-dot-active, #5b0e91);
	z-index: 1;
	animation-name: hamo-cif-dot-walk;
	animation-duration: var(--hamo-cif-speed, 30s);
	animation-iteration-count: infinite;
}

@keyframes hamo-cif-dot-walk {
	to {
		transform: translateX(calc((var(--hamo-cif-dots-n, 12) - 1) * (var(--hamo-cif-dot, 10px) + var(--hamo-cif-dot-gap, 8px))));
	}
}

/* Respeita usuários com preferência por menos movimento. */
@media (prefers-reduced-motion: reduce) {
	.hamo-cif__track,
	.hamo-cif__dots-pill {
		animation: none;
	}
}