/* ============================================================
   story.css — 滚动叙事章节样式
   trees.center · 种亿棵树
   ============================================================ */

/* --- 章节背景色变量 --- */
:root {
  --story-bg-1: #0a1f0a;    /* 深绿 */
  --story-bg-2: #1a4a1a;    /* 森林绿 */
  --story-bg-3: #2d8a4e;    /* 翠绿 */
  --story-bg-4: #152050;    /* 暮色蓝 */
  --story-bg-5: #0a0e2a;    /* 星空深蓝 */
}

/* --- 章节容器 --- */
.story-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 6rem 2rem;
  transition: background-color 0.8s ease;
}

.story-section:nth-child(1) { background-color: var(--story-bg-1); }
.story-section:nth-child(2) { background-color: var(--story-bg-2); }
.story-section:nth-child(3) { background-color: var(--story-bg-3); }
.story-section:nth-child(4) { background-color: var(--story-bg-4); }
.story-section:nth-child(5) { background-color: var(--story-bg-5); }

/* --- 章节内容包裹 --- */
.story-inner {
  position: relative;
  z-index: 2;
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
}

/* --- 章节编号 --- */
.story-chapter {
  font-family: var(--font-en, 'Playfair Display', serif);
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  font-style: italic;
  color: var(--c-gold, #c9a84c);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateX(-60px);
}

/* GSAP 激活态 */
.story-chapter.is-active {
  opacity: 1;
  transform: translateX(0);
}

/* --- 章节标题 --- */
.story-title {
  font-family: var(--font-cn, 'Noto Serif SC', serif);
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  letter-spacing: 0.06em;
  margin-bottom: 1.2rem;
  opacity: 0;
  transform: translateY(40px);
}

.story-title.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* --- 分割线 --- */
.story-divider {
  width: 0;
  height: 2px;
  margin: 0 auto 2rem;
  background: linear-gradient(
    90deg,
    transparent,
    var(--c-gold, #c9a84c),
    transparent
  );
  border: none;
  opacity: 0;
}

.story-divider.is-active {
  width: 120px;
  opacity: 1;
}

/* --- 正文 --- */
.story-text {
  font-family: var(--font-cn, 'Noto Serif SC', serif);
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  font-weight: 300;
  color: rgba(255, 255, 255, .82);
  line-height: 2;
  letter-spacing: 0.04em;
  margin-bottom: 1.6rem;
  opacity: 0;
  transform: translateY(30px);
}

.story-text.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* --- 高亮文字 --- */
.story-text em {
  font-style: normal;
  color: var(--c-neon-green, #4ade80);
  font-weight: 400;
}

.story-text strong {
  color: var(--c-gold, #c9a84c);
  font-weight: 500;
}

/* --- 装饰元素：叶子 --- */
.deco-leaf {
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

.deco-leaf::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--c-neon-green, #4ade80);
  border-radius: 0 50% 50% 50%;
  transform: rotate(-45deg);
}

/* 不同尺寸变体 */
.deco-leaf--sm { width: 14px; height: 14px; opacity: 0.1; }
.deco-leaf--lg { width: 36px; height: 36px; opacity: 0.08; }

/* --- 装饰元素：光点 --- */
.deco-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-gold, #c9a84c);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform, opacity;
  box-shadow: 0 0 6px var(--c-gold, #c9a84c);
}

.deco-particle.is-visible {
  animation: particleFloat 6s ease-in-out infinite;
}

@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-20px) scale(1.3);
    opacity: 0.8;
  }
}

/* 第二种光点变体 */
.deco-particle--green {
  background: var(--c-neon-green, #4ade80);
  box-shadow: 0 0 8px var(--c-neon-green, #4ade80);
}

/* --- 章节数字装饰（大号背景数字） --- */
.story-bg-number {
  position: absolute;
  right: -5%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-en, 'Playfair Display', serif);
  font-size: clamp(8rem, 20vw, 18rem);
  font-weight: 700;
  color: rgba(255, 255, 255, .03);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* --- 章节间渐变过渡 --- */
.story-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .2), transparent);
  pointer-events: none;
  z-index: 1;
}

.story-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to top, rgba(0, 0, 0, .2), transparent);
  pointer-events: none;
  z-index: 1;
}

/* --- 引用样式 --- */
.story-quote {
  font-family: var(--font-cn, 'Noto Serif SC', serif);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 400;
  color: rgba(255, 255, 255, .65);
  text-align: center;
  line-height: 1.8;
  border-left: 2px solid var(--c-gold, #c9a84c);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  opacity: 0;
  transform: translateY(20px);
}

.story-quote.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* ============================
   响应式
   ============================ */
@media (max-width: 768px) {
  .story-section {
    padding: 4rem 1.5rem;
    min-height: 80vh;
  }

  .story-inner {
    max-width: 100%;
  }

  .story-title {
    letter-spacing: 0.03em;
  }

  .story-text {
    line-height: 1.85;
    font-size: 0.95rem;
  }

  .story-chapter {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
  }

  .story-bg-number {
    font-size: clamp(5rem, 25vw, 10rem);
    right: -2%;
    opacity: .02;
  }

  .deco-leaf,
  .deco-leaf--lg {
    display: none;    /* 手机端隐藏大装饰元素 */
  }

  .story-divider.is-active {
    width: 80px;
  }
}

@media (max-width: 480px) {
  .story-section {
    padding: 3rem 1rem;
  }

  .story-text {
    line-height: 1.8;
  }

  .story-quote {
    font-size: 1rem;
    padding-left: 1rem;
  }
}