/* =========================================================
 * 纯七商城 · 动效辅助样式
 * 原则：初始状态全部由 JS(gsap.set) 写入，CSS 只负责容器裁剪
 * 与 will-change 提示 —— JS 加载失败时内容照常显示，不白屏。
 * ========================================================= */

/* 标题遮罩容器：裁剪行内文字，供 yPercent 进场；
 * relative 是为了让揭幕色块以标题自身为定位盒 */
.cq-motion-title {
	position: relative;
	display: block;
	overflow: hidden;
}
.cq-motion-title .cq-t-inner {
	display: inline-block;
	will-change: transform;
}

/* 遮罩揭开层：仅在标题框内扫过，不覆盖整屏
 * 颜色跟随父主题强调色，与主题同一体系 */
.cq-mask-wipe {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: var(--accent-color, #0088ff);
	transform-origin: left center;
	pointer-events: none;
	will-change: transform;
}

/* 图片 reveal 容器：clip-path 由 JS 动画 */
.cq-motion-img {
	will-change: clip-path;
}
.cq-motion-img img {
	will-change: transform;
}

/* 卡片进场由 JS 控制 transform/opacity */
.cq-motion-card {
	will-change: transform, opacity;
}

/* 尊重用户偏好：系统开启减少动效时全部直接呈现 */
@media (prefers-reduced-motion: reduce) {
	.cq-t-inner,
	.cq-mask-wipe,
	.cq-motion-img,
	.cq-motion-img img,
	.cq-motion-card {
		will-change: auto;
	}
}