/* ==========================================================================
   Index 页面动画样式 · 简约高雅版
   设计哲学：少即是多，以极细微的动态为页面注入呼吸感
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 重置 body 背景 —— 让 canvas 成为唯一的页面背景
   -------------------------------------------------------------------------- */

html {
  background: rgb(250, 249, 247);   /* 暖白底色，与 canvas 清除色一致 */
}

body {
  background: transparent !important;
  background-image: none !important;   /* 去掉 styles.css 中的网格纹理 */
}

/* --------------------------------------------------------------------------
   1. 全屏固定 Canvas —— 整个页面的动态背景底层
   -------------------------------------------------------------------------- */

#fluidCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;          /* 位于所有内容之下 */
  pointer-events: none;
  display: block;
}

/* 页面所有主要区块浮于 canvas 之上 */
.page,
.footer {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   2. 页面背景 —— 透明化，让流体背景从整个页面透出
   -------------------------------------------------------------------------- */

/* Hero 区：完全透明，让 canvas 全量显现 */
.hero {
  background: transparent !important;
}

/* 去掉 hero 原有的静态渐变叠加层 */
.hero::before {
  display: none !important;
}

/* 各 section 区：完全透明，让 canvas 网格从整个页面透出 */
.section {
  background: transparent !important;
}

/* CTA 呼吁区：同样透明 */
.cta {
  background: transparent !important;
  animation: none !important;
}

/* Footer：保留极淡底色作为视觉收尾，不遮网格 */
.footer {
  background: rgba(250, 249, 247, 0.55) !important;
}

/* --------------------------------------------------------------------------
   3. 卡片玻璃拟态（Glassmorphism）
      半透明 + 背景模糊 + 细边框，漂浮在流体背景之上
   -------------------------------------------------------------------------- */

.feature-card,
.user-card,
.process-step,
.community-card {
  background: rgba(255, 254, 252, 0.72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 2px 20px rgba(150, 140, 160, 0.08),
              0 1px 4px  rgba(150, 140, 160, 0.06) !important;
}

.feature-card:hover,
.user-card:hover,
.process-step:hover {
  background: rgba(255, 254, 252, 0.86) !important;
  box-shadow: 0 8px 32px rgba(150, 140, 160, 0.14),
              0 2px 8px  rgba(150, 140, 160, 0.08) !important;
}

/* FAQ 列表区 */
.faq__item {
  background: rgba(255, 254, 252, 0.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   4. Hero 内容的入场动画（页面加载时依次淡入）
   -------------------------------------------------------------------------- */

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

@keyframes anim-fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__badge   { animation: anim-fadeInDown 0.80s ease 0.15s both; }
.hero__title   { animation: anim-fadeInUp   0.90s ease 0.30s both; }
.hero__subtitle{ animation: anim-fadeInUp   0.90s ease 0.45s both; }
.hero__input   { animation: anim-fadeInUp   0.90s ease 0.60s both; }
.hero__tags    { animation: anim-fadeInUp   0.90s ease 0.75s both; }
.hero__actions { animation: anim-fadeInUp   0.90s ease 0.90s both; }

/* --------------------------------------------------------------------------
   5. 标题彩色渐变流动（与流体 canvas 的色调呼应）
   -------------------------------------------------------------------------- */

@keyframes anim-gradientFlow {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

.hero__title-accent {
  /* 与"立即免费创作"按钮 btn--primary 同色渐变 */
  background: linear-gradient(
    135deg,
    #6366f1,    /* --color-primary */
    #f472b6     /* --color-secondary */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --------------------------------------------------------------------------
   6. 滚动显现动画（配合 IntersectionObserver）
   -------------------------------------------------------------------------- */

.reveal-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 1.0s ease;
}

.reveal-fade.is-visible {
  opacity: 1;
}

/* 子元素瀑布式错开入场 */
.stagger-children > *:nth-child(1) { transition-delay: 0.04s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.18s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.32s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.46s; }

/* --------------------------------------------------------------------------
   7. 无障碍：减少动画模式
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #fluidCanvas              { display: none; }

  .hero                     { background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%) !important; }
  .hero::before             { display: block !important; }
  .section                  { background: var(--color-gray-50) !important; }
  .cta                      { background: linear-gradient(135deg, #eef2ff, #fce7f3) !important; }
  .footer                   { background: var(--bg-footer, #f8fafc) !important; }

  .feature-card,
  .user-card,
  .process-step,
  .community-card,
  .faq__item                { background: var(--bg-card) !important;
                              backdrop-filter: none; -webkit-backdrop-filter: none; }

  .hero__badge, .hero__title, .hero__subtitle,
  .hero__input, .hero__tags, .hero__actions,
  .reveal-up, .reveal-fade  { animation: none; opacity: 1; transform: none; transition: none; }

  .hero__title-accent       {
    background: linear-gradient(135deg, #6366f1, #f472b6);
    background-size: auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: none;
  }
}