@layer components {

  /* Rows of feature chips gliding past, the second the other way; hovering stops a row.
     Each row holds its list twice, so moving it by one list's width loops without a seam. */
  .marquee {
    display: flex;
    gap: 0.75rem;
    padding-block: 0.4rem;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, var(--black) 10%, var(--black) 90%, transparent);
  }

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

  .marquee__track {
    display: flex;
    flex-shrink: 0;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: glide 60s linear infinite;

    li {
      padding: 0.6rem 1.1rem;
      border: 1px solid var(--color-line);
      border-radius: 99px;
      background: var(--color-surface);
      font-size: 0.95rem;
      white-space: nowrap;
      transition: border-color 0.2s, color 0.2s;
    }

    li:hover {
      border-color: color-mix(in oklch, var(--color-primary) 50%, transparent);
      color: var(--color-primary);
    }
  }

  .marquee--reverse .marquee__track {
    animation-direction: reverse;
    animation-duration: 70s;
  }

  @keyframes glide {
    to {
      translate: calc(-100% - 0.75rem) 0;
    }
  }

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

    .marquee__track {
      flex-wrap: wrap;
      flex-shrink: 1;
      justify-content: center;
      animation: none;
    }

    .marquee__track[aria-hidden] {
      display: none;
    }
  }
}