@charset "UTF-8";

/**
 * ============================================================
 *  Pronature 统一动画系统 | Unified Animation System
 * ============================================================
 * 
 * 设计原则：
 * - 使用 CSS Custom Properties 实现主题化与可维护性
 * - GPU 加速优先（transform/opacity）
 * - 遵循 prefers-reduced-motion 无障碍标准
 * - BEM 命名规范，语义清晰
 * 
 * 用法：
 * 1. 引入本文件后自动生效全局令牌
 * 2. 工具类按需添加到 HTML 元素
 * 3. 滚动入场需配合 JS IntersectionObserver
 * 
 * @version 1.0.0
 * @author Pronature Animation System
 */

/* ============================================================
   A. 全局动画令牌 (CSS Custom Properties)
   ============================================================ */
:root {
  /* ---- 时长 Token ---- */
  --anim-duration-fast: 150ms;   /* 微交互：按钮hover、图标旋转 */
  --anim-duration-normal: 300ms; /* 常规过渡：颜色、背景、透明度 */
  --anim-duration-slow: 500ms;   /* 页面级：元素位移、展开收起 */
  --anim-duration-page: 800ms;   /* 页面切换、大型入场 */

  /* ---- 页面入场动画 ---- */
  --page-enter-duration: 600ms;  /* 页面入场淡入时长 */

  /* ---- 缓动曲线 Token ---- */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);   /* 默认平滑 */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);                /* 出场加速 */
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);         /* 双向对称 */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* 弹性效果 */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);/* 弹簧回弹 */

  /* ---- 组合快捷令牌 ---- */
  --anim-fast: var(--anim-duration-fast) var(--ease-smooth);
  --anim-normal: var(--anim-duration-normal) var(--ease-smooth);
  --anim-slow: var(--anim-duration-slow) var(--ease-out);
  --anim-page: var(--anim-duration-page) var(--ease-in-out);
}

/* ============================================================
   B. 基础过渡工具类
   ============================================================ */

/** 全属性过渡 - 正常速度 */
.anim-transition {
  transition: all var(--anim-normal) !important;
}

/** 全属性过渡 - 快速 */
.anim-transition-fast {
  transition: all var(--anim-fast) !important;
}

/** 全属性过渡 - 慢速 */
.anim-transition-slow {
  transition: all var(--anim-slow) !important;
}

/** 仅透明度过渡（性能最优） */
.anim-fade {
  transition: opacity var(--anim-duration-normal) var(--ease-out);
  will-change: opacity;
}

/** Y轴滑动 + 透明度 */
.anim-slide-y {
  transition:
    transform var(--anim-duration-slow) var(--ease-out),
    opacity var(--anim-duration-normal) var(--ease-out);
  will-change: transform, opacity;
}

/** X轴滑动 + 透明度 */
.anim-slide-x {
  transition:
    transform var(--anim-duration-slow) var(--ease-out),
    opacity var(--anim-duration-normal) var(--ease-out);
  will-change: transform, opacity;
}

/** 颜色相关属性过渡（背景/边框/文字颜色） */
.anim-color {
  transition:
    background-color var(--anim-duration-normal) var(--ease-smooth),
    border-color var(--anim-duration-normal) var(--ease-smooth),
    color var(--anim-duration-normal) var(--ease-smooth);
}

/* ============================================================
   C. 滚动触发入场动画 (IntersectionObserver)
   
   使用方式：
   <div class="anim-reveal anim-reveal--up">内容</div>
   
   JS 触发逻辑：
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(e => { if(e.isIntersecting) e.target.classList.add('is-visible'); });
   });
   document.querySelectorAll('.anim-reveal').forEach(el => observer.observe(el));
   ============================================================ */

/** 基础入场类 - 初始隐藏状态 */
.anim-reveal {
  opacity: 0;
  transition:
    opacity var(--anim-duration-slow) var(--ease-out),
    transform var(--anim-duration-slow) var(--ease-out);
  will-change: opacity, transform;
}

/** 可见状态触发 */
.anim-reveal.is-visible {
  opacity: 1;
}

/* ---- 方向变体 ---- */
.anim-reveal--up {
  transform: translateY(40px);
}
.anim-reveal--up.is-visible {
  transform: translateY(0);
}

.anim-reveal--down {
  transform: translateY(-40px);
}
.anim-reveal--down.is-visible {
  transform: translateY(0);
}

.anim-reveal--left {
  transform: translateX(40px);
}
.anim-reveal--left.is-visible {
  transform: translateX(0);
}

.anim-reveal--right {
  transform: translateX(-40px);
}
.anim-reveal--right.is-visible {
  transform: translateX(0);
}

.anim-reveal--scale {
  transform: scale(0.9);
}
.anim-reveal--scale.is-visible {
  transform: scale(1);
}

/* ---- 延迟变体（列表交错入场） ---- */
.anim-reveal--delay-1 { transition-delay: 100ms; }
.anim-reveal--delay-2 { transition-delay: 200ms; }
.anim-reveal--delay-3 { transition-delay: 300ms; }
.anim-reveal--delay-4 { transition-delay: 400ms; }
.anim-reveal--delay-5 { transition-delay: 500ms; }

/* ============================================================
   D. 微交互动画类
   ============================================================ */

