/* ========================================
   动画 — 淡入 / 滑动 / 滚动揭示 / 装饰
   ======================================== */

/* ===== 基础动画类 ===== */
.fade-in { animation: fadeIn var(--dur-slow) var(--ease-out) forwards; }
.slide-up { animation: slideUp var(--dur-slow) var(--ease-out) forwards; }
.slide-down { animation: slideDown var(--dur-slow) var(--ease-out) forwards; }
.slide-left { animation: slideLeft var(--dur-slow) var(--ease-out) forwards; }
.slide-right { animation: slideRight var(--dur-slow) var(--ease-out) forwards; }

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

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

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

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

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

/* ===== 延迟类 ===== */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ===== 滚动揭示 ===== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 微交互 ===== */
.pulse {
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.bounce {
  animation: bounce 0.6s var(--ease-spring);
}
@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.95); }
}

/* ===== Hero 滚动指示器 ===== */
@keyframes scrollDown {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}

/* ===== 旋转 ===== */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===== Marquee ===== */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== 渐变光晕 ===== */
@keyframes glowShift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -20px); }
}