/* ── Client Logo Marquee ── */
.clm-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* ── Fade edges ── */
.clm-wrapper[data-fade="yes"][data-direction="left"],
.clm-wrapper[data-fade="yes"][data-direction="right"] {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        black var(--clm-fade-size, 80px),
        black calc(100% - var(--clm-fade-size, 80px)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        black var(--clm-fade-size, 80px),
        black calc(100% - var(--clm-fade-size, 80px)),
        transparent 100%
    );
}
.clm-wrapper[data-fade="yes"][data-direction="up"],
.clm-wrapper[data-fade="yes"][data-direction="down"] {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black var(--clm-fade-size, 80px),
        black calc(100% - var(--clm-fade-size, 80px)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        black var(--clm-fade-size, 80px),
        black calc(100% - var(--clm-fade-size, 80px)),
        transparent 100%
    );
}

/* ── Row ── */
.clm-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    will-change: transform;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

/* Vertical rows */
.clm-wrapper[data-direction="up"]   .clm-row,
.clm-wrapper[data-direction="down"] .clm-row {
    flex-direction: column;
    width: max-content;
}

/* ── Keyframes ── */
@keyframes clm-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes clm-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes clm-up    { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes clm-down  { from { transform: translateY(-50%); } to { transform: translateY(0); } }

.clm-row[data-dir="left"]  { animation-name: clm-left; }
.clm-row[data-dir="right"] { animation-name: clm-right; }
.clm-row[data-dir="up"]    { animation-name: clm-up; }
.clm-row[data-dir="down"]  { animation-name: clm-down; }

/* ── Paused ── */
.clm-row.is-paused { animation-play-state: paused; }

/* ── Set ── */
.clm-set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.clm-wrapper[data-direction="up"]   .clm-set,
.clm-wrapper[data-direction="down"] .clm-set {
    flex-direction: column;
}

/* ── Logo ── */
.clm-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.23,1,0.32,1),
                opacity 0.4s ease,
                box-shadow 0.4s ease;
    text-decoration: none;
}
.clm-logo img {
    display: block;
    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s cubic-bezier(0.23,1,0.32,1);
    -webkit-user-drag: none;
}
.clm-logo.clm-gs img { filter: grayscale(100%); }
.clm-logo.clm-gs:hover img,
.clm-logo[data-hover="colorize"].clm-gs:hover img { filter: grayscale(0%); }
.clm-logo[data-hover="lift"]:hover { transform: translateY(-6px); }

/* ── Separator ── */
.clm-sep {
    flex-shrink: 0;
    pointer-events: none;
    user-select: none;
    padding: 0 4px;
}