/* ============================================================
   区块骨架 + 各具体区块
   上半部分是骨架（容器 / 留白 / 排版层级），供新增区块复用，让每个
   新区块只写内容、不写尺寸，避免各自造字号与宽度（UI 指南 §1）。
   下半部分按区块分节，每节以「具体区块 · XXX」注释开头。

   为什么骨架和具体区块放在同一个文件：本项目零构建，每个 CSS 文件都
   是一次 HTTP 请求。区块还会增加四五个，一个区块一个文件会变成六七个
   <link>。所以按注释分节，而不是按文件拆分。

   依赖 tokens.css 的排版 scale（--fs-* / --leading-* / --tracking-*）
   与布局 token（--container* / --gutter / --section-y / --nav-h）。

   两条纪律：
   1. 本文件只写带类名的规则，**不写裸元素选择器**。滚动演示区的消息
      由 js/lib/markdown.js 用 innerHTML 注入裸 p / h1–h6 / ul / ol /
      li / blockquote / pre / code / strong，裸规则会误伤它们。
   2. 不要为了「作用域」把页面包进 <main>。body 是 flex column
      （base.css），.hero-section / .animation-wrapper / .slogan-section
      都靠 flex-shrink:0 维持高度；多包一层会让 800vh 与 sticky 变成
      孙子元素，几何风险极高。

   components.css 是已冻结的滚动动画样式，其选择器与本文件无交集，
   引入本文件不会改变现有页面的任何呈现。
   ============================================================ */

/* ------------------------------------------------------------
   区块与容器
   ------------------------------------------------------------ */
.section {
  position: relative;
  /* --section-y 是「相邻区块之间的完整间隙」，故每侧只取一半。
     body 是 flex 容器，垂直方向不会发生 margin/padding 塌陷，
     若两侧都写完整值，区块间会出现 2 倍空白。 */
  padding: calc(var(--section-y) / 2) var(--gutter);
  /* 与 .hero-section / .animation-wrapper / .slogan-section 一致的既有约定 */
  flex-shrink: 0;
}

/* 浅色底区块：与页面底 cream-50 拉开一档，做区块间的视觉呼吸 */
.section-tint {
  background: var(--cream-100);
}

/* 固定导航（半透明 + 毛玻璃）会盖住锚点目标，可跳转区块预留导航高度。
   16px 的余量是为了让内容躲开毛玻璃的模糊溢出。 */
.section[id] {
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

/* 散文型容器（默认） */
.section-inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
}

/* 栅格 / 多列内容用更宽的容器（单独使用即可） */
.section-inner-wide {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
}

/* ------------------------------------------------------------
   区块内排版层级
   ------------------------------------------------------------ */
.section-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-normal);
  color: var(--primary);
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 650; /* 与 hero h1 / slogan 一致：品牌粗体是 650，不是 700 */
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--text-1);
  text-wrap: balance; /* 避免标题末行只剩一两个字的孤行；不支持的浏览器自动忽略 */
}

.section-lead {
  max-width: 60ch;
  font-size: var(--fs-lead);
  line-height: var(--leading-normal);
  color: var(--text-2);
}

/* 三者相邻时自动拉开层级间距，免去每个区块各写一遍 margin */
.section-eyebrow + .section-title { margin-top: 12px; }
.section-title + .section-lead { margin-top: 16px; }

/* ============================================================
   具体区块 · 右侧进度轨（整页缩略图）
   ------------------------------------------------------------------
   把整页**按真实长度成比例**缩略成一条：每一段的高度 = 它实际
   占的滚动长度。电影的 800vh 会吃掉将近一半的轨道 —— 于是用户
   一眼就能看到"这一页大半是那段电影，而我才刚开头"。

   这正是等距圆点做不到的：圆点只能表达"第几段"，表达不了"多长"。

   比例由 JS 写进每段的 flex-grow（读 offsetHeight 算），CSS 只负责
   排布与上色。填充自顶向下，和页面的方向一致。
   ============================================================ */
.rail {
  position: fixed;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 140; /* 低于导航的 150 */
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 8px;
  height: min(300px, 50vh);
}

