/* =========================================================================
   Etéra Work — Section 7: faixa de destaques (slider)
   Figma: node 6322:967 · anotação pede loop infinito
   ========================================================================= */

.slider {
  padding-block: 16px;
  background-color: var(--brand-color-secondary);
  overflow: hidden;
}

.slider__track {
  display: flex;
  width: max-content;
  animation: slider-scroll 40s linear infinite;
}

/* Pausa ao passar o mouse ou ao focar algo dentro da faixa. */
.slider:hover .slider__track,
.slider:focus-within .slider__track {
  animation-play-state: paused;
}

.slider__group {
  display: flex;
  gap: 32px;
  align-items: center;
  padding-right: 32px;
  list-style: none;
}

.slider__item {
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
}

.slider__sep {
  width: var(--border-width-default);
  height: 38px;
  background-color: var(--white);
}

/* O trilho tem dois grupos idênticos, então deslocar metade dele devolve
   exatamente o ponto de partida e o loop não tem emenda. */
@keyframes slider-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}