/* ============================================================
   MARQUEE — two-row, opposite-direction scroller (Testimonials)
   No fading: cards stay fully opaque, the row edges get a soft
   mask so cards don't hard-clip. Pauses on hover/touch so a
   visitor can stop and read one. Used only on index.html.
   ============================================================ */

.marquee {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.marquee__row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--sp-4);
  width: max-content;
  animation: marquee-left 46s linear infinite;
}
.marquee__row--reverse .marquee__track { animation-name: marquee-right; }
.marquee__row:hover .marquee__track,
.marquee__row.is-touched .marquee__track {
  animation-play-state: paused;
}
.marquee .testimonial-card {
  width: 320px;
  flex: 0 0 auto;
}
@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}
@media (max-width: 640px) {
  .marquee .testimonial-card { width: 82vw; max-width: 320px; }
}