/* ============================================================
   防盗工厂小图条（Marquee Strip）
   多张小图一排、自动横向滚动、悬停暂停；占用高度小。
   反盗：CSS 背景图（无 <img src>）+ 顶层透明遮罩 + 禁拖拽 + 水印
   （右键禁用在 carousel.js）。客户端防护不能 100% 阻截图，但挡掉
   右键下载/点开大图等常见盗用，且只暴露小尺寸缩略图。
   ============================================================ */

.ms-fc { position: relative; }

.ms-fc__viewport {
  position: relative;
  overflow: hidden;
  /* 左右淡出边缘 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ms-fc__track {
  display: flex;
  width: max-content;
  animation: ms-fc-marquee var(--ms-fc-duration, 40s) linear infinite;
}
.ms-fc:hover .ms-fc__track { animation-play-state: paused; }

.ms-fc__tile {
  position: relative;
  flex: 0 0 auto;
  width: 220px;
  height: 150px;
  /* 间距走 margin（不用 flex gap），让每个 tile 是等宽重复单元，translateX(-50%) 无缝接缝 */
  margin-right: var(--ms-space-4);
  border-radius: var(--ms-radius-md);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--ms-shadow-sm);
  overflow: hidden;
  /* 反盗：禁选择/拖拽，图层不接收指针事件 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 顶层透明遮罩：点不开、不跳转、不可保存 */
.ms-fc__shield {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: transparent;
}

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

@media (max-width: 600px) {
  .ms-fc__tile { width: 150px; height: 104px; }
}

/* 无障碍：减少动效时停滚动，改为可横向手动滑动 */
@media (prefers-reduced-motion: reduce) {
  .ms-fc__viewport { overflow-x: auto; }
  .ms-fc__track { animation: none; }
}