/* ==========================================================
 * 文件: shared/marquee.css
 * 版本: 0.1.0 · 更新: 2026-10-23 · 作者: Claude（为李泓锐）
 * 用途: 横向跑马灯（落地页策略名、数据源等）。位移由 shared/marquee.js 每帧写入，
 *       不用 CSS linear 动画（项目节奏规范禁止 linear）。两侧渐隐用 mask。
 * ========================================================== */

.marquee {
  position: relative;
  display: flex;
  align-items: center;
  gap: 32px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track {
  display: flex;
  flex: none;
  gap: 56px;
  padding-right: 56px;
  will-change: transform;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.marquee__item::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* 「·」分隔的版本（落地页星云 Hero） */
.marquee__track--dots { gap: 28px; padding-right: 28px; }
.marquee__track--dots .marquee__item { gap: 28px; }
.marquee__track--dots .marquee__item::before { content: "·"; width: auto; height: auto; background: none; opacity: 0.6; }

/* 落地页 Hero 底部的策略名条 */
.hero-strip {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 32px;
  height: 72px;
  padding: 0 clamp(20px, 6vw, 96px);
  border-top: 1px solid rgba(188, 210, 255, 0.08);
  background: linear-gradient(180deg, transparent, rgba(3, 6, 26, 0.6));
  font-family: var(--font-heading, inherit);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}

.hero-strip__label {
  font-family: var(--font-num, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 767px) {
  .hero-strip { grid-template-columns: 1fr; height: 56px; }
  .hero-strip__label { display: none; }
}