/* ============================================================
   LOGO STRIP — client logos in one moving line (LogoStrip.astro; built for /pricing)
   Requires: tokens.css, page.css

   The approach of the live home page's phone logos (.bc-logos-e), on every width: the track holds the
   logo group twice and moves by half its width, so the loop has no seam. Logos have equal area, not equal
   height (height = base / √(width / height)). Edges fade out. Hover or focus pauses; «reduce motion» stops
   it — the line then scrolls by hand. Timing: --motion-dur (the whole loop), tunable in the Motion panel.
   ============================================================ */

.logo-strip { display: grid; justify-items: center; gap: var(--space-lg); text-align: center; }
/* the link is a .link-arrow (patterns.css) */

.logo-strip__marquee {
  --motion-dur: 48s; /* one loop, as the live home page */
  --fade: var(--space-xl);
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.logo-strip__marquee:focus-visible { outline: var(--border-thick) solid var(--color-accent-indigo); outline-offset: var(--border-thin); border-radius: var(--radius-md); }
.logo-strip__track { display: flex; width: max-content; animation: logo-strip-drift var(--motion-dur) linear infinite; }
.logo-strip__marquee:hover .logo-strip__track, .logo-strip__marquee:focus-within .logo-strip__track { animation-play-state: paused; }
@keyframes logo-strip-drift { to { transform: translateX(-50%); } }

.logo-strip__logos {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-xl);
  margin: 0;
  padding: 0 var(--space-xl) 0 0; /* the gap after the last logo, so the copy joins on the same rhythm */
  list-style: none;
}
.logo-strip__logos img { display: block; width: auto; height: clamp(1rem, calc(3.5rem / sqrt(var(--logo-ratio, 4))), 2.5rem); }

@media (max-width: 47.9375rem) {
  .logo-strip { gap: var(--space); } /* the lead belongs to the logos (apart, they read as two blocks) */
  .logo-strip__lead a { display: block; padding-block: var(--space-xxs); } /* «Meet our customers →» on its own line, 24+ to tap */
  .logo-strip__marquee { --fade: var(--space-md); }
  .logo-strip__logos { gap: var(--space-lg); padding-right: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-strip__marquee { overflow-x: auto; mask-image: none; }
  .logo-strip__track { animation: none; }
  .logo-strip__logos[aria-hidden] { display: none; }
}