/* Logo wall: animated horizontal marquee served via logo.dev.
   Tracks repeat so the scroll is continuous across viewports; the
   first track keeps its semantics for assistive tech, the rest are
   aria-hidden decorative duplicates.

   Animation: each track slides left by one track width + one gap,
   then the next track flows into place. Mask gradients soften the
   edges so chips appear to fade in and out at the boundary. */

.logo-wall {
  padding-block: clamp(2rem, 4vw, 3rem);
  background-color: transparent;
}

.logo-wall__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  font-size: var(--fs-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-muted-foreground);
  line-height: var(--lh-tight);
}
.logo-wall__label .icon { color: var(--brand-teal); }

.logo-wall__marquee {
  --marquee-gap: 0.75rem;
  --marquee-duration: 50s;
  display: flex;
  flex-direction: row;
  gap: var(--marquee-gap);
  overflow: hidden;
  padding: 0.5rem;
  margin-inline: -0.5rem;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-wall__track {
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  justify-content: space-around;
  gap: var(--marquee-gap);
  animation: logo-wall-scroll var(--marquee-duration) linear infinite;
}

.logo-wall__marquee:hover .logo-wall__track {
  animation-play-state: paused;
}

@keyframes logo-wall-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - var(--marquee-gap))); }
}

/* Individual logo chip */
.logo-wall__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0.625rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-card);
  flex-shrink: 0;
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.logo-wall__chip:hover {
  border-color: color-mix(in oklch, var(--color-border) 40%, var(--color-foreground));
  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
  transform: translateY(-1px);
}

.logo-wall__chip-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .logo-wall__track { animation: none; }
  /* Hide duplicate tracks so no offscreen content is left hanging. */
  .logo-wall__track + .logo-wall__track { display: none; }
}