/* =========================================================
   animations.css — 动效初始态 / 光标 / 降级
   规则:
   - 初始隐藏态全部挂在 html.js 上(JS 可用才隐藏)
   - gsap 缺失 / prefers-reduced-motion 时 main.js 移除 .js → 全部可见
   - 动画只操作 transform / opacity / clip-path
   ========================================================= */

/* ---- Scroll Reveal 初始态 ---- */
.js [data-reveal] { opacity: 0; transform: translateY(32px); }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

/* ---- Hero 开幕初始态 ---- */
.js .hero__ch { transform: translateY(112%); }
.js .hero__line { transform: scaleX(0); }
.js .hero__top,
.js .hero__tagline,
.js .hero__meta { opacity: 0; transform: translateY(24px); }

/* ---- 光标 ---- */
html.cur, html.cur body, html.cur a, html.cur button, html.cur [data-cursor] { cursor: none; }

/* 按住期间(拖选/拖动):隐藏自定义光标,恢复原生光标保证精确指向 */
html.cur.is-pressing,
html.cur.is-pressing body,
html.cur.is-pressing a,
html.cur.is-pressing button,
html.cur.is-pressing [data-cursor] { cursor: auto; }
html.cur.is-pressing .cursor,
html.cur.is-pressing .cursor-ring { opacity: 0 !important; }

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--color-ink);
  pointer-events: none;
  display: none;
  opacity: 0;
  transition:
    width var(--duration-fast) var(--ease-soft),
    height var(--duration-fast) var(--ease-soft),
    margin var(--duration-fast) var(--ease-soft),
    background var(--duration-fast) var(--ease-soft),
    border-color var(--duration-fast) var(--ease-soft),
    opacity var(--duration-fast) var(--ease-soft);
}
html.cur .cursor { display: flex; align-items: center; justify-content: center; }
.cursor.is-visible { opacity: 1; }

.cursor__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--color-ink);
  opacity: 0;
  transition: opacity var(--duration-fast);
  white-space: nowrap;
}

/* 状态:链接(放大成环) */
.cursor.is-link {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  background: transparent;
  border: 1px solid var(--color-ink);
}

/* 状态:带词(放大成 accent 圆标) */
.cursor.is-label {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: var(--color-accent);
}
.cursor.is-label .cursor__label { opacity: 1; }

/* 注:按下反馈不用 scale 属性——它会以视口原点为基准缩放,
   导致光标每次点击都向左上角跳 18% 再弹回。按下时光标本就隐藏,无需缩放。 */

/* 拖影圆环:仅链接态出现,纯装饰,不参与指向 */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--z-cursor) - 1);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid var(--color-ink);
  border-radius: 50%;
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-soft);
}
html.cur .cursor-ring { display: block; }
.cursor-ring.on { opacity: .8; }

/* ---- 关键词动线(唯一一条 marquee,慢速循环) ---- */
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---- 减少动态:直接终态(双保险,main.js 也会移除 .js) ---- */
@media (prefers-reduced-motion: reduce) {
  html.js { scroll-behavior: auto; }
  .js [data-reveal],
  .js .hero__top,
  .js .hero__tagline,
  .js .hero__meta { opacity: 1; transform: none; transition: none; }
  .js .hero__ch { transform: none; }
  .js .hero__line { transform: none; }
  .cursor { display: none !important; }

  /* 横向展柜退化为原生横向滚动 */
  .js .work__viewport { height: auto; display: block; padding-block: var(--space-md); }
  .js .work__track {
    overflow-x: auto;
    transform: none !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  /* 关键词动线停止,保持静态可读 */
  .marquee__track { animation: none; }
}