/* Logo marquee — the endless client-logo scroller.
   Notes: docs/component-logo-marquee-notes.md */

/* ── Band ── */
.logo-marquee-section{
  background:linear-gradient(180deg,#faf9f6 0%,#fff 20%,#fff 82%,#faf9f6 100%);
  padding:1.75rem 0 2rem;
}

/* ── Label ── */
.logo-marquee-label{text-align:center;font-family:var(--body);font-size:.875rem;font-weight:800;letter-spacing:.3em;text-transform:uppercase;color:#6b6b6b;margin-bottom:1.2rem}
.logo-marquee-section .logo-marquee-label{font-family:var(--display);font-size:.875rem;font-weight:700;letter-spacing:.25em;color:#2A2A2A;margin-bottom:.8rem}

/* ── Track ── */
.logo-marquee-track{
  overflow:hidden;
  mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 10%,black 90%,transparent 100%);
}

/* ── Content ── Spacing is margin-right on the item, not gap on the
   container. Duration is derived from the track width: see the notes. */
.logo-marquee-content{display:flex;align-items:center;animation:logo-marquee-scroll 104s linear infinite;width:max-content;will-change:transform}
.logo-marquee-content img{margin-right:84px}
.logo-marquee-content:hover{animation-play-state:paused}
.logo-marquee-content img{height:44px;width:auto;opacity:1;transition:opacity .3s;flex-shrink:0}
.logo-marquee-content img:hover{opacity:.7}

@keyframes logo-marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-33.333%)}}

/* Reduced motion. */
@media (prefers-reduced-motion:reduce){
  .logo-marquee-content{animation:none;will-change:auto;transform:none}
}