/* "Worked with and for" — a title/subtitle (same type treatment as the
   testimonials header) over a list of client names that fade + slide up
   as they scroll into view (js/render-worked-with.js). Like .project and
   .testimonials the section is transparent and declares the light theme
   tokens purely so section-theme.js brings the page back to light while
   it's active — it doesn't paint itself, so it cross-fades with the rest
   of the page instead of snapping. */
.worked-with {
  padding: calc(var(--space-5) * 3) var(--space-3);
  /* Centered to match the header and project titles/subtitles, which are
     all centered too. */
  text-align: center;
  --section-bg: var(--color-bg);
  --section-text: var(--color-text);
  --section-text-muted: var(--color-text-muted);
}

.worked-with__header {
  margin-bottom: var(--space-5);
}

/* --current-* (not the static --color-*): this section is transparent and
   can still be transitioning from a dark section as its heading scrolls
   in — same reasoning as .testimonials__name / .project__name. */
.worked-with__title {
  font-size: var(--font-size-base);
  letter-spacing: 0;
  line-height: var(--line-height-heading);
  color: var(--current-text, var(--color-text));
  transition: color 0.6s ease;
}

.worked-with__subtitle {
  font-size: var(--font-size-base);
  letter-spacing: 0;
  line-height: var(--line-height-heading);
  color: var(--current-text-muted, var(--color-text-muted));
  transition: color 0.6s ease;
  margin-top: var(--space-1);
}

.worked-with__list {
  list-style: none;
}

/* The names read as the focus of the section — larger than the H2 title,
   muted, airy line-height. Each starts shifted down + transparent and is
   revealed (class added by the IntersectionObserver) as it scrolls in. */
.worked-with__name {
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.5;
  color: var(--current-text-muted, var(--color-text-muted));
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.6s ease, transform 0.6s ease, color 0.6s ease;
}

.worked-with__name.is-revealed {
  opacity: 1;
  transform: none;
}

/* No motion: show every name in place, no fade/slide. */
@media (prefers-reduced-motion: reduce) {
  .worked-with__name {
    opacity: 1;
    transform: none;
    transition: color 0.6s ease;
  }
}