/* =========================================================
   动效层：滚动进场动画（由 site.js 的 IntersectionObserver 添加 is-inview）
   用法：<div data-anim="fade-up" data-anim-delay="200">
   ========================================================= */

[data-anim] {
  opacity: 0;
  transition-property: opacity, transform, clip-path, filter;
  transition-duration: 1.1s;
  transition-timing-function: var(--sg-ease);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}

[data-anim].is-inview { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }

[data-anim="fade"] { opacity: 0; }

[data-anim="fade-up"] { transform: translateY(60px); }
[data-anim="fade-up-lg"] { transform: translateY(110px); }
[data-anim="fade-down"] { transform: translateY(-50px); }
[data-anim="fade-left"] { transform: translateX(-80px); }
[data-anim="fade-right"] { transform: translateX(80px); }

[data-anim="zoom"] { transform: scale(1.12); }
[data-anim="zoom-out"] { transform: scale(.88); }

/* 从左向右揭开 */
[data-anim="reveal-l"] { clip-path: inset(0 100% 0 0); filter: blur(5px); transition-duration: 1.8s; }
/* 从右向左揭开 */
[data-anim="reveal-r"] { clip-path: inset(0 0 0 100%); filter: blur(5px); transition-duration: 1.8s; }
/* 自下向上揭开 */
[data-anim="reveal-b"] { clip-path: inset(100% 0 0 0); transition-duration: 1.4s; }

/* 列表逐项延迟：由 site.js 写入 --stagger */
[data-anim-stagger] > * {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity .9s var(--sg-ease), transform .9s var(--sg-ease);
  transition-delay: calc(var(--stagger, 0) * 90ms);
}

[data-anim-stagger].is-inview > * { opacity: 1; transform: none; }

/* 鼠标滚动提示 */
.sg-mouse {
  width: 20px;
  height: 30px;
  border: 1px solid currentColor;
  border-radius: 12px 12px 8px 8px;
  position: relative;
  flex-shrink: 0;
}

.sg-mouse::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 3px;
  height: 4px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: currentColor;
  animation: sg-mouse 1.4s var(--sg-ease) infinite;
}

@keyframes sg-mouse {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(12px); opacity: .3; }
}

/* 数字滚动占位（由 site.js 计数） */
.sg-counter { font-variant-numeric: tabular-nums; }

/* ---------- 原站动效等价类 ----------
   data-anim 取值与原站 data-ani 一一对应，时长/位移按原站 [data-scroll=*] 定义复刻：
   fadeUp  translateY(50%) + opacity .2 ；fadeUp2 translateY(10%) + opacity 0 ；
   fadezoom3 scale(1.1) + 3s ；zoomIn3 图片进场 4s */
[data-anim="ani-fade"] { transition: opacity 1.5s var(--sg-ease); }

[data-anim="ani-fadeUp"] { transition: all 1.5s var(--sg-ease); transform: translateY(50%); opacity: .2; }
[data-anim="ani-fadeUp2"] { transition: all 1.5s var(--sg-ease); transform: translateY(10%); opacity: 0; }
[data-anim="ani-fadeRight"] { transition: all 1.5s var(--sg-ease); transform: translateX(10%); opacity: 0; }
[data-anim="ani-fadeLeft"] { transition: all 1.5s var(--sg-ease); transform: translateX(-10%); opacity: 0; }
[data-anim="ani-fadezoom"] { transition: all 1.5s var(--sg-ease); transform: scale(.92, .92); opacity: 0; }
[data-anim="ani-fadezoom3"] { transition: all 3s var(--sg-ease); transform: scale(1.1, 1.1); opacity: 0; }

/* 原站 animate.css 的 zoomIn3：scale3d(1.1) → 1，时长 4s（图片专用） */
[data-anim="ani-zoomIn3"] {
  transition: transform 4s var(--sg-ease), opacity 4s var(--sg-ease);
  transform: scale3d(1.1, 1.1, 1.1);
  opacity: 0;
}

/* 页面载入淡入 */
.sg-page-enter { animation: sg-fade-in .9s var(--sg-ease) both; }

@keyframes sg-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-anim-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    transition: none !important;
  }
}