/* ============================================================
   20 — Customer logo wall
   Two opposed marquee rows on white. Each authored track already
   exceeds the widest viewport; [data-marquee] clones it once and
   the ROW (track + clone) translates -50% for a seamless loop.

   The distinctive wordmarks are outlined stroke geometry in the
   HTML — weight variety lives in per-mark stroke widths there.
   The <text> marks below use only families that ship on every
   platform (Helvetica/Arial grotesk, Georgia serif); weight and
   tracking are per-mark attributes in the markup, no textLength.
   ============================================================ */

.logos {
  position: relative;
  padding-block: clamp(var(--s-11), 7vw, var(--s-12));
  background: var(--surface);
  overflow: hidden;                   /* belt-and-braces: nothing escapes horizontally */

  --logos-gap: var(--s-10);
  --logos-scale: 1;                   /* single knob for every wordmark's size */

  --logos-f-grotesk: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --logos-f-serif:   Georgia, "Times New Roman", Times, serif;
}

/* ---------------- The line above ---------------- */

/* Anchor for the pause control: revealing it must never reflow the rows,
   so it positions against this wrapper (same idea as base.css .skip-link). */
.logos__head { position: relative; }

.logos__note {
  margin: 0 auto var(--s-9);
  max-width: 34ch;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-snug);
  color: var(--text-body);            /* --c-slate on white ≈ 7.5:1 */
}

/* ---------------- Pause control ----------------
   Visually hidden until focused. On focus it appears ABSOLUTELY
   positioned in the 48px gap under the note (the note's own
   margin-bottom), so revealing it never shifts the marquee rows. */

.logos__pause {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.logos__pause:focus {
  position: absolute;
  top: calc(100% + var(--s-1));       /* .logos__head ends at the note's text box */
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-raised);
  display: inline-flex;
  align-items: center;
  width: max-content;
  height: 44px;                       /* touch/target minimum, fits the 48px gap */
  margin: 0;
  padding-inline: var(--s-5);
  overflow: visible;
  clip-path: none;
  border-radius: var(--r-pill);
  background: var(--c-brand-tint);
  color: var(--c-brand);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-snug);
}

/* ---------------- Marquee ---------------- */

.logos__marquee {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.logos__viewport {
  overflow: hidden;
  /* Dissolve at both edges instead of clipping. */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 1) 88%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 12%,
    rgba(0, 0, 0, 1) 88%,
    rgba(0, 0, 0, 0) 100%
  );
}

.logos__row {
  display: flex;
  width: max-content;
}

/* Only animate once main.js has cloned the track — otherwise a single
   track would slide clean off the screen. The durations below are a
   fallback: the section's own script overwrites both with the row's
   measured track width / 30px-per-second, so the two rows drift at
   identical speed at every breakpoint. */
.js-ready .logos__row--fwd {
  animation: logos-slide 101s linear infinite;
  will-change: transform;             /* scoped: only the rows that actually move */
}
.js-ready .logos__row--rev {
  animation: logos-slide 100s linear infinite reverse;
  will-change: transform;
}

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

/* Pausing is the explicit control's job — it holds BOTH rows, so nothing
   freezes asymmetrically. No hover pause and no hover recolor: the marks
   are inert, and an affordance on inert content is a lie. */
.logos.is-paused .logos__row { animation-play-state: paused; }

.logos__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--logos-gap);
  /* Trailing gap so the seam between track and clone matches the
     internal rhythm exactly; row gap stays 0 so -50% lands true. */
  padding-block: var(--s-2);
  padding-inline: 0 var(--logos-gap);
}

.logos__item { display: flex; align-items: center; }

/* ---------------- Wordmarks ---------------- */

.logos__mark {
  width: auto;
  height: calc(var(--logos-h, 44px) * var(--logos-scale));
  fill: currentColor;
  color: var(--c-slate-light);        /* 4.26:1 on white — > 3:1 graphical */
  overflow: visible;                  /* descenders and the amazon swoosh sit outside the box */
  font-family: var(--logos-f-grotesk);
}

.logos__mark--anthropic,
.logos__mark--marriott { font-family: var(--logos-f-serif); }

/* Per-logo optical sizing. Raw px because this is SVG geometry, not layout
   spacing — an 8pt scale cannot express "amazon and lyft at equal weight".
   Every viewBox is 44 tall with the baseline at y=32, so height is the ONLY
   variable and all baselines stay on one line. Bold strokes (amazon, Uber)
   sit slightly smaller, thin wide caps (MARRIOTT, ATLASSIAN) markedly
   smaller, so ink density matches across the row. */
.logos__mark--openai     { --logos-h: 45px; }
.logos__mark--amazon     { --logos-h: 43px; }
.logos__mark--google     { --logos-h: 45px; }
.logos__mark--anthropic  { --logos-h: 44px; }
.logos__mark--marriott   { --logos-h: 38px; }
.logos__mark--shopify    { --logos-h: 44px; }
.logos__mark--airbnb     { --logos-h: 44px; }
.logos__mark--instacart  { --logos-h: 44px; }
.logos__mark--uber       { --logos-h: 43px; }
.logos__mark--lyft       { --logos-h: 45px; }
.logos__mark--salesforce { --logos-h: 42px; }
.logos__mark--slack      { --logos-h: 44px; }
.logos__mark--twilio     { --logos-h: 45px; }
.logos__mark--atlassian  { --logos-h: 38px; }
.logos__mark--bmw        { --logos-h: 41px; }
.logos__mark--maersk     { --logos-h: 40px; }
.logos__mark--nasdaq     { --logos-h: 44px; }
.logos__mark--zara       { --logos-h: 45px; }

/* ---------------- Narrow screens ---------------- */

@media (max-width: 720px) {
  .logos {
    --logos-gap: var(--s-9);
    --logos-scale: .78;
  }
  .logos__marquee { gap: var(--s-7); }
}

/* ---------------- Reduced motion: one static centred grid ----------------
   base.css collapses every animation to .01ms, which would park the rows at
   -50%. Drop the animation outright, unwrap the viewport/row/track boxes so
   both tracks feed a SINGLE grid, and hide the duplicate marks. */

@media (prefers-reduced-motion: reduce) {
  /* .58 keeps the widest mark (MARRIOTT, ~95px displayed) clear of a
     3-column cell at 360px (~101px), so nothing can clip. */
  .logos { --logos-scale: .58; }

  .logos__row { animation: none !important; width: auto; }
  .js-ready .logos__row--fwd,
  .js-ready .logos__row--rev { will-change: auto; }

  .logos__viewport,
  .logos__row,
  .logos__track { display: contents; }

  .logos__marquee {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    place-items: center;
    gap: var(--s-6) var(--s-2);
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .logos__item--dup { display: none; }
  .logos__pause { display: none; }   /* nothing to pause */
}

@media (prefers-reduced-motion: reduce) and (min-width: 700px) {
  .logos { --logos-scale: .85; }
  .logos__marquee { gap: var(--s-7) var(--s-5); }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1040px) {
  .logos__marquee { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}