/* ==========================================================================
   motion.css — 动效层（对齐 qwenwork.cn 的动态展示）
   滚动入场 + hover 微交互 + hero 光斑浮动 + 数字滚动
   无 JS 时内容照常可见（由 html.js 门控初始隐藏态）
   ========================================================================== */

/* ---------- 1. 关键帧 ---------- */
@keyframes geo-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes geo-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes geo-blob-float-a {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(28px, -22px) scale(1.08); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes geo-blob-float-b {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-24px, 18px) scale(1.1); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes geo-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.8; }
}
@keyframes geo-badge-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes geo-arrow {
  from { transform: translateX(0); }
  to   { transform: translateX(5px); }
}

/* ---------- 2. 滚动入场（默认隐藏，由 html.js 门控） ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease, cubic-bezier(.16,1,.3,1)),
              transform .7s var(--ease, cubic-bezier(.16,1,.3,1));
  will-change: opacity, transform;
}
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* 错峰：同一容器内的子项依次入场 */
html.js [data-reveal][style*="--rd"] {
  transition-delay: var(--rd, 0s);
}

/* 首屏 hero 元素载入即入场（不依赖滚动） */
html.js .hero [data-reveal] { transition-duration: .9s; }

/* ---------- 3. hover 微交互增强 ---------- */
.card,
.numcard,
.eco,
.doc-card,
.resitem {
  transition: border-color var(--dur, .28s) var(--ease),
              transform var(--dur, .28s) var(--ease),
              box-shadow var(--dur, .28s) var(--ease),
              background var(--dur, .28s) var(--ease);
}
.card:hover,
.numcard:hover,
.eco:hover,
.doc-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-fill, #56e891);
  box-shadow: var(--shadow-pop, 0 10px 30px rgba(20,20,20,.08));
}
.resitem:hover {
  transform: translateY(-2px);
  border-color: var(--border-medium, #14141426);
}
/* 主按钮箭头滑动 */
.btn--accent:hover .btn__arrow { animation: geo-arrow .4s var(--ease) forwards; }

/* 标签轻微呼吸，强调"AI 爬虫友好"等状态 */
.tag--accent { animation: geo-badge-pulse 3.5s var(--ease) infinite; }

/* ---------- 4. hero 光斑浮动 ---------- */
.hero::before {
  animation: geo-blob-float-a 14s ease-in-out infinite, geo-pulse 7s ease-in-out infinite;
}
.hero::after {
  animation: geo-blob-float-b 17s ease-in-out infinite, geo-pulse 8s ease-in-out infinite;
}

/* ---------- 5. 数字滚动计数（count-up 占位，JS 填充） ---------- */
.stat__num[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- 6. 无障碍：尊重减少动态偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero::before, .hero::after,
  .tag--accent, .btn--accent:hover .btn__arrow { animation: none !important; }
}