/* ==========================================================================
   Vazto — clientes e parceiros, uma vez só

   A régua existia escrita à mão em cinco páginas de produto, cada uma com a
   sua cópia do CSS, do JS e da lista de logótipos. Cinco cópias da mesma
   coisa é a mesma coisa cinco vezes até alguém corrigir uma delas.

   Isto é a versão das páginas de produto, palavra por palavra: mesma máscara,
   mesma chapa branca, mesmo tamanho, mesmo intervalo, mesma velocidade. O que
   muda é que passa a haver um único sítio onde mudar.

   As variáveis (--on-dark, --ease) vêm de vazto.css.
   ========================================================================== */

/* Régua à largura da janela: a faixa guarda a lista várias vezes e desliza
   exactamente a largura de uma cópia, para o ponto de recomeço não se ver.
   As cópias são aria-hidden para um leitor de ecrã ouvir cada cliente uma vez. */
.marquee{
  position:relative; z-index:2;
  inline-size:100vw; margin-inline:calc(50% - 50vw);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);
}
.marquee__track{ display:flex; inline-size:max-content }
.marquee__set{ display:flex; align-items:center; gap:18px; padding-inline:9px }
@media (prefers-reduced-motion:no-preference){
  /* --shift e --dur são escritos pelo JS a partir da largura medida de uma
     cópia, para a volta cair sempre a uma cópia de distância, a 44px/s. */
  .marquee__track{ animation:slide var(--dur,44s) linear infinite }
  .marquee:hover .marquee__track{ animation-play-state:paused }
}
@keyframes slide{ to{ transform:translateX(calc(-1 * var(--shift,50%))) } }

/* A chapa é clara porque todos os ficheiros entregues são opacos sobre
   branco. Um logótipo em branco largado directamente numa secção escura
   lê-se como um rectângulo branco, não como uma marca. */
.client{
  flex:none; inline-size:158px; block-size:76px; border-radius:16px;
  /* `place-items:center` aqui fazia a imagem dimensionar-se contra uma área
     de grelha que era ela própria dimensionada pela imagem — resolvia a 130px
     e rebentava a chapa. Esticar a célula dá à imagem uma caixa real. */
  display:grid; place-items:stretch; padding:10px 14px; overflow:hidden;
  background:#fff; box-shadow:0 0 0 1px rgba(241,247,247,.1), 0 10px 22px -16px rgba(1,26,32,.9);
  font-size:12.5px; color:rgba(11,29,31,.42);
}
/* `contain` nos dois eixos: os ficheiros são telas quadradas com a marca ao
   centro, e alguns são muito mais largos do que altos. Nada estica. */
.client img{
  inline-size:100%; block-size:100%; object-fit:contain;
  filter:saturate(.96); transition:filter .22s;
}
/* Um logótipo com ligação: a chapa inteira é o alvo. */
.client-link{ flex:none; display:block; border-radius:16px; transition:transform .22s var(--ease,cubic-bezier(.2,.7,.3,1)) }
.client-link:hover{ transform:translateY(-3px) }
.client-link:hover .client{ box-shadow:0 0 0 1.5px rgba(7,210,210,.55), 0 14px 26px -16px rgba(1,26,32,.9) }
.client-link:hover img{ filter:saturate(1) }