/* ==========================================================================
   6. 动效层：滚动进场 / 数字滚动 / 轮播过渡 / 工作流扫描光 / 通用 hover
   本文件为 CSS 引入链的最后一环，可安全覆盖前序样式。
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 滚动进场（IntersectionObserver 触发，见 public/js/reveal.js）
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .74s var(--ease), transform .74s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* 方向变体 */
[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="zoom"]  { transform: scale(.94); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="zoom"].is-visible  { transform: scale(1); }

/* --------------------------------------------------------------------------
   6.2 数字滚动（counters.js 写入 textContent，此处仅稳定排版避免抖动）
   -------------------------------------------------------------------------- */
[data-count] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   6.3 Hero 轮播过渡兜底
   （主样式在 sections.css，此处补充淡入 + 微位移与首屏内容错峰）
   -------------------------------------------------------------------------- */
.hero-slide {
  transition: opacity .8s var(--ease), visibility 0s linear .8s;
}
.hero-slide.is-active .hero__inner > * {
  animation: heroRise .8s var(--ease) both;
}
.hero-slide.is-active .hero__inner > *:nth-child(1) { animation-delay: .06s; }
.hero-slide.is-active .hero__inner > *:nth-child(2) { animation-delay: .16s; }
.hero-slide.is-active .hero__inner > *:nth-child(3) { animation-delay: .26s; }
.hero-slide.is-active .hero__inner > *:nth-child(4) { animation-delay: .36s; }
.hero-slide.is-active .hero__inner > *:nth-child(5) { animation-delay: .46s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   6.4 工作流程扫描光（workflow.js 逐个添加 .wf-scan）
   -------------------------------------------------------------------------- */
.wf-step__num.wf-scan {
  box-shadow: 0 0 0 6px rgba(59,130,246,.35);
  animation: wfScanGlow .45s var(--ease);
}
@keyframes wfScanGlow {
  0%   { box-shadow: 0 0 0 0 rgba(59,130,246,.55); }
  60%  { box-shadow: 0 0 0 9px rgba(139,92,246,.28); }
  100% { box-shadow: 0 0 0 6px rgba(59,130,246,.35); }
}

/* --------------------------------------------------------------------------
   6.5 通用 hover 微交互
   -------------------------------------------------------------------------- */
.hover-lift { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }

.hover-glow { transition: box-shadow var(--dur) var(--ease); }
.hover-glow:hover { box-shadow: var(--accent-shadow, var(--sh-blue)); }

/* 链接下划线生长 */
.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; border-radius: 2px;
  background: var(--g-brand);
  transition: width var(--dur) var(--ease);
}
.link-underline:hover::after { width: 100%; }

/* --------------------------------------------------------------------------
   6.6 骨架屏 / 加载态（后台异步保存时使用）
   -------------------------------------------------------------------------- */
.is-loading { position: relative; pointer-events: none; opacity: .62; }
.is-loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  background-size: 220% 100%;
  animation: shimmer 1.15s linear infinite;
}
@keyframes shimmer {
  from { background-position: 220% 0; }
  to   { background-position: -20% 0; }
}

/* 旋转指示器 */
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(59,130,246,.24);
  border-top-color: var(--c-blue);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   6.7 尊重用户的减少动效偏好
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-slide.is-active .hero__inner > * { animation: none !important; }
  .wf-step__num.wf-scan { animation: none !important; }
  .is-loading::after, .spinner { animation: none !important; }
}