.logo-ticker {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 0;
}

/* Edge fade */
.logo-ticker.lt-fade:before,
.logo-ticker.lt-fade:after {
    content: "";
    position: absolute;
    top: 0;
    width: 10%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
/* Feather mask — fades logos to transparent at both edges.
   Works on ANY background (no color needed). */
.logo-ticker.lt-mask {
    /* --lt-feather = how wide the fade is on each side */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--lt-feather, 10%),
        #000 calc(100% - var(--lt-feather, 10%)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 var(--lt-feather, 10%),
        #000 calc(100% - var(--lt-feather, 10%)),
        transparent 100%
    );
}

.logo-ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: logo-ticker-slide var(--lt-duration, 40s) linear infinite;
    will-change: transform;
}

.logo-ticker[data-direction="right"] .logo-ticker-track {
    animation-direction: reverse;
}

/* Pause on hover */
.logo-ticker[data-pause="1"]:hover .logo-ticker-track {
    animation-play-state: paused;
}

.logo-ticker-item {
    display: inline-flex;
    align-items: center;
    margin: 0 1rem;
    flex: 0 0 auto;
}

.logo-ticker-item img {
    display: block;
    width: auto;
    transition: opacity .3s ease, filter .3s ease;
}

/* Grayscale / dim effect */
.logo-ticker-track.lt-grayscale .logo-ticker-item img {
    opacity: .5;
    filter: grayscale(100%);
}
.logo-ticker-track.lt-grayscale .logo-ticker-item:hover img {
    opacity: 1;
    filter: grayscale(0%);
}

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

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .logo-ticker-track {
        animation: none;
    }
}