.rail-seg {
  position: relative;
  flex: 1 1 0; /* flex-grow 由 JS 按真实长度覆盖 */
  min-height: 4px;
  width: 100%;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--gray-200);
  cursor: pointer;
  transition: background 0.25s ease;
}
/* 轨道只有 8px 宽，热区往左右各外扩 6px 才好点中 */
.rail-seg::after {
  content: '';
  position: absolute;
  inset: 0 -6px;
}
.rail-seg:hover { background: var(--gray-300); }

.rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0; /* JS 按段内进度写 0–100% */
  border-radius: 2px;
  background: var(--leaf-500);
}
.rail-seg.is-current .rail-fill { background: var(--leaf-600); }

/* 悬停才浮出的段名，往左展开 */
.rail-label {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-sm);
  color: var(--text-2);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.rail-seg:hover .rail-label,
.rail-seg:focus-visible .rail-label {
  opacity: 1;
}

/* ------------------------------------------------------------
   点了几次假按钮之后的回应
   ------------------------------------------------------------------
   早先试的是"当前段左右抖 4px" —— 在 8px 宽的轨道上根本看不见，
   用户完全没感觉到。现在改成**一道光带沿轨道从上往下流过**：
   幅度大、方向明确（就是"往下"），不可能看漏。
   ------------------------------------------------------------ */
.rail-sweep {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 45%;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--leaf-300) 35%,
    var(--leaf-500) 50%,
    var(--leaf-300) 65%,
    transparent
  );
}
.rail.is-sweeping .rail-sweep {
  animation: railSweep 0.95s cubic-bezier(0.4, 0, 0.6, 1);
}
@keyframes railSweep {
  0% { opacity: 0; transform: translateY(-110%); }
  12% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translateY(240%); }
}

/* 点到第 3 次起：再浮出一个向下的箭头 —— 到这一步是真的卡住了 */
.rail-hint {
  position: absolute;
  left: 50%;
  bottom: -24px;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-right: 2px solid var(--leaf-600);
  border-bottom: 2px solid var(--leaf-600);
  border-radius: 1px;
  pointer-events: none;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.rail.has-hint .rail-hint {
  opacity: 1;
  animation: railHint 1.4s ease-in-out infinite 0.95s;
}
@keyframes railHint {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(3px, 3px); }
}

/* 移动端隐藏：那里画布已经铺满，右边缘没有余量 */
@media (max-width: 900px) {
  .rail { display: none; }
}

/* ============================================================
   具体区块 · 页脚（片尾字幕）
   刻意不承担 CTA —— 转化入口在导航；将来另建「开始用」区块。
   基调是克制：小字、少链接，不堆图标，不做第二个导航。
   ============================================================ */
.site-footer {
  /* 白底：不设 background，直接跟随 body 的 var(--bg)，与上方完全同色。
     不加任何渐层/色带 —— 页脚要的是干净，不是花哨。

     分割全靠顶部这条线，所以它必须比 --border-hair（gray-100 #f3f4f6）
     明显一档：gray-100 在 #fdfcfa 上几乎看不见，等于没有分割，
     会让页脚和上一屏"连成一片"。--border-card（gray-200 #e5e7eb）
     是够用又不重的那一档。

     也不套 .section-inner* 居中容器 —— 两端对齐的布局被限宽居中后，
     宽屏上两边会空出一大块、反而显得挤在中间。 */
  border-top: 1px solid var(--border-card);
}

.site-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* 网格而非 flex：让说明句自动对齐到产品名下方（第 2 列），
   而不是靠 padding 去凑 logo 的宽度 */
.site-footer-brand {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  row-gap: 6px;
}
.site-footer-brand .logo { width: 20px; height: 20px; flex-shrink: 0; }
.site-footer-name {
  font-size: var(--fs-body);
  font-weight: 650;
  letter-spacing: var(--tracking-normal);
  color: var(--text-1);
}
.site-footer-desc {
  grid-column: 2;
  font-size: var(--fs-sm);
  line-height: var(--leading-normal);
  color: var(--text-2);
}

.site-footer-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer-nav a {
  font-size: var(--fs-sm);
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer-nav a:hover { color: var(--primary); }

.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--border-hair);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.site-footer-bottom a {
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer-bottom a:hover { color: var(--primary); }

@media (max-width: 600px) {
  .site-footer-top { flex-direction: column; gap: 20px; }
  .site-footer-bottom { justify-content: flex-start; gap: 8px; }
}