/* Partners marquee — seamless right-to-left infinite scroll.

   How "seamless" works: the inner track holds TWO identical copies of the
   partner list rendered server-side. We translate the track from 0 to -50%
   of its width — when the first copy fully scrolls out of view, the second
   copy is now in the exact starting position, and the animation loops with
   no visible jump. Speed scales with the count of items so adding/removing
   partners doesn't need a tweak (--partner-count is set inline in the
   template). Pauses on hover so users can click through. */

.partners-marquee {
    overflow: hidden;
    /* Soft fade on the left/right edges so logos enter/leave the viewport
       smoothly instead of popping at a hard line. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.partners-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    /* Logos have different aspect ratios → different rendered heights. Anchor
       the row to its vertical centre so the visual baseline is consistent. */
    align-items: center;
    width: max-content;
    /* 6 seconds per logo gives a calm, readable pace. Tweak the multiplier
       here to globally speed up / slow down the marquee. */
    animation: partners-marquee-scroll calc(var(--partner-count, 10) * 6s) linear infinite;
}

.partners-marquee:hover .partners-marquee__track,
.partners-marquee:focus-within .partners-marquee__track {
    animation-play-state: paused;
}

.partners-marquee__track > * {
    flex: 0 0 auto;
}

@keyframes partners-marquee-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    /* Respect users who've asked the OS to cut motion — show the logos
       statically instead of an endlessly scrolling row. */
    .partners-marquee__track {
        animation: none;
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
    }
}