/* Home client strip (patterns/home-logos.php): two rows of the parent theme's Group › Marquee style, one paragraph per
   client with its industry in italics (<em>). Loaded only on pages with a block of class "hm-logos". */
.hm-logos{
  --hm-logos-item-dur: 8s; /* ds-ok: seconds per client, about the design's 30px/s */
  --dg-velocity-max: 17; /* ds-ok: the rows run up to 17 times faster while the page scrolls (dg-velocity, base.js) */
  --dg-velocity-lean: 6deg; /* ds-ok: and lean up to 6deg */
  padding:calc(var(--s-9) + var(--s-5)) 0 var(--s-5);
  background:var(--paper-2);
  overflow:hidden;
}
.hm-logos > .page{display:grid;gap:var(--s-3);max-width:none}
.hm-logos .page > *,.hm-logos__row > *{margin:0}
.hm-logos__row{
  --marquee-gap: var(--s-3);
  --marquee-item: var(--hm-logos-item-dur);
  display:flex;
  gap:var(--s-3);
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 8%,var(--ink) 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,var(--ink) 8%,var(--ink) 92%,transparent);
}
/* the kit sets the whole animation shorthand at (0,3,0): out-rank it so the second row really runs the other way */
.wp-block-group.hm-logos__row--rev.is-style-marquee > .dn-marquee__track{animation-direction:reverse}
/* the row is a flex box (one line before the script runs): keep the max-content track from shrinking to the row */
.hm-logos__row > .dn-marquee__track{flex:none}
/* as in the design, pointing anywhere on the strip stops both rows */
.hm-logos:hover .wp-block-group.is-style-marquee > .dn-marquee__track{animation-play-state:paused}
.hm-logos__row p{
  display:inline-flex;
  flex:none;
  align-items:center;
  gap:var(--s-3);
  padding:var(--s-2) var(--s-4);
  border:1px solid var(--rule);
  border-radius:var(--wp--preset--border-radius--radius-full);
  background:var(--paper);
  font:600 var(--t-l)/1 var(--font-display);
  letter-spacing:-0.015em; /* ds-ok: tracking as in the design, base.css has no tracking tokens */
  white-space:nowrap;
  color:var(--ink-2);
  transition:color var(--dur) var(--ease-press),border-color var(--dur) var(--ease-press);
}
.hm-logos__row p:hover{color:var(--accent);border-color:var(--accent-fill)}
.hm-logos__row em{font:500 var(--t-2xs)/1 var(--font-mono);font-style:normal;letter-spacing:.12em;/* ds-ok: tracking as in the design */text-transform:uppercase;color:var(--ink-3)}
/* editor: every client stays reachable (the running track only exists on the site) */
.editor-styles-wrapper .hm-logos__row{flex-wrap:wrap}
@media (prefers-reduced-motion: reduce){
  .hm-logos__row p{transform:none}
}