/* ==========================================================================
   brand-list - 品牌墙 + 无缝跑马灯
   供所有包含 face/brand-list.html 的页面复用（indexV2 / downloadV2 等）
   配套脚本：face/js/brand-list.js（把 .brand-item 复制偶数份包进 .brand-track）
   ========================================================================== */

/* ---------- 品牌墙 ---------- */
.brand-list {
    display: flex;
    gap: 1.63rem;
    width: 100%;
    align-items: stretch;
    justify-content: center;
}

.brand-item {
    font-size: 2rem;
    color: #0E1022;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
    background: #FFFFFF;
    border: 0.13rem solid rgba(255, 255, 255, 0.10);
    border-radius: 0.63rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 11.87rem;
    height: 5.5rem;
    gap: 0.89rem;
    padding: 0 1.38rem;
    white-space: nowrap;
}

.brand-logo {
    height: 40%;
}

.brand-name {
}

/* ---------- 从右往左无缝跑马灯 ---------- */
.brand-list {
    overflow: hidden;
    justify-content: flex-start;
}

/* 用 margin 代替 gap：保证 translateX(-50%) 处两份内容完全重合，无缝衔接 */
.brand-track {
    display: flex;
    width: max-content;
    animation: brand-marquee 30s linear infinite;
}

.brand-track > .brand-item {
    margin-right: 1.63rem; /* 与原 .brand-list 的 gap 保持一致 */
}

.brand-list:hover .brand-track {
    animation-play-state: paused; /* 悬停暂停 */
}

@keyframes brand-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* 无 JS 时兜底：不隐藏品牌（track 不存在则不生效） */
@media (prefers-reduced-motion: reduce) {
    .brand-track {
        animation: none;
    }
}