/* ============================================================
   品牌滚动展示组件样式
   仿 geotopone.com 效果：纯 CSS 无限滚动
   ============================================================ */

/* ── 外层区块 ── */
.bm-section {
	padding: 3rem 0;
	background-color: #ffffff;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	overflow: hidden;
}

/* ── 内部 flex 布局（标签 + 滚动区） ── */
.bm-inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* ── 左侧标签 ── */
.bm-side-label {
	flex-shrink: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #888;
	white-space: nowrap;
	min-width: 5rem;
	text-align: left;
}

/* ── 滚动视口（裁剪溢出） ── */
.bm-viewport {
	position: relative;
	flex: 1;
	overflow: hidden;
}

/* ── 左右渐变遮罩 ── */
.bm-fade-left,
.bm-fade-right {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 10;
	width: 80px;
	pointer-events: none;
}

.bm-fade-left {
	left: 0;
	background: linear-gradient(to right, #ffffff, transparent);
}

.bm-fade-right {
	right: 0;
	background: linear-gradient(to left, #ffffff, transparent);
}

/* ── 滚动轨道（两倍宽，flex 不换行） ── */
.bm-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: var(--bm-anim, bm-marquee-left) var(--bm-speed, 22s) linear infinite;

	/* GPU 加速 */
	will-change: transform;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* ── 悬停暂停 ── */
.bm-pause-on-hover:hover {
	animation-play-state: paused;
}

/* ── 灰度滤镜 ── */
.bm-grayscale {
	filter: grayscale(1) brightness(0);
}

/* ── 单个品牌项 ── */
.bm-item {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.5rem;
	padding-right: 2rem; /* 被 Elementor slider 覆盖 */
	user-select: none;
}

.bm-item img {
	/* 尺寸完全由 JS onload 按比例设置，CSS 不干预 */
	display: block;
	height: auto;
	width: auto;
	max-width: none;
	pointer-events: none;
	vertical-align: middle;
}

.bm-brand-label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: #222;
	white-space: nowrap;
}

/* ── 品牌链接 ── */
.bm-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s ease;
}

.bm-link:hover {
	opacity: 0.7;
}

/* ============================================================
   关键帧动画
   向左：0% → -50%（两份内容，平移一份的宽度即可无缝衔接）
   向右：-50% → 0%（反向）
   ============================================================ */
@keyframes bm-marquee-left {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@keyframes bm-marquee-right {
	0%   { transform: translateX(-50%); }
	100% { transform: translateX(0); }
}

/* ── 响应式：移动端隐藏侧标签 ── */
@media (max-width: 767px) {
	.bm-side-label {
		display: none;
	}

	.bm-inner {
		padding: 0 1rem;
	}

	.bm-fade-left,
	.bm-fade-right {
		width: 40px;
	}
}