/* ==========================================================================
   FAIXA TIPOGRÁFICA — Redesign 2026
   ==========================================================================
   Ver inc/faixa.php. Duas cópias iguais, deslocamento de metade: laço sem
   emenda. Palavras alternam cheia e vazada.
   ========================================================================== */

.bfd-faixa {
	overflow: hidden;
	padding: 22px 0;
	border-top: 1px solid var( --bf-line );
	border-bottom: 1px solid var( --bf-line );
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent );
}

.bfd-faixa-trilho {
	display: flex;
	width: max-content;
	animation: bfd-faixa 38s linear infinite;
	will-change: transform;
}

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

.bfd-faixa-bloco {
	display: flex;
	flex: none;
}

.bfd-faixa-palavra {
	padding: 0;
	font-size: clamp( 2.5rem, 7vw, 5.75rem );
	font-weight: 800;
	font-variation-settings: "wdth" var( --bf-wdth-numero );
	letter-spacing: -0.02em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: var( --bf-white );
}

.bfd-faixa-palavra--vazada {
	color: transparent;
	-webkit-text-stroke: 1.5px color-mix( in srgb, var( --bf-sky ) 75%, transparent );
}

/* O ponto fica a meio caminho: a mesma margem dos dois lados. */
.bfd-faixa-palavra i {
	font-style: normal;
	color: var( --bf-sky );
	font-size: 0.5em;
	vertical-align: 0.5em;
	margin: 0 0.55em;
	-webkit-text-stroke: 0;
}

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

@media ( prefers-reduced-motion: reduce ) {
	.bfd-faixa-trilho {
		animation: none;
	}
}