/* ==========================================================================
   Marquee
   ==========================================================================
   One CSS-only infinite marquee, used for the project covers in the hero and
   the client logos further down. Zero JavaScript: the pause control is a
   checkbox, and the keyframes live in motion.css.

   THE SEAM. The track animates by exactly -50%, which only lands cleanly if
   each copy is exactly half the track. So the gap lives INSIDE each list and
   each list carries a trailing padding of the same size, both driven by
   --marquee-gap so they cannot drift apart. Put a gap on the track instead and
   the loop hitches by half a gap once per cycle.

   --marquee-repeat exists because a copy narrower than the viewport leaves
   visible empty space before the next arrives. Seven 29px logos do not span
   1440px, so they are repeated until they do.

   The edge fade is a mask, not a gradient overlay. An overlay would have to
   know whether it sits on the light page or the dark band; a mask fades to
   transparent and lets whatever is behind show through. It is applied to the
   rail only, never the wrapper, or it eats the pause control too.
   ========================================================================== */

.marquee {
  --marquee-duration: 44s;
  --marquee-gap: 3.5rem;
}

.marquee__viewport { position: relative; overflow: hidden; }

.marquee__viewport--fade {
  mask-image: linear-gradient(to right, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5rem, #000 calc(100% - 5rem), transparent);
}

/* .marquee-track carries the animation itself, from motion.css, so the pause
   wiring and the keyframe stay in one place. */
.marquee-track { display: flex; width: max-content; }

.marquee--reverse .marquee-track { animation-direction: reverse; }

.marquee__list {
  display: flex;
  width: max-content;
  flex-shrink: 0;
  align-items: center;
  column-gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
}

/* Keeps repeated groups as flex children of the one list rather than nesting a
   second flex context inside it. */
.marquee__repeat { display: contents; }

/* --------------------------------------------------------------------------
   Reduced motion turns the rail into a static wrapped wall. Merely freezing it
   would leave later items parked off screen with no way to reach them.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .marquee__viewport { overflow: visible; }
  .marquee__viewport--fade { mask-image: none; -webkit-mask-image: none; }
  .marquee-track { width: 100%; }
  .marquee__list {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.5rem;
    padding-right: 0;
  }
  /* The duplicate copies would just show every item twice on a static wall. */
  .marquee__copy--dupe,
  .marquee__repeat--dupe,
  .marquee__control { display: none; }
}

/* --------------------------------------------------------------------------
   Pause control.

   No permanent label: it would sit under the rail as visual noise. It is still
   a real control, not hover-only, and surfaces the moment a keyboard reaches
   it. Hover and focus-within pause the rail too, but neither is a mechanism a
   touch or keyboard user can rely on, which is exactly what WCAG 2.2.2 asks
   for.
   -------------------------------------------------------------------------- */
.marquee__control--gutter {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-max);
  padding-inline: var(--container-gutter);
}

@media (min-width: 768px) {
  .marquee__control--gutter { padding-inline: var(--container-gutter-md); }
}

.marquee-pause {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.marquee__label {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  cursor: pointer;
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
  font-weight: var(--text-label-sm-weight);
  color: var(--muted-foreground);
}

.marquee-pause:focus-visible + .marquee__label {
  position: static;
  width: auto; height: auto; margin-top: 1rem; padding: 0.25rem 0.75rem;
  overflow: visible; clip-path: none; white-space: normal;
  display: inline-flex;
  border-radius: var(--radius-full);
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}