/* ============================================
   Animations - 动画系统
   ============================================ */

/* ===== 滚动渐入 ===== */
/* 默认可见，避免无 JS/首屏外内容不可见；动画类触发时保持当前状态 */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* 方向变体初始状态同样保持可见 */
.reveal-left { transform: translateX(0); }
.reveal-right { transform: translateX(0); }
.reveal-up { transform: translateY(0); }
.reveal-scale { transform: scale(1); }

.reveal-left.revealed,
.reveal-right.revealed,
.reveal-up.revealed,
.reveal-scale.revealed {
  transform: translateX(0) translateY(0) scale(1);
}

/* 延迟类 */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* ===== 浮动动画 ===== */
.float {
  animation: float 6s ease-in-out infinite;
}

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

/* ===== 脉冲动画 ===== */
.pulse {
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* ===== 发光动画 ===== */
.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.12);
  }
  50% {
    box-shadow: 0 0 24px rgba(37, 99, 235, 0.28), 0 0 48px rgba(37, 99, 235, 0.1);
  }
}

/* ===== 旋转动画 ===== */
.spin-slow {
  animation: spin 20s linear infinite;
}

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

/* ===== 打字机光标 ===== */
.typing-cursor::after {
  content: '|';
  color: var(--color-primary);
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ===== 数字滚动容器 ===== */
.counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ===== 渐变文字流动 ===== */
.gradient-flow {
  background: linear-gradient(90deg, #2563EB, #7C3AED, #2563EB);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 4s linear infinite;
}

@keyframes gradientFlow {
  to {
    background-position: 200% center;
  }
}

/* ===== 卡片悬浮效果 ===== */
.hover-card {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.hover-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--glow-primary);
  border-color: var(--border-glow);
}

/* ===== 霓虹边框发光 ===== */
.neon-border {
  position: relative;
  transition: box-shadow var(--transition-base);
}

.neon-border:hover {
  box-shadow:
    0 0 10px rgba(37, 99, 235, 0.15),
    0 0 24px rgba(37, 99, 235, 0.06),
    inset 0 0 10px rgba(37, 99, 235, 0.03);
}

/* ===== 3D 卡片倾斜 ===== */
.card-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
}

.card-3d__inner {
  transition: transform 0.15s ease-out;
  transform-style: preserve-3d;
}

/* ===== 移动端禁用悬浮效果 ===== */
@media (max-width: 1023px) {
  .hover-card:hover {
    transform: none;
  }

  .card-3d__inner {
    transition: none;
  }
}

/* ===== 加载点动画 ===== */
.loading-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: loadingDots 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes loadingDots {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== 淡入淡出 ===== */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-out {
  animation: fadeOut 0.3s ease forwards;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ===== 缩放进入 ===== */
.zoom-in {
  animation: zoomIn 0.3s ease forwards;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}