/* ==========================================================================
 * HBC Logo Marquee — 品牌 LOGO 自动轮播
 *
 * 核心:track 含两份 LOGO,从 translateX(0) 滚到 translateX(-50%) 时
 * 第二份正好接上第一份的起点 → 视觉无缝。
 * 用 padding 模拟 LOGO 间距,确保两份拼接处间距与组内一致,无抖动。
 * ========================================================================== */

.hbc-logo-marquee {
	position: relative;
	overflow: hidden;
	width: 100%;
	background-color: #FFFFFF;
	box-sizing: border-box;
	--hbc-logo-gap: 80px;
	--hbc-marquee-fade: 80px;
}

.hbc-logo-marquee * {
	box-sizing: border-box;
}

/* 滚动轨道 — 用 max-content 让其自适应内容真实宽度 */
.hbc-logo-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: max-content;
	animation-name: hbc-logo-marquee-scroll;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
}

/* 单个 LOGO 容器 —— 用 padding 左右各取 gap/2,
 * 这样组内相邻 = gap/2 + gap/2,组间也 = gap,完美对称无抖动 */
.hbc-logo-marquee__item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 calc(var(--hbc-logo-gap) / 2);
	color: inherit;
	text-decoration: none;
	line-height: 1;
}

.hbc-logo-marquee__img {
	display: block;
	height: 56px;
	width: auto;
	max-width: none;        /* 防 Elementor 全局 img max-width:100% 干扰 */
	object-fit: contain;
	transition: opacity 0.25s ease, filter 0.25s ease;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;   /* 让 hover/click 落在父 .item 上,提升点击区域 */
}

/* 父 item 取消 pointer-events 屏蔽,仅 img 不接收 */
.hbc-logo-marquee__item {
	pointer-events: auto;
}

/* ==========================================================================
 *  滚动方向(由 prefix_class hbc-logo-marquee-dir-* 切换)
 * ========================================================================== */
.hbc-logo-marquee-dir-left .hbc-logo-marquee__track {
	animation-direction: normal;
}

.hbc-logo-marquee-dir-right .hbc-logo-marquee__track {
	animation-direction: reverse;
}

/* 默认动画:向左 — 0 → -50% (一组宽度) */
@keyframes hbc-logo-marquee-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* ==========================================================================
 *  悬停暂停
 * ========================================================================== */
.hbc-logo-marquee-pause-yes:hover .hbc-logo-marquee__track,
.hbc-logo-marquee-pause-yes:focus-within .hbc-logo-marquee__track {
	animation-play-state: paused;
}

/* ==========================================================================
 *  灰度效果(由 prefix_class hbc-logo-marquee-gs-* 切换)
 * ========================================================================== */
.hbc-logo-marquee-gs-on-default .hbc-logo-marquee__img {
	filter: grayscale(100%);
}
.hbc-logo-marquee-gs-on-default .hbc-logo-marquee__item:hover .hbc-logo-marquee__img,
.hbc-logo-marquee-gs-on-default .hbc-logo-marquee__item:focus-within .hbc-logo-marquee__img {
	filter: grayscale(0%);
}

.hbc-logo-marquee-gs-on-always .hbc-logo-marquee__img {
	filter: grayscale(100%);
}

/* ==========================================================================
 *  左右边缘渐隐
 * ========================================================================== */
.hbc-logo-marquee-fade-yes {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--hbc-marquee-fade),
		#000 calc(100% - var(--hbc-marquee-fade)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--hbc-marquee-fade),
		#000 calc(100% - var(--hbc-marquee-fade)),
		transparent 100%
	);
}

/* ==========================================================================
 *  无障碍:尊重「减少动效」系统偏好
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.hbc-logo-marquee__track {
		animation: none;
	}
}

/* 键盘聚焦:让链接 LOGO 有清晰的轮廓 */
a.hbc-logo-marquee__item:focus-visible {
	outline: 2px solid #EE6B2D;
	outline-offset: 4px;
	border-radius: 4px;
}