/* 滑动提示样式 */
.scroll-tip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  text-align: center;
  color: #fff;
  font-size: 1.1rem;
  opacity: 0.7;
  pointer-events: none;
  letter-spacing: 0.1em;
  z-index: 10;
  animation: scroll-tip-fade 1.8s infinite alternate;
}

@keyframes scroll-tip-fade {
  from { opacity: 0.7; }
  to { opacity: 0.2; }
}

/* 保证 section 相对定位以放置提示 */
.section {
  position: relative;
}
* { box-sizing: border-box; }
html, body { height: 100%; }

:root {
  --fg: rgba(255,255,255,0.95);
  --muted: rgba(255,255,255,0.7);
  --bg: #0b0f14;
  /* 动态视口高度（JS 设置），用于替代移动端 100vh 的不稳定表现 */
  --vh: 1vh;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, "Helvetica Neue", Arial, "Noto Color Emoji", sans-serif;
  color: var(--fg);
  background: var(--bg);
  /* 顶层滚动容器 */
  overflow-y: auto;
  overflow-x: hidden;
  /* 启用原生滚动吸附，解决大幅滑动的惯性停留在两段之间问题 */
  scroll-snap-type: y mandatory;
}

/* 控制顶层的过度滚动及回弹 */
html { overscroll-behavior-y: none; }

h1, h2, p { margin: 0; }

/* 半透明渐变背景，首尾相接的循环动画（低开销） */
.gradient-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.6; /* 半透明，能看到花瓣 */
  background: linear-gradient(120deg, #1a2a6c, #b21f1f, #fdbb2d, #1a2a6c);
  background-size: 300% 300%;
  animation: hueFlow 24s linear infinite;
}

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

/* 花瓣画布（禁用指针事件，避免影响滚轮命中） */
#petals {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* 主内容（不再作为滚动容器） */
.snap-container {
  position: relative;
  z-index: 1;
  min-height: calc(var(--vh, 1vh) * 100);
  width: 100%;
}

.section {
  height: calc(var(--vh, 1vh) * 100); /* 每屏一页，使用稳定视口高度 */
  width: 100%;
  display: grid;
  place-items: center;
  padding: 6vh 6vw;
  text-align: center; /* 所有内容居中 */
  /* 每节从容器顶部对齐，并强制停止在吸附点 */
  scroll-snap-align: start;
  scroll-snap-stop: always; /* 更好地处理快速/大幅滑动 */
}

.hero h1 {
  font-family: "Noto Serif SC", serif;
  font-size: clamp(2.4rem, 6vw, 5rem);
  letter-spacing: 0.02em;
  font-weight: 600;
}
.subtitle {
  margin-top: 1rem;
  color: var(--muted);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
}

.section h2 {
  font-family: "Noto Serif SC", serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 1rem;
}
.section p {
  max-width: 60ch;
  line-height: 1.8;
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.125rem);
}

/* 段落文本：容器居中，文字左对齐 */
.section .text {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
/* 首行缩进（首页 hero 不含 .text，不受影响；结尾标记不缩进） */
.section:not(.hero) .text p { text-indent: 2em; }
.section .text p.ending { text-indent: 0; }
/* 段落间距优化 */
.section .text p + p { margin-top: 0.75rem; }

/* 入场微动效，避免突变 */
.section .content { opacity: 0; transform: translateY(12px); transition: 600ms ease; }
.section.is-visible .content { opacity: 1; transform: translateY(0); }

/* 调整段落内容网格：默认单列，小屏不变 */
.section .content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
  justify-items: center;
}

/* 宽屏：文字固定在屏幕中线附近，插图在另一侧 */
@media (min-width: 900px) {
  .section:not(.hero):not(.preface):not(.epilogue) .content {
    grid-template-columns: 1fr minmax(340px, 60ch) 1fr; /* 左-中(文字)-右 */
    align-items: center;
    column-gap: clamp(2rem, 6vw, 8rem);
  }
  /* 图在左，文在右：文置中列，无偏移 */
  .section:not(.hero):not(.preface):not(.epilogue) .content > .chem-figure:first-child {
    grid-column: 1; justify-self: end;
  }
  .section:not(.hero):not(.preface):not(.epilogue) .content > .text:last-child {
    grid-column: 2; justify-self: center; transform: none;
  }
  /* 文在左，图在右：文置中列，无偏移 */
  .section:not(.hero):not(.preface):not(.epilogue) .content > .text:first-child {
    grid-column: 2; justify-self: center; transform: none;
  }
  .section:not(.hero):not(.preface):not(.epilogue) .content > .chem-figure:last-child {
    grid-column: 3; justify-self: start;
  }
}

