/* ═══════════════════════════════════════════════════════════════
   LogoLoop marquee — horizontal-only port of React Bits' <LogoLoop />
   (MIT), animated by static/js/logoloop.js.

   Plus the .cf-sponsors band: the “second footer” strip of partner /
   accreditation logos rendered above .cf-footer on every page
   (templates/_sponsors.html). Light theme shows the logos in full
   colour on white; dark theme shows them monochrome.
   ═══════════════════════════════════════════════════════════════ */

.logoloop {
    position: relative;
    overflow: hidden;
    --logoloop-gap: 32px;
    --logoloop-logoHeight: 28px;
    --logoloop-fadeColorAuto: #ffffff;
}

.logoloop__track {
    display: flex;
    width: max-content;
    will-change: transform;
    user-select: none;
    position: relative;
    z-index: 0;
}

.logoloop__list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.logoloop__item {
    flex: 0 0 auto;
    margin-right: var(--logoloop-gap);
    line-height: 1;
}

.logoloop__item img {
    height: var(--logoloop-logoHeight);
    width: auto;
    display: block;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* Edge fade — colour must match the surface behind the strip. */
.logoloop--fade::before,
.logoloop--fade::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(24px, 8%, 120px);
    pointer-events: none;
    z-index: 10;
}
.logoloop--fade::before {
    left: 0;
    background: linear-gradient(to right,
        var(--logoloop-fadeColor, var(--logoloop-fadeColorAuto)) 0%,
        rgba(0, 0, 0, 0) 100%);
}
.logoloop--fade::after {
    right: 0;
    background: linear-gradient(to left,
        var(--logoloop-fadeColor, var(--logoloop-fadeColorAuto)) 0%,
        rgba(0, 0, 0, 0) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .logoloop__track { transform: translate3d(0, 0, 0) !important; }
}

/* ─────────────────────────────────────────────
   Sponsors band — “second footer” above .cf-footer
   ───────────────────────────────────────────── */
.cf-sponsors {
    --cf-sponsors-bg: #ffffff;
    background: var(--cf-sponsors-bg);
    border-top: 1px solid var(--cf-footer-border);
    margin-top: 4rem;
    padding: 1.6rem 0 1.7rem;
    display: grid;
    row-gap: 1.15rem;
}
body > .cf-sponsors { flex-shrink: 0; }
/* The band takes over the footer's top spacing so the two sit flush. */
.cf-sponsors + .cf-footer { margin-top: 0; }
@media (min-width: 1920px) { .cf-sponsors { margin-top: 5rem; } }

.cf-sponsors .logoloop {
    --logoloop-gap: clamp(30px, 4.5vw, 52px);
    --logoloop-fadeColor: var(--cf-sponsors-bg);
}
/* The crops from the partner strip are already sized in proportion to
   each other — render at native size instead of forcing one height. */
.cf-sponsors .logoloop__item img { height: auto; }

/* Dark theme: “black & white” logos. grayscale+invert turns each crop's
   white background black and its mark light; screen-blending against the
   track background then drops the black away, leaving a monochrome logo
   sitting directly on the band. */
[data-bs-theme="dark"] .cf-sponsors { --cf-sponsors-bg: var(--cf-footer-bg); }
[data-bs-theme="dark"] .cf-sponsors .logoloop__track { background: var(--cf-sponsors-bg); }
[data-bs-theme="dark"] .cf-sponsors .logoloop__item img {
    filter: grayscale(1) invert(1);
    mix-blend-mode: screen;
    opacity: .9;
}
/* No mix-blend-mode → keep the inverted crops seamless on pure black. */
@supports not (mix-blend-mode: screen) {
    [data-bs-theme="dark"] .cf-sponsors { --cf-sponsors-bg: #000000; }
}