/* ── BRAND MARQUEE ── */

.brands {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  overflow: hidden;
}

.brands .section-head { margin-bottom: clamp(28px, 4vw, 44px); }

.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
  /*
    Il track parte fermo e si anima solo quando il JS ha misurato la
    larghezza reale del gruppo: evita il primo giro alla velocità sbagliata.
  */
  animation: cc-marquee var(--marquee-duration, 40s) linear infinite;
  animation-play-state: paused;
}

.marquee.is-ready .marquee__track { animation-play-state: running; }

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

.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
  padding-inline: clamp(18px, 2.5vw, 36px);
  list-style: none;
}

@keyframes cc-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }

  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.brand { flex: 0 0 auto; }

.brand__link { display: block; }

.brand__logo {
  height: clamp(28px, 3.4vw, 44px);
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.5;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.brand:hover .brand__logo {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.06);
}

.brand__name {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--muted-2);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.brand:hover .brand__name { color: var(--text); }