/* ============================================================
   animations.css - 动画样式
   滚动渐入、hover效果等各类动画
   ============================================================ */

/* ---------- 滚动渐入基础类 ---------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  /* 兜底：JS 加载失败或执行异常时，2 秒后自动显示内容，避免内容永久不可见 */
  animation: revealFallbackShow 0.6s ease 2s forwards;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  /* JS 正常工作时取消兜底动画，避免冲突 */
  animation: none;
}

/* 兜底动画：JS 失效后自动淡入显示 */
@keyframes revealFallbackShow {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- JS 加载失败兜底 ---------- */
/* 当 jQuery 未加载时，common.js 会给 body 添加 .no-js-fallback 类 */
/* 此时所有滚动渐入、数字增长等依赖 JS 的元素立即显示，避免内容永久不可见 */
.no-js-fallback .reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.no-js-fallback .banner__indicator,
.no-js-fallback .banner__arrow {
  display: none !important;
}

.reveal--left {
  transform: translateX(-40px);
}

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

.reveal--right {
  transform: translateX(40px);
}

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

.reveal--scale {
  transform: scale(0.95);
}

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

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

/* ---------- 悬停动效 ---------- */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width var(--transition-base);
}

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

/* ---------- 闪烁光标 ---------- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.cursor-blink {
  animation: blink 1s step-end infinite;
}

/* ---------- 呼吸光效 ---------- */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.4);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(200, 16, 46, 0);
  }
}

/* 藏青主题：呼吸光效改为金色 */
html.theme-navy .pulse {
  animation-name: pulse-navy;
}

@keyframes pulse-navy {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.5);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(201, 169, 97, 0);
  }
}

.pulse {
  animation: pulse 2s infinite;
}

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

.spin {
  animation: spin 20s linear infinite;
}

/* ---------- 淡入 ---------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.6s ease both;
}

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

.fade-in-up {
  animation: fadeInUp 0.6s ease both;
}

/* ---------- 滑动 ---------- */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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