/* De doorlopende band met koppelingen. Twee identieke groepen achter
   elkaar; de tweede vangt het gat op zodra de eerste half is
   weggeschoven, waardoor de lus naadloos lijkt.

   De namen staan als tekst, niet als logobestand: merklogo's zijn van
   de merken zelf en horen alleen op de site als ze zijn aangeleverd.
   Zodra dat gebeurt, vervangt een <img> hier de tekst. */

@layer components {
  .marquee {
    overflow: hidden;
    /* Aan beide randen vervagen, zodat het niet lijkt of de rij
       abrupt wordt afgesneden. */
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }

  .marquee__track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 45s linear infinite;
  }

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

  @keyframes marquee-scroll {
    to {
      transform: translateX(-50%);
    }
  }

  .marquee__group {
    display: flex;
    gap: var(--space-s);
    margin: 0;
    padding: 0 var(--space-2xs) 0 0;
    list-style: none;
  }

  .marquee__group li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: 10.5rem;
    padding: var(--space-s) var(--space-m);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-s);
    background: #ffffff;
    box-shadow: var(--shadow-card);
    color: var(--color-ink);
    font-size: var(--step--1);
    font-weight: 600;
    white-space: nowrap;
  }

  /* Vaste hoogte, zodat een breed en een smal merkteken even zwaar
     ogen in de rij. */
  .marquee__logo {
    width: auto;
    height: 1.35rem;
    flex: none;
  }

  /* Beweging uit: dan staat de rij gewoon stil, netjes afgebroken over
     meerdere regels, en verdwijnt de dubbele groep. */
  @media (prefers-reduced-motion: reduce) {
    .marquee {
      mask-image: none;
    }

    .marquee__track {
      width: 100%;
      animation: none;
    }

    .marquee__group {
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-2xs);
    }

    .marquee__group[aria-hidden='true'] {
      display: none;
    }
  }
}