/* Trust logo strip — two-row infinite marquee
 * Companion to the homepage "Trust logo strip" block. Scoped under [data-logo-strip].
 *
 * CSS-only marquee (no JS): each .logo-track holds its logo set DUPLICATED x2, and we
 * translateX 0 -> -50% (== exactly one set) linearly + infinitely, so the wrap is seamless.
 * Row 2 reverses direction (scrolls left-to-right). Both side edges fade via a horizontal
 * mask-image. Surface + shadow come from the compiled design-system --tw-color-* / --tw-shadow-*
 * custom properties (brand floor — no raw brand hex; the mask's #000 is alpha-only, not a colour).
 */

[data-logo-strip] .logo-strip {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* row viewport — clips the moving track and fades both side edges */
[data-logo-strip] .logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* the moving row — content is duplicated x2, so -50% == one full set */
[data-logo-strip] .logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 20px;
  animation: logo-scroll 60s linear infinite;
  will-change: transform;
}
[data-logo-strip] .logo-track--ltr { animation-direction: reverse; }

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* pause the row the visitor is hovering */
[data-logo-strip] .logo-marquee:hover .logo-track { animation-play-state: paused; }

/* logo cell — borderless, content-width, fixed height (no card chrome) */
[data-logo-strip] .logo-box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 12px;
  overflow: hidden;
}
[data-logo-strip] .logo-box img {
  display: block;
  height: 40px;
  width: auto;
  max-width: none;
  object-fit: contain;
}

/* a11y — hold still for visitors who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-logo-strip] .logo-track { animation: none; }
}

/* tighter + a touch quicker on small screens */
@media (max-width: 768px) {
  [data-logo-strip] .logo-strip { gap: 6px; }
  [data-logo-strip] .logo-track { animation-duration: 45s; gap: 14px; }
  [data-logo-strip] .logo-box { height: 60px; padding: 0 10px; }
  [data-logo-strip] .logo-box img { height: 32px; }
}