/* ============================================================
   首页：6 屏滚轮步进舞台
   #track 高度 454vh = 3 屏(300vh) + 友链区(154vh)
   步进偏移（vh）：0, 100, 200 | 300, 332, 354
   友链区内部偏移按设计稿第 4→5→6 页的位移量推导：
   第4页→第5页 卡片网格上移约 32vh；第5页→第6页 再上移约 22vh
   ============================================================ */
.page-home { overflow: hidden; }

#stage { position: fixed; inset: 0; overflow: hidden; }
#track {
  height: 454vh;
  transition: transform var(--anim-step);
  will-change: transform;
}

.step { position: relative; height: 100vh; overflow: hidden; }

/* 除首屏外，每屏加暗色遮罩（首屏遮罩由 home.js 之外的全局背景控制） */
.step::before, .friend-area::before {
  content: ''; position: absolute; inset: 0;
  background: var(--overlay);
  pointer-events: none;
}
#step-hero::before { display: none; }

/* —— 首屏 —— */
.hero-line {
  position: absolute; top: 11.13rem; left: 6.81rem;
  font-size: 1.9rem; font-weight: 300; font-style: italic;
  opacity: .92;
}
.hero-name {
  position: absolute; top: 13.6rem; left: 6.31rem;
  font-size: 8rem; line-height: 1.2;
}
.hero-name .en { display: block; font-family: var(--font-logo); font-weight: 600; }
.hero-name .zh { display: block; font-weight: 700; }

/* —— 第 2/3 屏：大标题 + 右侧扇形卡片堆 —— */
.section-copy {
  position: absolute; top: 16.56rem; left: 7.4rem;
  max-width: 37.5rem;
}
.section-title { font-size: 8rem; font-weight: 700; line-height: 1.25; }
.section-sub { font-size: 2rem; font-weight: 600; margin-top: 1rem; opacity: .92; }

/* 标题行：箭头紧跟标题文字之后（中英文都随文字自适应，不再重叠） */
.section-title-row { display: flex; align-items: center; gap: 1.6rem; }
.deck-arrow {
  width: 6.3rem; height: auto;
  flex-shrink: 0;
  opacity: .85;
  /* 字形视觉中心比行盒中心略低（雅黑字形下沉约 8px@720p），下移补偿对齐文字中轴线 */
  translate: 0 0.5rem;
}

/* 英文版：标题/副标题字数较长，酌情缩小字号并放宽文案区 */
html[lang="en"] .section-title { font-size: 6rem; }
html[lang="en"] .section-sub { font-size: 1.5rem; }
html[lang="en"] .section-copy { max-width: 40rem; }
html[lang="en"] .deck-arrow { translate: 0 0.31rem; }

.deck {
  position: absolute; left: 49.4rem; top: 9.56rem;
  width: 19.75rem; height: 28.94rem;
  display: block;
}
.deck .deck-card {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 2.5rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  transition: translate .25s ease, box-shadow .25s ease;
}
.deck .deck-card:nth-child(1) { translate: 0 0; }
.deck .deck-card:nth-child(2) { translate: 1.125rem .5625rem; }
.deck .deck-card:nth-child(3) { translate: 2.375rem .9375rem; }
.deck .deck-card:nth-child(4) { translate: 3.6875rem 1.5625rem; }
.deck:hover .deck-top { translate: 3.6875rem 1.5625rem -6px; box-shadow: 0 14px 32px rgba(0, 0, 0, .45); }

/* —— 友链区（第 4-6 屏） —— */
.friend-area { position: relative; height: 154vh; }
.fa-title {
  position: absolute; top: 13vh; left: 0; right: 0;
  text-align: center;
}
.fa-grid {
  position: absolute; top: 49vh; left: 50%;
  transform: translateX(-50%);
  width: 66rem;
  display: flex; flex-direction: column; gap: 4.19rem;
}
.fa-row { display: flex; justify-content: space-between; }
.fa-row { transition: opacity .5s ease; }
.friend-area.hide-row2 #friend-row2 { opacity: 0; }

.friend-card {
  width: 16.5rem; height: 14.5rem;
  background: var(--blue-panel);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 2.4rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .7rem;
  padding: 1.2rem;
}
.friend-card .fc-avatar {
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .7);
}
.friend-card .fc-name {
  font-size: 1.5rem; font-weight: 600;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.friend-card .fc-url {
  font-size: 1rem; color: var(--text-dim);
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 第 6 个模块：磨砂玻璃蒙层 + 大“+”（样式在 base.css 中共享），点击进入独立友链页 */
.friend-card.add-friend { position: relative; overflow: hidden; }

/* —— 第 6 屏：停止线（与其它页面一致） —— */
.fa-end {
  position: absolute; top: 132vh; left: 0; right: 0;
}
.fa-end .stop-line { margin: 0 auto; }