/* ============================================================
   Logo Carousel Pro — Public Styles
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────── */
.lcp-carousel-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── Track outer (clip box) ──────────────────────────────── */
.lcp-carousel-track-outer {
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* ── Track (moving strip) ────────────────────────────────── */
.lcp-carousel-wrapper.lcp-mode-horizontal .lcp-carousel-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: max-content;
    will-change: transform;
}

.lcp-carousel-wrapper.lcp-mode-vertical .lcp-carousel-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: max-content;
    will-change: transform;
}

/* ── Logo item ───────────────────────────────────────────── */
.lcp-carousel-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* ── Logo image ──────────────────────────────────────────── */
.lcp-logo-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: grayscale(30%) opacity(0.75);
    transition: filter 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

/* ── Link wrapper ────────────────────────────────────────── */
.lcp-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    cursor: pointer;
}

/* ── Hover: colorize + lift ──────────────────────────────── */
.lcp-carousel-item:hover .lcp-logo-img,
.lcp-logo-link:hover .lcp-logo-img {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.06);
}

/* ── Pause animation on hover ────────────────────────────── */
.lcp-carousel-wrapper:hover .lcp-carousel-track {
    animation-play-state: paused !important;
}

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes lcp-scroll-horizontal {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes lcp-scroll-vertical {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* ── Running state ───────────────────────────────────────── */
.lcp-carousel-wrapper.lcp-mode-horizontal .lcp-carousel-track.lcp-running {
    animation-name:            lcp-scroll-horizontal;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode:       none;
    animation-play-state:      running;
}

.lcp-carousel-wrapper.lcp-mode-vertical .lcp-carousel-track.lcp-running {
    animation-name:            lcp-scroll-vertical;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode:       none;
    animation-play-state:      running;
}

/* ── Fade edges using CSS mask (works on any background) ─── */
.lcp-carousel-wrapper.lcp-mode-horizontal .lcp-carousel-track-outer {
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 10%,
        black 90%,
        transparent 100%
    );
}

.lcp-carousel-wrapper.lcp-mode-vertical .lcp-carousel-track-outer {
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 12%,
        black 88%,
        transparent 100%
    );
}

/* ── Responsive: never overflow container ────────────────── */
.lcp-carousel-wrapper * {
    box-sizing: border-box;
}