/* ==========================================================================
   FAIXA DE LOGOS DE CLIENTES — Fase 2 + Redesign 2026
   ==========================================================================

   Cada logo continua sendo um arquivo próprio, com largura calculada por
   área de tinta (inc/logos-clientes.php). O que mudou no redesign é a
   disposição: em vez de uma grade de 48 logos (seis linhas no desktop,
   dezesseis no celular), duas fileiras que deslizam devagar em sentidos
   opostos e pausam sob o mouse. Cada fileira tem a lista duas vezes, com o
   próprio espaço no fim de cada cópia: o laço fecha sem pulo.

   Com "reduzir movimento" ativo, a animação some, a cópia repetida some, e
   as fileiras viram linhas que quebram, centradas.
   ========================================================================== */

.bfd-logos-faixa {
	display: grid;
	gap: 30px;
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 7%, #000 93%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 7%, #000 93%, transparent );
}

.bfd-logos-fileira {
	overflow: hidden;
}

.bfd-logos-trilho {
	display: flex;
	width: max-content;
}

/* A animação só existe quando a segunda cópia foi inserida (logos.js). */
.bfd-logos-trilho--dupla {
	animation: bfd-logos 110s linear infinite;
	will-change: transform;
}

.bfd-logos-fileira--volta .bfd-logos-trilho--dupla {
	animation-direction: reverse;
	animation-duration: 125s;
}

.bfd-logos-fileira:hover .bfd-logos-trilho {
	animation-play-state: paused;
}

/* Uma cópia da lista. O padding-right é o mesmo vão entre logos: assim a
   emenda entre o fim de uma cópia e o início da outra é invisível. */
.bfd-logos {
	--bfd-logo-vao: clamp( 44px, 5vw, 72px );
	list-style: none;
	margin: 0;
	padding: 0 var( --bfd-logo-vao ) 0 0;
	display: flex;
	align-items: center;
	gap: var( --bfd-logo-vao );
	flex: none;
}

.bfd-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	flex: none;
}

.bfd-logo img {
	display: block;
	width: var( --bfd-logo-largura, 120px );
	height: auto;
	max-height: 44px;
	object-fit: contain;
	opacity: 0.8;
	transition: opacity 160ms ease;
}

.bfd-logo img:hover {
	opacity: 1;
}

@keyframes bfd-logos {
	to {
		transform: translateX( -50% );
	}
}

@media ( max-width: 767px ) {
	.bfd-logos {
		--bfd-logo-vao: 36px;
	}

	.bfd-logo {
		height: 32px;
	}

	.bfd-logo img {
		max-height: 32px;
		width: calc( var( --bfd-logo-largura, 120px ) * 0.75 );
	}

	.bfd-logos-trilho--dupla {
		animation-duration: 80s;
	}

	.bfd-logos-fileira--volta .bfd-logos-trilho--dupla {
		animation-duration: 92s;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.bfd-logos-faixa {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.bfd-logos-trilho {
		animation: none;
		width: auto;
	}

	.bfd-logos {
		flex-wrap: wrap;
		justify-content: center;
		padding-right: 0;
		row-gap: var( --bf-space-sm );
	}

	.bfd-logos[aria-hidden="true"] {
		display: none;
	}

	.bfd-logo img {
		transition: none;
	}
}