/* proof.css: proof section builder's rules (numbers, brands marquee, gallery, contact; spec §4.5–§4.8).
   Loaded after site.css; the static (final) layout stays in site.css. Everything here is either a
   motion-only state (scoped under .motion / .brands--marquee) or a small refinement of the rest state. */

/* ------------------------------------------------------------------ brands: marquee rows (§4.6)
   js/brands.js adds .brands--marquee in motion mode only; reduced motion / no JS keep the grid. */
.brands--marquee .brands__rows{
  padding-inline: 0; gap: 16px;
  /* edge fade on the (static) rows box, so the rows can drift ±6vw under a fixed mask */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brands--marquee .brands__row{ height: 72px; margin-inline: -8vw; }   /* wider than the screen: the drift never shows an edge */
.brands--marquee .brands__track{ display: flex; width: max-content; height: 100%; }
.brands--marquee .brands__list,
.brands--marquee .brands__list[aria-hidden="true"]{
  display: flex; flex-wrap: nowrap; align-items: center; gap: 0;
  height: 100%; margin: 0; max-width: none;
}
.brands--marquee .brands__item{ flex: none; margin-inline: 20px; }

/* pause control: a 44 px pill with a pause/play glyph */
.brands__pause{ gap: 10px; padding: 0 18px 0 16px; color: var(--ink); }
.brands__pause-icon{ position: relative; width: 10px; height: 10px; flex: none; }
.brands__pause-icon::before, .brands__pause-icon::after{
  content: ""; position: absolute; top: 0; width: 3px; height: 10px; border-radius: 1px; background: currentColor;
}
.brands__pause-icon::before{ left: 1px; }
.brands__pause-icon::after{ right: 1px; }
.brands__pause.is-paused .brands__pause-icon::before{   /* play triangle */
  left: 1px; width: 0; height: 0; border-radius: 0; background: none;
  border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor;
}
.brands__pause.is-paused .brands__pause-icon::after{ display: none; }