/**
 * Scroll Reveal Animations for Index Page
 * 元素滚动进入视口时的动画效果
 */

/* ===== 基础 Reveal 动画 ===== */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

/* 初始状态 - 不同的变换方向 */
.reveal       { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(0.9); }

/* 可见状态 - 元素进入视口后添加此类 */
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* ===== 延迟类 ===== */
.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; }

/* ===== Hero 特有动画 ===== */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero 元素的入场动画 */
.hero-beta-badge { animation: heroFadeIn 0.6s ease forwards; }
.hero-title-primary { animation: heroFadeIn 0.6s ease 0.1s both; }
.hero-description { animation: heroFadeIn 0.6s ease 0.2s both; }
.hero-cta-wrapper { animation: heroFadeIn 0.6s ease 0.3s both; }
.hero-social-proof { animation: heroFadeIn 0.6s ease 0.4s both; }

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

/* ===== 渐变移动动画 ===== */
@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* ===== 脉冲发光动画 ===== */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(109, 95, 250, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(109, 95, 250, 0.6);
  }
}

/* ===== Blob 背景动画（如果需要） ===== */
@keyframes morphBlob {
  0%   { transform: translate(0,0) scale(1); }
  20%  { transform: translate(20px,-30px) scale(1.05); }
  40%  { transform: translate(-15px,20px) scale(0.95); }
  60%  { transform: translate(25px,10px) scale(1.08); }
  80%  { transform: translate(-10px,-20px) scale(0.98); }
  100% { transform: translate(0,0) scale(1); }
}

/* ===== 箭头动画（How It Works） ===== */
@keyframes arrowGrow {
  from {
    width: 0;
  }
  to {
    width: var(--arrow-width);
  }
}

.step-arrow-horizontal.animate-in {
  animation: arrowGrow 0.8s ease forwards;
}

.step-arrow-vertical.animate-in {
  animation: arrowGrow 0.8s ease forwards;
}

/* ===== 进度条动画 ===== */
@keyframes progressFill {
  from {
    width: 0;
  }
}

/* ===== FAQ 展开/折叠动画 ===== */
.faq-answer-new {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item-new.open > .faq-answer-new {
  max-height: 500px; /* 足够大以容纳内容 */
}

.faq-toggle-new {
  transition: transform 0.3s ease;
}

.faq-item-new.open > .faq-question-new > .faq-toggle-new {
  transform: rotate(45deg);
}

/* ===== 平滑滚动增强 ===== */
html {
  scroll-behavior: smooth;
}

/* ===== 交互反馈动画 ===== */
.pricing-card-new:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(109, 95, 250, 0.2);
}

.pricing-card-new {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-v2-plan:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 40px rgba(109, 95, 250, 0.2);
}

.community-stat-item:hover {
  transform: scale(1.05);
}

.community-stat-item {
  transition: transform 0.3s ease;
}

/* ===== 特性卡片悬停 ===== */
.feature-card-new:hover {
  border-color: rgba(109, 95, 250, 0.4);
  background: rgba(109, 95, 250, 0.05);
}

.feature-card-new {
  transition: border-color 0.3s ease, background 0.3s ease;
}

/* ===== 统计数字计数动画 ===== */
@keyframes countUp {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.community-stat-number.animate {
  animation: countUp 0.6s ease forwards;
}

/* ===== Navbar 滚动效果 ===== */
.navbar-scrolled {
  background: rgba(11, 13, 26, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.navbar {
  transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}