@props(['duration' => 42])

{{--
    Continuous horizontal motion. The slot is rendered twice so the track loops
    seamlessly at -50%; the second copy is hidden from assistive technology.
    Pauses on hover, and is disabled entirely under reduced motion.
--}}
<div {{ $attributes->merge(['class' => 'marquee relative overflow-hidden']) }}
     style="--marquee-duration: {{ $duration }}s">

    <div class="flex w-max marquee-track">
        <div class="flex shrink-0 items-center">{{ $slot }}</div>
        <div class="flex shrink-0 items-center" aria-hidden="true">{{ $slot }}</div>
    </div>

    {{-- Fade the edges so logos enter and leave rather than being clipped. --}}
    <div class="pointer-events-none absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-background to-transparent"></div>
    <div class="pointer-events-none absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-background to-transparent"></div>
</div>