/* ==========================================================================
   FAIXA DE MARCAS
   Rolagem infinita sem JavaScript.

   Duas regras sustentam a continuidade, e as duas foram aprendidas errando
   na 1.13.0:

   1. O ESPACO ENTRE ITENS NAO PODE SER `gap`.
      Com `gap`, uma trilha de 2N itens mede 2N larguras + (2N-1) espacos.
      Metade disso nao e um ciclo inteiro: falta meio espaco, e a faixa da
      um pulo a cada volta. Com margem no proprio item, cada um ocupa
      largura + espaco, o total e exatamente o dobro de uma copia, e -50%
      cai no ponto exato onde a segunda copia comeca.

   2. A TRILHA PRECISA TER O DOBRO DA LARGURA VISIVEL.
      A animacao anda ate -50%; nesse instante o que aparece na tela comeca
      na metade da trilha. Se a trilha inteira nao tiver o dobro da largura
      visivel, sobra um vao vazio no fim. Por isso o numero de copias e
      calculado no PHP, e nao fixo em duas — ver class-zt-faixa.php.
   ========================================================================== */

.zt-faixa {
  position: relative;
  overflow: hidden;
}

/* Desbota nas pontas em vez de cortar seco. */
.zt-faixa--esmaece::before,
.zt-faixa--esmaece::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(24px, 6vw, 80px);
  z-index: 2;
  pointer-events: none;
}
.zt-faixa--esmaece::before { left: 0; background: linear-gradient(to right, var(--zt-faixa-fundo, var(--zt-fundo)), transparent); }
.zt-faixa--esmaece::after { right: 0; background: linear-gradient(to left, var(--zt-faixa-fundo, var(--zt-fundo)), transparent); }

.zt-secao--alt .zt-faixa { --zt-faixa-fundo: var(--zt-superficie-alt); }
.zt-secao--papel .zt-faixa { --zt-faixa-fundo: var(--zt-fundo); }
.zt-secao--escura .zt-faixa { --zt-faixa-fundo: var(--zt-inverso); }

.zt-faixa__trilha {
  display: flex;
  align-items: center;
  width: max-content;
  animation: zt-faixa-anda var(--zt-faixa-tempo, 34s) linear infinite;
  will-change: transform;
}

/* O grupo existe so para marcar a copia com aria-hidden; ele nao participa
   do layout, entao a trilha continua sendo o unico flex container. */
.zt-faixa__grupo { display: contents; }

.zt-faixa--reversa .zt-faixa__trilha { animation-direction: reverse; }

/* Pausa so onde existe ponteiro de verdade.
   No celular o toque deixa o :hover grudado, e a faixa ficava parada ate a
   pessoa tocar em outro lugar — que era o "travou" mais visivel de todos. */
@media (hover: hover) and (pointer: fine) {
  .zt-faixa:hover .zt-faixa__trilha { animation-play-state: paused; }
}

.zt-faixa:focus-within .zt-faixa__trilha { animation-play-state: paused; }

@keyframes zt-faixa-anda {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.zt-faixa__item {
  flex: none;
  display: grid;
  place-items: center;
  height: var(--zt-faixa-altura, 44px);
  /* Espaco no item, e nao `gap` na trilha: e o que faz o ciclo fechar. */
  margin-right: var(--zt-faixa-gap, 64px);
}

.zt-faixa__item img {
  height: 100%;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

/* Escala de cinza opcional: deixa logotipos de paletas diferentes
   convivendo sem a faixa virar um arco-iris. */
.zt-faixa--cinza .zt-faixa__item img {
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter var(--zt-transicao), opacity var(--zt-transicao);
}
.zt-faixa--cinza .zt-faixa__item:hover img,
.zt-faixa--cinza a:focus-visible .zt-faixa__item img {
  filter: none;
  opacity: 1;
}

.zt-secao--escura .zt-faixa__item img { filter: brightness(0) invert(1); opacity: 0.75; }
.zt-secao--escura .zt-faixa--cinza .zt-faixa__item:hover img { opacity: 1; }

/* Marca sem imagem cadastrada continua aparecendo, como texto. */
.zt-faixa__texto {
  font-size: var(--zt-txt-lg);
  font-weight: var(--zt-peso-semi);
  color: var(--zt-tinta-tenue);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.zt-faixa__item a { display: block; height: 100%; }

/* Quem pediu menos movimento nao recebe movimento nenhum: a faixa vira
   uma fila estatica com rolagem manual, e as copias saem do caminho. */
@media (prefers-reduced-motion: reduce) {
  .zt-faixa__trilha {
    animation: none;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .zt-faixa__trilha::-webkit-scrollbar { display: none; }
  .zt-faixa__copia { display: none; }
}