/* Griffin Montagens — Motion: Clientes
   Fade nas bordas da faixa de logos + hover dos chips de marcas.
   Nada aqui esconde conteúdo: máscara é decorativa (centro sempre visível)
   e o hover só acrescenta transform à transition já existente. */

/* Máscara de fade nas laterais do marquee de logos */
.clients-strip {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* Chips de marcas: leve elevação no hover.
   Redeclara a transition mantendo border-color e color do style.css. */
.clients-names li {
  transition: border-color var(--dur) ease, color var(--dur) ease, transform var(--dur) ease;
}
.clients-names li:hover {
  transform: translateY(-2px);
}

/* ===== Card flutuante da marca no hover =====
   Criado e posicionado em modules/clients.js. Mostra a logo colorida
   ampliada num cartão de fundo claro enquanto o marquee fica pausado.
   position:fixed no body → fora da máscara do marquee. Some no scroll. */
.clients-preview {
  position: fixed;
  z-index: 300;
  box-sizing: border-box;
  padding: 26px 38px;
  pointer-events: none;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(20, 20, 20, 0.08);
  box-shadow:
    0 26px 60px rgba(20, 20, 20, 0.26),
    0 6px 16px rgba(20, 20, 20, 0.12);
  opacity: 0;
  transform: scale(0.86);
  will-change: transform, opacity;
  /* zoom + fade por CSS (não depende do ticker do GSAP) */
  transition: opacity 200ms ease, transform 380ms var(--ease-out);
}
.clients-preview.is-on {
  opacity: 1;
  transform: scale(1);
}
.clients-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}