/* ============================================================
   ds-motion.css — design-system-v1 第2层：动效系统
   核心分层纪律（源自 Heboo）：CSS 管全部样式与循环动画，
   eq.js 只加类名（.ds-in-view / .ds-line-in）。
   零 JS 兜底：所有初始隐藏态仅在 html:not(.no-js) 下生效，
   无 JS 时内容直出、完整可读。
   ============================================================ */

/* ---------- 1. 进场 reveal（JS 触发：IntersectionObserver 加 .ds-in-view） ---------- */
html:not(.no-js) [data-ds-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-out);
}
html:not(.no-js) [data-ds-reveal].ds-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 方向变体 */
html:not(.no-js) [data-ds-reveal="left"]  { transform: translateX(-32px); }
html:not(.no-js) [data-ds-reveal="right"] { transform: translateX(32px); }
html:not(.no-js) [data-ds-reveal="left"].ds-in-view,
html:not(.no-js) [data-ds-reveal="right"].ds-in-view { transform: translateX(0); }

/* ---------- 2. stagger 子项依次进场（容器加 .ds-stagger，延迟纯 CSS） ---------- */
html:not(.no-js) .ds-stagger[data-ds-reveal] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--ds-dur-1) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out);
}
html:not(.no-js) .ds-stagger[data-ds-reveal].ds-in-view > * { opacity: 1; transform: translateY(0); }
html:not(.no-js) .ds-stagger[data-ds-reveal].ds-in-view > *:nth-child(1) { transition-delay: calc(var(--ds-stagger) * 0); }
html:not(.no-js) .ds-stagger[data-ds-reveal].ds-in-view > *:nth-child(2) { transition-delay: calc(var(--ds-stagger) * 1); }
html:not(.no-js) .ds-stagger[data-ds-reveal].ds-in-view > *:nth-child(3) { transition-delay: calc(var(--ds-stagger) * 2); }
html:not(.no-js) .ds-stagger[data-ds-reveal].ds-in-view > *:nth-child(4) { transition-delay: calc(var(--ds-stagger) * 3); }
html:not(.no-js) .ds-stagger[data-ds-reveal].ds-in-view > *:nth-child(5) { transition-delay: calc(var(--ds-stagger) * 4); }
html:not(.no-js) .ds-stagger[data-ds-reveal].ds-in-view > *:nth-child(6) { transition-delay: calc(var(--ds-stagger) * 5); }
html:not(.no-js) .ds-stagger[data-ds-reveal].ds-in-view > *:nth-child(7) { transition-delay: calc(var(--ds-stagger) * 6); }
html:not(.no-js) .ds-stagger[data-ds-reveal].ds-in-view > *:nth-child(8) { transition-delay: calc(var(--ds-stagger) * 7); }

/* ---------- 3. 行擦亮 lines（JS 拆 <span class=ds-line>，触发逐行 .ds-line-in） ---------- */
html:not(.no-js) [data-ds-lines] .ds-line {
  opacity: var(--ds-line-dim);
  transition: opacity .6s var(--ds-ease-out);
}
html:not(.no-js) [data-ds-lines] .ds-line.ds-line-in { opacity: 1; }

/* ---------- 4. marquee 无缝滚动（内容 ×2，副本 aria-hidden） ---------- */
@keyframes ds-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ds-marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
}
.ds-marquee-track {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  justify-content: space-around;
  gap: 3em;
  padding-right: 3em;
  animation: ds-marquee 22s linear infinite;
}
.ds-marquee:hover .ds-marquee-track { animation-play-state: paused; }

/* ---------- 5. 圆形旋转 badge（SVG textPath 环形字） ---------- */
@keyframes ds-spin { to { transform: rotate(1turn); } }
.ds-spin { animation: ds-spin 20s linear infinite; }

/* ---------- 6. 按钮双层文本上滑（Heboo tp-btn 精髓） ---------- */
.ds-btn-swap .ds-swap-wrap {
  position: relative;
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
}
.ds-btn-swap .ds-text-1 { display: block; transition: transform .3s var(--ds-ease-in-out); }
.ds-btn-swap .ds-text-2 {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  white-space: nowrap;
  transition: transform .3s var(--ds-ease-in-out);
}
.ds-btn-swap:hover .ds-text-1,
.ds-btn-swap:focus-visible .ds-text-1 { transform: translateY(-100%); }
.ds-btn-swap:hover .ds-text-2,
.ds-btn-swap:focus-visible .ds-text-2 { transform: translateY(-100%); }

/* ---------- 7. details 答案渐显（仅装饰，不改布局） ---------- */
@keyframes ds-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
html:not(.no-js) details[open] > .ds-faq-answer { animation: ds-fade-in .35s var(--ds-ease-out); }

/* ---------- 8. 降级：reduced-motion 全部归零 ---------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.no-js) [data-ds-reveal],
  html:not(.no-js) .ds-stagger[data-ds-reveal] > *,
  html:not(.no-js) [data-ds-lines] .ds-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ds-marquee-track,
  .ds-spin,
  details[open] > .ds-faq-answer { animation: none !important; }
}