/* ============================================
   动画效果
   ============================================ */

/* --- 入场动画：淡入 + 上滑 --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-fade-in {
  opacity: 0;
}

.anim-fade-in.anim-visible {
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 依次延迟 */
.anim-delay-1 { animation-delay: 0.05s; }
.anim-delay-2 { animation-delay: 0.1s; }
.anim-delay-3 { animation-delay: 0.15s; }
.anim-delay-4 { animation-delay: 0.2s; }
.anim-delay-5 { animation-delay: 0.25s; }
.anim-delay-6 { animation-delay: 0.3s; }

/* --- Hero 区渐入 --- */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-banner {
  animation: heroFadeIn 0.7s ease-out 0.05s both;
}
.hero-name {
  animation: heroFadeIn 0.6s ease-out 0.2s both;
}
.hero-title {
  animation: heroFadeIn 0.6s ease-out 0.3s both;
}
.hero-desc {
  animation: heroFadeIn 0.6s ease-out 0.4s both;
}
.hero-stats {
  animation: heroFadeIn 0.6s ease-out 0.5s both;
}

/* --- 导航链接下划线动画 */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.nav-links a:hover::after {
  transform: scaleX(0.6);
}
.nav-links a.active::after {
  transform: scaleX(1);
}
/* 导航激活状态 2.1 */
.nav-links a.active {
  background: var(--color-primary-lighter);
}

/* --- 图加载渐显（仅限内容图，避免透明PNG边缘模糊白边） --- */
@keyframes imageReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}
.wf-img,
.gallery-img,
.hero-cutout {
  animation: imageReveal 0.5s ease-out both;
}

/* --- 响应式：移动端减少动画 --- */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-in {
    opacity: 1;
    animation: none;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}