/* ============================================================
   marquee.css — continuous horizontal brand/logo strip
   Monochrome logos (white in dark, black in light); seamless loop.
   ============================================================ */

.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 26px 0;
  border-block: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}

/* edge fades */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(48px, 12vw, 160px);
  z-index: 2;
  pointer-events: none;
}
.marquee::before { inset-inline-start: 0; background: linear-gradient(to right, var(--bg), transparent); }
.marquee::after  { inset-inline-end: 0;  background: linear-gradient(to left,  var(--bg), transparent); }
[dir="rtl"] .marquee::before { background: linear-gradient(to left, var(--bg), transparent); }
[dir="rtl"] .marquee::after  { background: linear-gradient(to right, var(--bg), transparent); }

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* two identical halves → seamless */
}
/* RTL: scroll the other direction */
[dir="rtl"] .marquee-track { animation-name: marquee-scroll-rtl; }
@keyframes marquee-scroll-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

/* each item carries its own trailing margin (no flex gap) so -50% is seamless */
.brand-item {
  display: inline-flex;
  align-items: center;
  margin-inline-end: clamp(38px, 5vw, 64px);
  flex: 0 0 auto;
}

.brand-logo {
  height: 26px;
  width: auto;
  opacity: 0.55;
  filter: brightness(0) invert(1);        /* dark mode → white */
  transition: opacity var(--speed) ease;
}
[data-theme="light"] .brand-logo { filter: brightness(0); }  /* light mode → black */
.brand-item:hover .brand-logo { opacity: 1; }

.brand-word {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--speed) ease;
}
.brand-item:hover .brand-word { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 18px 8px; width: 100%; }
  .marquee-track > .brand-item:nth-child(n + 25) { display: none; } /* hide the duplicate half */
}