/* ==========================================================================
   AD PHASE — Home: infinite loops for the platform logos and the testimonials
   Seamless (content is duplicated, the track moves exactly half its width),
   pauses on hover/focus, stops for reduced-motion users.
   ========================================================================== */
@keyframes hlLoop{ to{ transform: translate3d(-50%, 0, 0); } }

/* ---- platform logos: original colours, each on a white chip so every logo stays readable ---- */
.logo-loop{
  overflow: hidden; direction: ltr; margin-top: var(--sp-4);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.logo-loop__row{ display: flex; width: max-content; animation: hlLoop 38s linear infinite; will-change: transform; }
.logo-loop:hover .logo-loop__row{ animation-play-state: paused; }
.logo-loop__grp{ display: flex; gap: var(--sp-3); padding-inline-end: var(--sp-3); }
.logo-chip{
  flex: 0 0 auto; display: grid; place-items: center; width: 210px; height: 88px; border-radius: 22px;
  background: #fff; border: 1px solid rgba(13,23,18,.08); box-shadow: 0 10px 28px -16px rgba(0,0,0,.5);
}
.logo-chip img{ height: 34px; max-width: 148px; width: auto; object-fit: contain; filter: none; opacity: 1; }   /* the logos' own colours */

/* ---- testimonials ---- */
.testi-loop{
  overflow: hidden; direction: ltr; margin-top: var(--sp-6);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.testi-loop__row{ display: flex; width: max-content; animation: hlLoop 80s linear infinite; will-change: transform; }
.testi-loop:hover .testi-loop__row, .testi-loop:focus-within .testi-loop__row{ animation-play-state: paused; }
.testi-loop__grp{ display: flex; gap: var(--sp-4); padding-inline-end: var(--sp-4); }
.testi-loop .testimonial{ flex: 0 0 clamp(300px, 34vw, 480px); direction: rtl; margin: 0; }

@media (max-width: 700px){
  .logo-chip{ width: 160px; height: 72px; border-radius: 18px; } .logo-chip img{ height: 28px; max-width: 112px; }
}
@media (prefers-reduced-motion: reduce){
  .logo-loop__row, .testi-loop__row{ animation: none; }
  .logo-loop, .testi-loop{ overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .logo-loop__grp[aria-hidden="true"], .testi-loop__grp[aria-hidden="true"]{ display: none; }
}