/* ========================================
   Animations - 精致动效系统
   ======================================== */

/* === 入场动画 === */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

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

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

/* 缩放入场 */
@keyframes scaleIn {
  from { 
    opacity: 0; 
    transform: scale(0.9); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}

@keyframes scaleUp {
  from { 
    opacity: 0; 
    transform: scale(0.8) translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: scale(1) translateY(0); 
  }
}

/* 弹跳入场 */
@keyframes bounceIn {
  0% { 
    opacity: 0; 
    transform: scale(0.3); 
  }
  50% { 
    transform: scale(1.05); 
  }
  70% { 
    transform: scale(0.9); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1); 
  }
}

/* 滑入动画 */
@keyframes slideInRight {
  from { 
    opacity: 0; 
    transform: translateX(100px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

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

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

/* === 滚动触发动画 === */
[data-animate] {
  opacity: 0;
}

[data-animate="fade-up"] {
  animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-animate="fade-down"] {
  animation: fadeDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-animate="fade-left"] {
  animation: fadeLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-animate="fade-right"] {
  animation: fadeRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-animate="fade"] {
  animation: fadeIn 0.6s ease forwards;
}

[data-animate="scale"] {
  animation: scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

[data-animate="scale-up"] {
  animation: scaleUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

[data-animate="bounce"] {
  animation: bounceIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 交错动画延迟 */
[data-delay="100"] { animation-delay: 0.1s !important; }
[data-delay="200"] { animation-delay: 0.2s !important; }
[data-delay="300"] { animation-delay: 0.3s !important; }
[data-delay="400"] { animation-delay: 0.4s !important; }
[data-delay="500"] { animation-delay: 0.5s !important; }
[data-delay="600"] { animation-delay: 0.6s !important; }
[data-delay="700"] { animation-delay: 0.7s !important; }
[data-delay="800"] { animation-delay: 0.8s !important; }

/* === 悬停效果 === */

/* 上浮效果 */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* 缩放效果 */
.hover-scale {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-scale:hover {
  transform: scale(1.03);
}

/* 发光效果 */
.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: var(--glow-primary);
}

/* 边框扩展 */
.hover-border {
  position: relative;
}

.hover-border::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.hover-border:hover::after {
  opacity: 1;
}

/* === 按钮动画 === */

.btn-animate {
  position: relative;
  overflow: hidden;
}

.btn-animate::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn-animate:active::after {
  width: 300px;
  height: 300px;
}

/* 按钮涟漪效果 */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* === 页面过渡 === */
.page-enter {
  animation: fadeIn 0.4s ease;
}

.page-exit {
  animation: fadeIn 0.3s ease reverse;
}

/* === 加载状态 === */

/* 骨架屏动画 */
.skeleton {
  background: linear-gradient(
    90deg, 
    var(--border-light) 25%, 
    var(--surface-alt) 50%, 
    var(--border-light) 75%
  );
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

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

/* 脉冲动画 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* 呼吸动画 */
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}

.animate-breathe {
  animation: breathe 3s ease-in-out infinite;
}

/* 浮动动画 */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* 旋转动画 */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-rotate {
  animation: rotate 20s linear infinite;
}

/* 渐变流动 */
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradientFlow 4s ease infinite;
}

/* 闪烁动画 */
@keyframes shimmer {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.animate-shimmer {
  animation: shimmer 2s ease-in-out infinite;
}

/* 划线动画 */
.animate-underline {
  position: relative;
}

.animate-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

.animate-underline:hover::after {
  width: 100%;
}

/* === 微交互 === */

/* 图标旋转 */
.icon-rotate:hover svg {
  transform: rotate(15deg);
}

.icon-rotate svg {
  transition: transform 0.3s ease;
}

/* 箭头移动 */
.arrow-move {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.arrow-move:hover svg {
  transform: translateX(4px);
}

.arrow-move svg {
  transition: transform 0.2s ease;
}

/* === 减少动画（无障碍） === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  [data-animate] {
    opacity: 1;
    transform: none;
  }
  
  .animate-float,
  .animate-rotate,
  .animate-breathe,
  .animate-pulse {
    animation: none;
  }
}

/* === 滚动触发动画（Intersection Observer） === */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* 交错子元素 */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-stagger.active > *:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger.active > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-stagger.active > *:nth-child(3) { transition-delay: 0.3s; }
.reveal-stagger.active > *:nth-child(4) { transition-delay: 0.4s; }
.reveal-stagger.active > *:nth-child(5) { transition-delay: 0.5s; }
.reveal-stagger.active > *:nth-child(6) { transition-delay: 0.6s; }

.reveal-stagger.active > * {
  opacity: 1;
  transform: translateY(0);
}

/* 视差效果（需要JS配合） */
.parallax {
  transition: transform 0.1s linear;
}