/* ==========================================================================
   Marcas
   Carrossel contínuo, pausável no hover e no foco.
   Os logotipos são arquivos oficiais dos fabricantes, exibidos sem
   recorte de símbolo, troca de cor, distorção ou filtro permanente.
   ========================================================================== */

.brands { position: relative; overflow: hidden; }

/* ---- Marquee ---- */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: clamp(1.9rem, 3.2vw, 3rem);
  /* Faixa branca: sem o grayscale, o fundo claro é o que faz as cores
     originais dos logotipos aparecerem com o contraste que elas têm impressas. */
  background: var(--surface);
  border-block: 1px solid var(--line);
  /* Evita corte seco nas bordas */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  padding-right: clamp(2.5rem, 6vw, 6rem);
  /* Sem min-width: 100%. Com sete marcas em tela larga o track era esticado
     além do conteúdo e sobrava um vão vazio a cada volta. O JS repete os
     itens até o track passar da largura da viewport. */
  animation: marqueeSlide var(--marquee-duration, 42s) linear infinite;
  will-change: transform;
}

@keyframes marqueeSlide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .marquee__track { animation: none; }
  .marquee__track + .marquee__track { display: none; }
}

/* Cada marca ocupa uma caixa de largura fixa: logotipos largos (Casale,
   Civemasa) e altos (Tatu) passam a ter o mesmo peso visual, sem que
   nenhum deles seja recortado, esticado ou recolorido. */
.marquee__item {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(120px, 13vw, 168px);
  height: clamp(44px, 4.6vw, 62px);
  scroll-snap-align: center;
}

.marquee__item img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Cores oficiais de cada fabricante, sem grayscale nem qualquer filtro
     que altere a identidade da marca. O hover mexe só na opacidade. */
  opacity: .82;
  transition: opacity var(--d-base) var(--e-out);
}

/* O logotipo Tatu Marchesan é quase quadrado: sem este ajuste ele
   apareceria bem menor que os wordmarks horizontais. */
.marquee__item img[alt="Tatu Marchesan"] { max-height: 112%; }

.marquee__item:hover img { opacity: 1; }

/* Marcas sem arquivo oficial disponível: placa neutra, nunca um logo recriado */
.marquee__item--pending {
  font-family: var(--ff-display);
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tx-faint);
  padding-inline: 0.4rem;
}