/** Hover 上浮 + 阴影增强 */
.hover-lift {
  transition:
    transform var(--anim-duration-normal) var(--ease-out),
    box-shadow var(--anim-duration-normal) var(--ease-out);
  will-change: transform, box-shadow;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
}

/** Hover 发光效果 */
.hover-glow {
  transition: box-shadow var(--anim-duration-normal) var(--ease-smooth);
}
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.35), 0 0 50px rgba(59, 130, 246, 0.15);
}

/** Hover 轻微放大 */
.hover-scale {
  transition: transform var(--anim-duration-normal) var(--ease-spring);
  will-change: transform;
}
.hover-scale:hover {
  transform: scale(1.02);
}

/** 点击抖动反馈 */
.hover-shake {
  transition: transform var(--anim-duration-fast) var(--ease-smooth);
  cursor: pointer;
}
.hover-shake:hover {
  animation: shake 450ms var(--ease-spring);
}
.hover-shake:active {
  transform: scale(0.97);
}

/** 聚焦高亮环 */
.focus-ring:focus,
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4);
  transition: box-shadow var(--anim-duration-fast) var(--ease-smooth);
}

/* ============================================================
   E. 页面加载入场
   ============================================================ */

/** 页面整体入场 - 淡入+上滑 */
.page-enter {
  animation: fadeInUp var(--anim-duration-page) var(--ease-out) both;
}

/** 页面入场动画 - 由 anim-enhance.js 触发 */
.page-enter-active {
  opacity: 0;
  animation: fadeInUp var(--page-enter-duration) var(--ease-out) both;
}

/** 页面入场完成 - 确保可见 */
.page-entered {
  opacity: 1;
  transform: none;
}

/** 列表交错入场基础项 */
.stagger-item {
  opacity: 0;
  animation: fadeInUp var(--anim-duration-slow) var(--ease-out) forwards;
}
.stagger-item:nth-child(1) { animation-delay: 0ms; }
.stagger-item:nth-child(2) { animation-delay: 80ms; }
.stagger-item:nth-child(3) { animation-delay: 160ms; }
.stagger-item:nth-child(4) { animation-delay: 240ms; }
.stagger-item:nth-child(5) { animation-delay: 320ms; }
.stagger-item:nth-child(6) { animation-delay: 400ms; }
.stagger-item:nth-child(7) { animation-delay: 480ms; }
.stagger-item:nth-child(8) { animation-delay: 560ms; }

/* ============================================================
   F. 自定义关键帧 (Keyframes)
   ============================================================ */

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ============================================================
   G. 性能优化 & 无障碍
   ============================================================ */

/** 预加载期间禁用所有动画 */
.preload *,
.preload *::before,
.preload *::after {
  animation-duration: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  scroll-behavior: auto !important;
}

/** 减弱动画偏好 - 无障碍支持 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .anim-reveal {
    opacity: 1;
    transform: none;
  }

  .stagger-item {
    opacity: 1;
  }
}

/** GPU 加速提示 - 强制合成层 */
.gpu-accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ============================================================
   H. 组件级动画增强
   ============================================================ */

/* ---- 卡片 Hover 增强效果 ---- */
.card-hover-enhanced {
  transition:
    transform var(--anim-duration-normal) var(--ease-out),
    box-shadow var(--anim-duration-normal) var(--ease-out),
    border-color var(--anim-duration-normal) var(--ease-smooth);
  will-change: transform, box-shadow;
  border: 1px solid transparent;
}
.card-hover-enhanced:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.1),
    0 6px 16px rgba(0, 0, 0, 0.06);
  border-color: rgba(59, 130, 246, 0.2);
}
.card-hover-enhanced:active {
  transform: translateY(-2px) scale(1.005);
  transition-duration: var(--anim-duration-fast);
}

/* ---- 按钮交互增强 ---- */
.btn-interact {
  transition:
    background-color var(--anim-duration-fast) var(--ease-smooth),
    color var(--anim-duration-fast) var(--ease-smooth),
    transform var(--anim-duration-fast) var(--ease-spring),
    box-shadow var(--anim-duration-fast) var(--ease-smooth);
  will-change: transform;
  position: relative;
  overflow: hidden;
}
.btn-interact:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}
.btn-interact:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 80ms;
}
.btn-interact:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.45);
}

/* ---- 导航栏平滑过渡 ---- */
.navbar-transition {
  transition:
    background-color var(--anim-duration-normal) var(--ease-smooth),
    box-shadow var(--anim-duration-normal) var(--ease-smooth),
    backdrop-filter var(--anim-duration-normal) var(--ease-smooth);
  will-change: background-color, box-shadow;
}
.navbar-transition.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
}

/* ---- 首页导航栏滚动状态 (配合 home.min.js) ---- */
.navbar.is-homepage {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.navbar.is-homepage.is-scrolled {
  background-color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ---- 图片懒加载占位 ---- */
.img-lazy-load {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    110deg,
    #e8ecf1 30%,
    #f4f6fa 38%,
    #e8ecf1 46%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
.img-lazy-load img {
  opacity: 0;
  transition: opacity var(--anim-duration-slow) var(--ease-out);
}
.img-lazy-load img.loaded {
  opacity: 1;
}
.img-lazy-load img.loaded + .img-placeholder {
  display: none;
}

/* ============================================================
   END of animations.css
   ============================================================ */