.icreon-logo-marquee {
    --icreon-duration: 30s;
    --icreon-set-gap: 60px;
    --icreon-fade: 70px;
    --icreon-fade-color: #ffffff;
    --icreon-bg-color: #ffffff;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.icreon-marquee-track {
    --icreon-translate-distance: -50%;
    display: flex;
    width: max-content;
    gap: var(--icreon-set-gap);
    will-change: transform;
    animation-name: icreon-marquee-left;
    animation-duration: var(--icreon-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

.icreon-logo-marquee[data-direction="right"] .icreon-marquee-track {
    animation-name: icreon-marquee-right;
}

/*
 * A cycle can contain several copies of the configured logo set.
 * JavaScript adds enough copies to make one cycle at least as wide as
 * the visible marquee, then duplicates that complete cycle once.
 * Translating by exactly one cycle makes the join seamless.
 */
.icreon-marquee-cycle {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    gap: var(--icreon-set-gap);
    width: max-content;
}

.icreon-marquee-set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 60px;
}

.icreon-marquee-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icreon-marquee-item a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icreon-marquee-item img {
    display: block;
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 48px;
    object-fit: contain;
    transition-property: opacity, filter, transform;
    transition-timing-function: ease;
    transition-duration: 250ms;
}

.icreon-pause-hover:hover .icreon-marquee-track,
.icreon-pause-focus:focus-within .icreon-marquee-track {
    animation-play-state: paused;
}

/* Safe edge fade overlays; no CSS masks. */
.icreon-edge-fade::before,
.icreon-edge-fade::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--icreon-fade);
    z-index: 10;
    pointer-events: none;
}

.icreon-edge-fade::before {
    left: 0;
    background: linear-gradient(to right, var(--icreon-fade-color, var(--icreon-bg-color, #fff)) 0%, transparent 100%);
}

.icreon-edge-fade::after {
    right: 0;
    background: linear-gradient(to left, var(--icreon-fade-color, var(--icreon-bg-color, #fff)) 0%, transparent 100%);
}

.icreon-infinite-loop .icreon-marquee-track {
    animation-iteration-count: infinite;
}

.icreon-single-loop .icreon-marquee-track {
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes icreon-marquee-left {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(var(--icreon-translate-distance), 0, 0); }
}

@keyframes icreon-marquee-right {
    from { transform: translate3d(var(--icreon-translate-distance), 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .icreon-respect-motion .icreon-marquee-track {
        animation: none !important;
        transform: none !important;
    }

    .icreon-respect-motion .icreon-marquee-cycle[aria-hidden="true"],
    .icreon-respect-motion .icreon-marquee-set[data-icreon-generated="1"] {
        display: none !important;
    }
}