/* ==========================================================================
   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 em sentidos opostos,
   sem reagir ao mouse (pedido da cliente). 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 55s linear infinite;
	will-change: transform;
}

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

/* 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;
}

@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: 40s;
	}

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

@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;
	}
}