/**
 * Branwell Logos — frontend styles
 * Handle: bw-styles-logos
 *
 * Continuous auto-scrolling marquee of full-colour logos.
 * Same seamless-loop technique as branwell-reviews: duplicate the
 * list, translate the track by -50% over the loop duration.
 *
 * Scope: all rules under #bw-logos-panel so nothing leaks.
 *
 * Custom properties (set on the root via inline style by the view):
 *   --bw-logos-speed   loop duration (e.g. 40s)
 *   --bw-logos-height  logo height (e.g. 40px)
 */

#bw-logos-panel {
    box-sizing: border-box;
    width: 100%;
    /* No horizontal padding/margin. Top/bottom matches the section
       header rhythm so this widget sits in the same vertical cadence
       as other plugin sections. */
    margin: 4rem 0 2rem;
    padding: 0;
    background: transparent;
    --bw-logos-speed: 40s;
    --bw-logos-height: 56px;
}
#bw-logos-panel *,
#bw-logos-panel *::before,
#bw-logos-panel *::after {
    box-sizing: border-box;
}

/* ============================================================
   Viewport — clips the track and adds edge fade
   ============================================================ */
#bw-logos-panel .bw-logos__viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Edge fade to white — mirrors the reviews plugin treatment so
       logos appear to fade in/out at the edges rather than abruptly
       clipping. Uses mask-image which works on Chrome/Safari/FF. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 80px,
        #000 calc(100% - 80px),
        transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 80px,
        #000 calc(100% - 80px),
        transparent 100%
    );
}

/* ============================================================
   Track — the moving element. Contains both copies of the list.
   ============================================================ */
#bw-logos-panel .bw-logos__track {
    display: flex;
    width: max-content;        /* hug the two lists side-by-side */
    animation: bw-logos-scroll var(--bw-logos-speed) linear infinite;
}

/* Pause on hover — same UX as the reviews marquee */
#bw-logos-panel .bw-logos__viewport:hover .bw-logos__track {
    animation-play-state: paused;
}

/* Respect users who prefer reduced motion — show a static row of the
   first half and skip the animation entirely. */
@media (prefers-reduced-motion: reduce) {
    #bw-logos-panel .bw-logos__track {
        animation: none;
        transform: none;
    }
}

@keyframes bw-logos-scroll {
    from { transform: translate3d(0, 0, 0); }
    /* Translate exactly half the track = one full list width.
       Because the second list is identical, this produces a seamless
       loop with no visible jump. */
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ============================================================
   Lists & cells
   ============================================================ */
#bw-logos-panel .bw-logos__list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

#bw-logos-panel .bw-logos__cell {
    flex-shrink: 0;
    padding: 0 36px;   /* horizontal spacing between logos */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Items & images
   ============================================================ */
#bw-logos-panel .bw-logos__item {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
#bw-logos-panel .bw-logos__item:hover,
#bw-logos-panel .bw-logos__item:focus-visible {
    opacity: 0.7;
    outline: none;
    text-decoration: none;
}

#bw-logos-panel .bw-logos__image {
    display: block;
    height: var(--bw-logos-height);
    width: auto;
    max-width: none;
    /* Full colour — no grayscale filter (per spec) */
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* ============================================================
   Disclaimer
   ============================================================ */
#bw-logos-panel .bw-logos__disclaimer {
    margin: 1.5rem 0 0;
    padding: 0;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    text-align: center;
}
#bw-logos-panel .bw-logos__disclaimer strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text-muted);
    font-weight: 600;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    #bw-logos-panel {
        margin-top: 2.5rem;
    }
    #bw-logos-panel .bw-logos__cell {
        padding: 0 24px;
    }
    #bw-logos-panel .bw-logos__image {
        /* Slightly smaller on mobile so logos don't dominate the screen */
        height: calc(var(--bw-logos-height) * 0.8);
    }
    #bw-logos-panel .bw-logos__viewport {
        -webkit-mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 40px,
            #000 calc(100% - 40px),
            transparent 100%
        );
                mask-image: linear-gradient(
            to right,
            transparent 0,
            #000 40px,
            #000 calc(100% - 40px),
            transparent 100%
        );
    }
    #bw-logos-panel .bw-logos__disclaimer {
        text-align: left;
    }
}