/* 强制宽屏下内容容器拉伸为全宽，并将文字固定在屏幕中线 */
@media (min-width: 900px) {
  /* 让 section 内的内容横向拉伸，避免被居中对齐限制宽度 */
  .section:not(.hero):not(.preface):not(.epilogue) { justify-items: stretch !important; }
  .section:not(.hero):not(.preface):not(.epilogue) .content { width: 100%; }

  /* 三列布局：左(插图)/中(文字)/右(插图) */
  .section:not(.hero):not(.preface):not(.epilogue) .content {
    grid-template-columns: 1fr minmax(340px, 60ch) 1fr !important;
    column-gap: clamp(2rem, 6vw, 8rem);
    align-items: center;
  }
  /* DOM 顺序：图在左，文在右 */
  .section:not(.hero):not(.preface):not(.epilogue) .content > .chem-figure:first-child { grid-column: 1; justify-self: end; }
  .section:not(.hero):not(.preface):not(.epilogue) .content > .text:last-child { grid-column: 2; justify-self: center; }
  /* DOM 顺序：文在左，图在右 */
  .section:not(.hero):not(.preface):not(.epilogue) .content > .text:first-child { grid-column: 2; justify-self: center; }
  .section:not(.hero):not(.preface):not(.epilogue) .content > .chem-figure:last-child { grid-column: 3; justify-self: start; }
}

/* 保持序言与尾声为单列布局 */
.preface .content { grid-template-columns: 1fr; justify-items: center; }
.epilogue .content { grid-template-columns: 1fr; justify-items: center; }

/* 丁达尔光（体积光） */
.godrays {
  position: fixed;
  inset: -10% -10% -10% -10%; /* 稍微超出视口避免边缘裁切 */
  pointer-events: none;
  z-index: 0; /* 与 canvas 同层，仍在内容下方 */
  mix-blend-mode: screen; /* 与背景叠加提亮 */
  opacity: 0.18; /* 轻微即可，避免抢戏 */
  filter: blur(10px) saturate(120%);
  background:
    /* 叠加多束光线 */
    conic-gradient(from 10deg at 20% -10%, rgba(255,255,255,0.25), transparent 40%),
    conic-gradient(from -8deg at 80% -5%, rgba(255,240,220,0.22), transparent 38%),
    conic-gradient(from 6deg at 50% -15%, rgba(245,250,255,0.18), transparent 36%);
  animation: raysRotate 36s linear infinite;
}

@keyframes raysRotate {
  0% { transform: rotate(0deg) translateZ(0); }
  50% { transform: rotate(180deg) translateZ(0); }
  100% { transform: rotate(360deg) translateZ(0); }
}

/* 化学结构占位图（透明描边，融入背景） */
.chem-figure {
  margin: 0;
  width: min(46vw, 460px);
  max-width: 90%;
  aspect-ratio: 1.25 / 1;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: screen; /* 提亮叠加，融入背景 */
  transition: opacity 300ms ease;
}
.section.is-visible .chem-figure { opacity: 0.72; }
.chem-figure svg { width: 100%; height: 100%; display: block; }
.chem-stroke { stroke: rgba(255,255,255,0.7); stroke-width: 2; fill: transparent; stroke-linecap: round; stroke-linejoin: round; }
.chem-node { fill: rgba(255,255,255,0.0); stroke: rgba(255,255,255,0.6); }

/* Hero 覆盖：始终单列垂直居中 */
.hero .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}

