/* ============ Brands ============ */
.brands-section {
  padding: var(--space-12) 0;
  background: var(--color-bg);
  overflow: hidden;
}
.brands-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.brands-marquee-wrap {
  position: relative;
  /* Soft fade at both edges */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.brands-marquee {
  display: flex;
  padding-block: var(--space-2);
  width: max-content;
  animation: marquee var(--dur-marquee) linear infinite;
}
.brand-item {
  margin-right: var(--space-4); /* spacing on the item (not gap) keeps the -50% loop seamless */
  padding: var(--space-2-5) var(--space-6);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--brand-tint, var(--color-surface));
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-heading);
  color: var(--ink);
  white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-spring);
}
.brand-item:hover {
  transform: scale(1.06);
}
.brand-primary {
  --brand-tint: var(--tint-1);
  --brand-rot: -2deg;
}
.brand-accent {
  --brand-tint: var(--tint-5);
  --brand-rot: 2deg;
}
.brand-mint {
  --brand-tint: var(--tint-3);
  --brand-rot: -1deg;
}
.brand-sky {
  --brand-tint: var(--tint-4);
  --brand-rot: 3deg;
}
.brand-cream {
  --brand-tint: var(--tint-2);
  --brand-rot: -3deg;
}
.brand-primary-dark {
  --brand-tint: var(--primary-300);
  --brand-rot: 1deg;
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.brands-marquee-wrap:hover .brands-marquee {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .brands-marquee {
    animation: none;
  }
}