/* ==========================================================================
   components/logo-marquee.css — Faixa rolante de logos de clientes

   O movimento só existe sob `.is-animated`, classe que js/modules/logo-marquee.js
   aplica depois de clonar a trilha — o laço contínuo precisa de uma segunda
   trilha idêntica. Sem JavaScript não há clone, então também não há movimento:
   a faixa fica como uma grade estática centralizada.
   ========================================================================== */

.logo-strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs) var(--space-sm);
  margin-block-end: var(--space-lg);
}

/* O rótulo da seção usa a classe .eyebrow (base/typography.css), a mesma de
   "Para quem" e das demais seções — ciano com o fio à esquerda. */

/* --------------------------------------------------------------------------
   Trilha
   -------------------------------------------------------------------------- */

.logo-marquee {
  display: flex;
  gap: var(--gap, 3rem);
  /* Sem JS: grade estática que quebra em linhas e centraliza. */
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.logo-marquee__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--gap, 3rem);
  margin: 0;
}

.logo-marquee__item {
  display: flex;
  align-items: center;
}

/* Todas as logos são renderizadas em branco puro.
   `brightness(0)` zera o RGB e `invert(1)` leva ao branco; o canal alfa não é
   tocado, então o recorte de cada marca continua íntegro.

   Não é escolha estética: três das sete logos entregues (Informa Solutions,
   FORP e CS Energia Solar) têm luminância média em torno de 95/255 e ficam
   em ~3:1 contra o fundo --bg-base. Sob a opacidade da faixa cairiam para
   menos de 2:1 e sumiriam. Forçar branco também dispensa pedir a versão
   monocromática clara a cada cliente novo.

   Por isso o hover NÃO revela a cor original: nas três acima isso as faria
   desaparecer. O hover só sobe a opacidade. */
.logo-marquee__item img {
  block-size: var(--logo-h, 3rem);
  inline-size: auto;
  opacity: 0.7;
  filter: brightness(0) invert(1);
  transition: opacity var(--dur-base) var(--ease-out);
}

.logo-marquee__item img:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Estado animado — aplicado por JS
   -------------------------------------------------------------------------- */

.logo-marquee.is-animated {
  --gap: clamp(2.5rem, 6vw, 4.5rem);
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow: hidden;
  /* Esmaece as duas pontas para o corte não parecer defeito. */
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 6%,
    #000 94%,
    transparent
  );
}

.logo-marquee.is-animated .logo-marquee__track {
  flex: none;
  flex-wrap: nowrap;
  min-inline-size: max-content;
  animation: logo-marquee-scroll var(--marquee-duration, 42s) linear infinite;
}

/* Deslocar por 100% + o gap faz a segunda trilha assumir exatamente a posição
   da primeira: o laço fecha sem salto. */
@keyframes logo-marquee-scroll {
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

/* --------------------------------------------------------------------------
   Pausa
   Restaram o ponteiro e o foco. O botão explícito, que era o que atendia o
   WCAG 2.2.2 (conteúdo em movimento automático por mais de 5s precisa de
   mecanismo de pausa), foi removido a pedido do cliente em 2026-09-02.
   prefers-reduced-motion continua desligando a animação por completo.
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   prefers-reduced-motion
   O módulo JS consulta a mesma media query e nem chega a animar; esta regra é
   a rede de segurança caso a preferência mude com a página já aberta.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .logo-marquee.is-animated {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    mask-image: none;
  }

  .logo-marquee.is-animated .logo-marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    animation: none;
  }

  /* A trilha clonada é decorativa; sem rolagem ela só duplicaria as logos. */
  .logo-marquee__track[aria-hidden="true"] {
    display: none;
  }
}