/* 抽象大脑图像（透明描边、融合背景） */
.brain-figure {
  margin: 0.5rem 0 0;
  width: min(42vw, 480px);
  max-width: 92vw;
  max-height: 38vh;
  height: auto;
  opacity: 0.58;
  mix-blend-mode: screen;
  pointer-events: none;
}
.brain-figure svg { width: 100%; height: 100%; display: block; }
.brain-stroke { stroke: rgba(255,255,255,0.7); stroke-width: 2.2; fill: transparent; stroke-linecap: round; stroke-linejoin: round; }
.brain-trace  { stroke: rgba(255,255,255,0.45); stroke-width: 1.5; fill: transparent; stroke-linecap: round; stroke-linejoin: round; }

/* 轻微呼吸/漂浮动画 */
.brain-figure.float-slow { animation: brainFloat 18s ease-in-out infinite; }
@keyframes brainFloat {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.01); }
  100% { transform: translateY(0) scale(1); }
}

/* 在深色模式下稍微增强；浅色模式则减弱 */
@media (prefers-color-scheme: dark) {
  .godrays { opacity: 0.22; }
  .brain-figure { opacity: 0.64; }
}
@media (prefers-color-scheme: light) {
  .godrays { opacity: 0.14; }
  .brain-figure { opacity: 0.5; }
}

/* 轻微漂浮动效 */
.float-slow { animation: float 14s ease-in-out infinite; }
@keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } }

/* 首页 Hero 下移一些，让标题与副标题位置更低 */
.hero {
  padding-top: 14vh;
  padding-bottom: 4vh;
}

/* 序言页：单列居中布局，文本居中对齐 */
.preface .content {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
}
.preface .text {
  max-width: 60ch;
  text-align: left;
}
.preface h2 { margin-bottom: 1rem; }
/* 序言标题居中（正文仍保持左对齐与缩进） */
.preface .text h2 { text-align: center; }
/* 尾声：居中、轻强调 */
.epilogue .content { display: grid; grid-template-columns: 1fr; justify-items: center; }
.epilogue .text { text-align: center; max-width: 60ch; }
.ending { margin-top: 1.2rem; letter-spacing: 0.2em; color: rgba(255,255,255,0.75); }
/* 标题与正文之间的间距略增 */
.section .text h2 { margin-bottom: 1.25rem; }
@media (min-width: 900px) {
  .section .text h2 { margin-bottom: 1.5rem; }
}

/* 侧边配图（使用 1.png，占位，透明融合） */
.side-figure { 
  margin: 0; 
  width: min(20vw, 260px);
  max-width: 34vw;
  opacity: 0.65; 
  mix-blend-mode: screen; 
  pointer-events: none; 
  align-self: center; /* 与文字垂直居中对齐 */
}
.side-figure img { width: 100%; height: auto; display: block; }

/* 宽屏下的三列布局：左(图) - 中(文) - 右(图) */
@media (min-width: 900px) {
  /* 宽屏：将侧图整体再上移一些 */
  .section:not(.hero):not(.preface):not(.epilogue) .content > .side-figure { 
    /* 允许每段通过 --img-shift 自定义位移，默认 -8vh */
    transform: translateY(var(--img-shift, -8vh));
  }
  .section:not(.hero):not(.preface):not(.epilogue) .content { 
    width: 100%; 
    display: grid; 
    grid-template-columns: 1fr minmax(340px, 60ch) 1fr; 
    align-items: center; 
  column-gap: clamp(0.75rem, 3vw, 3.5rem);
    justify-items: stretch;
  }
  /* 图在左，文在右（文为最后一个子项） */
  .section:not(.hero):not(.preface):not(.epilogue) .content > .side-figure:first-child { grid-column: 1; justify-self: end; }
  .section:not(.hero):not(.preface):not(.epilogue) .content > .text:last-child       { grid-column: 2; justify-self: center; transform: translateX(0.5vw); }
  /* 文在左，图在右（文为第一个子项） */
  .section:not(.hero):not(.preface):not(.epilogue) .content > .text:first-child      { grid-column: 2; justify-self: center; transform: translateX(-0.5vw); }
  .section:not(.hero):not(.preface):not(.epilogue) .content > .side-figure:last-child{ grid-column: 3; justify-self: start; }
}

/* 小屏：上下排列，文字保持居中容器内左对齐 */
@media (max-width: 899.98px) {
  .side-figure { width: min(42vw, 240px); opacity: 0.68; }
}