/* ══════════════════════════════════════════════════════
   月相科学模块(锚点 #science 在抽屉容器的揭幕完成点上)
   子组件:__text(标题 / 标语 / 正文)  ·  __visual(右侧视觉)
   抽屉揭幕:本区被首屏盖住,滚动时首屏像抽屉一样上移露出
   ══════════════════════════════════════════════════════ */

/* ── 抽屉容器:-100vh 外边距垫到首屏(z2)底下;science 在容器内 sticky
   钉住视口顶,首屏滚离的 100vh 行程里保持不动,随后恢复常规滚动;
   spacer 提供这 100vh 行程,正好被负边距抵消,后续区块零位移 ── */
.science-drawer {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
}
.science-drawer .science {
  position: sticky;
  top: 0;
}
/* 锚点钉在揭幕完成点(容器顶 +100vh):导航跳转 / 滚动高亮的目标位
   与改造前 section 的文档位置一致 */
.science-drawer__anchor {
  position: absolute;
  top: 100vh;
}
.science-drawer__spacer { height: 100vh; }

/* ── 模块容器 ── */
.science {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 351px 60px;
}
.science__inner {
  width: 100%;
  max-width: 1528px; /* 715(左) + 85(间隔) + 728(右) */
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 715fr) minmax(0, 728fr); /* 设计稿左右比例 715:728 */
  gap: 85px;
  align-items: stretch;
}

/* ── 子组件:左栏文案(顺序 标题 → 标语 → 正文) ── */
.science__heading {
  font-size: 16px;
  font-weight: 300;
  line-height: 40px;
  letter-spacing: 3px;
  color: #C5B8ED;
  margin-bottom: 16px;
  opacity: 0.6;
}
.science__slogan {
  font-weight: 400;
  font-size: 78px;
  line-height: 100px;
  margin-bottom: 27px;
}
/* 每行独立成块,各自单独应用文字渐变(渐变盒 = 单行宽度,左 → 右) */
.science__slogan span {
  display: block;
  width: fit-content; /* 渐变盒收缩到文字实际宽度,渐变正好铺满字面 */
  color: #FCEEFF; /* 不支持文字渐变时的兜底色 */
  background-image: linear-gradient(90deg, #EEEEEE 0%, #D1A1FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.science__body p {
  font-size: 16px;
  font-weight: 300;
  line-height: 36px;
  color: #C5B8ED;
  opacity: 0.6;
}
.science__body p:nth-child(1) { margin-bottom: 16px; } /* 第一段 → 第二段 */
.science__body p:nth-child(2) { margin-bottom: 28px; } /* 第二段 → 第三段 */
.science__body p:nth-child(3) { margin-bottom: 0; }

/* ── 子组件:右栏视觉(月球 + 星环 SVG) ── */
.science__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}
.science__orbits {
  /* svg viewBox 左右各 48px 出血区(防行星光晕裁切),负 margin 补偿,
     内容 728 单位仍精确映射到栏宽 */
  width: calc(100% + 96px);
  margin-left: -48px;
  aspect-ratio: 824 / 360; /* object 不一定继承 svg viewBox 比例,显式锁定 */
  display: block;
  pointer-events: none; /* object 是独立文档,避免吞掉页面的鼠标事件 */
}

/* ── 响应式 ── */
@media (max-width: 960px) {
  .science { padding: 100px 24px; }
  .science__inner { grid-template-columns: 1fr; gap: 48px; }
  .science__slogan { font-size: clamp(2rem, 8vw, 78px); line-height: 1.5; }
  /* 窄屏取消出血放大:48px 出血会超出视口撑宽页面,SVG 自带出血区兜底光晕 */
  .science__orbits { width: 100%; margin-left: 0; }
}