/* XL Logo Marquee — frontend */

.xllm-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.xllm-wrapper * {
    box-sizing: border-box;
}

.xllm-track {
    display: flex;
    width: max-content;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.xllm-group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

.xllm-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.xllm-item img {
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.xllm-item a {
    display: inline-flex;
    line-height: 0;
}

/* -------- Horizontal -------- */
.xllm-horizontal .xllm-track {
    flex-direction: row;
}
.xllm-horizontal .xllm-group {
    flex-direction: row;
}

.xllm-ready.xllm-dir-left .xllm-track {
    animation-name: xllm-scroll-left;
}
.xllm-ready.xllm-dir-right .xllm-track {
    animation-name: xllm-scroll-right;
}

@keyframes xllm-scroll-left {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes xllm-scroll-right {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* -------- Vertical -------- */
.xllm-vertical .xllm-track {
    flex-direction: column;
    width: 100%;
    height: max-content;
}
.xllm-vertical .xllm-group {
    flex-direction: column;
    width: 100%;
}
.xllm-vertical .xllm-item {
    width: 100%;
}

.xllm-ready.xllm-dir-up .xllm-track {
    animation-name: xllm-scroll-up;
}
.xllm-ready.xllm-dir-down .xllm-track {
    animation-name: xllm-scroll-down;
}

@keyframes xllm-scroll-up {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -50%, 0); }
}

@keyframes xllm-scroll-down {
    from { transform: translate3d(0, -50%, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* The logos used to carry a "breathing wave" — a per-item scale(0.9 → 1) pulse
   staggered by --xllm-i. It has been removed: the pop was unwanted, and it also
   put a separate animated (composited) layer on every single logo, which is the
   kind of load that makes the strip hitch once per scroll cycle. The marquee now
   animates exactly one thing: the track's transform. */

/* -------- Modifiers -------- */
.xllm-pause-on-hover:hover .xllm-track {
    animation-play-state: paused;
}

.xllm-grayscale .xllm-item img {
    filter: grayscale(100%);
    opacity: 0.75;
    transition: filter 0.3s ease, opacity 0.3s ease;
}
.xllm-grayscale .xllm-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .xllm-track {
        animation: none !important;
    }
}

/* -------- Section footer decorative line -------- */
.xllm-section-footer {
    height: 2px;
    margin-top: 20px;
    background: linear-gradient(
        to right,
        #B51B5A 0px,              #B51B5A 42px,
        transparent 42px,         transparent 54px,
        #D8D8D8 54px,             #D8D8D8 calc(100% - 54px),
        transparent calc(100% - 54px), transparent calc(100% - 42px),
        #B51B5A calc(100% - 42px), #B51B5A 100%
    );
}