/* Base */
* {
  box-sizing: border-box; /* 让 width 和 height 包含 padding 与 border，尺寸更好算 */
}

html {
  scroll-behavior: smooth; /* 点击锚点链接时平滑滚动 */
}

body {
  margin: 0; /* 去掉浏览器默认外边距 */
  background: #f6f3ec; /* 设置页面暖白色背景 */
  color: #111111; /* 设置页面默认文字颜色 */
  font-family: Arial, sans-serif; /* 设置全站默认字体 */
}

a {
  color: inherit; /* 链接使用父元素的文字颜色 */
  text-decoration: none; /* 去掉链接默认下划线 */
}

button {
  border: 0; /* 去掉按钮默认边框 */
  background: transparent; /* 去掉按钮默认背景 */
  color: inherit; /* 让按钮继承文字颜色 */
  cursor: pointer; /* 让按钮显示可点击状态 */
}

/* Intro / opening animation */
.intro-screen {
  position: fixed; /* 让黑色开场层固定覆盖整个屏幕 */
  inset: 0; /* 让开场层上下左右都贴住屏幕边缘 */
  z-index: 200; /* 让开场层盖在页面和导航上面 */
  overflow: hidden; /* 避免动画移动时出现多余内容 */
  background: #050505; /* 设置开场背景为黑色 */
  pointer-events: none; /* 让开场层不阻挡鼠标操作 */
  animation: intro-lift 1800ms cubic-bezier(0.78, 0, 0.2, 1) 3s both; /* 3 秒后黑色幕布慢慢向上拉起 */
}

.intro-word {
  position: fixed; /* 让 WELCOME 可以相对屏幕移动 */
  top: 50%; /* 开始时放在屏幕垂直中间 */
  left: 50%; /* 开始时放在屏幕水平中间 */
  color: #ffffff; /* 开场时 WELCOME 是白色 */
  font-size: clamp(56px, 12vw, 180px); /* 让 WELCOME 在不同屏幕上自适应大小 */
  font-weight: 700; /* 让 WELCOME 加粗 */
  line-height: 1; /* 减少文字上下多余空间 */
  transform: translate(-50%, -50%); /* 配合 top 和 left，让文字真正居中 */
  animation: welcome-to-corner 1800ms cubic-bezier(0.76, 0, 0.24, 1) 900ms both; /* 0.9 秒后 WELCOME 慢慢移动到左上角 */
}

/* Top index navigation */
.index-bar {
  position: fixed; /* 让索引行固定在页面顶部 */
  top: 0; /* 固定在顶部 */
  left: 0; /* 固定在左侧 */
  z-index: 100; /* 让索引行始终压在普通内容上方 */
  display: flex; /* 让标题和导航横向排列 */
  align-items: center; /* 让标题和导航垂直对齐 */
  justify-content: space-between; /* 标题在左，导航在右 */
  gap: 24px; /* 设置标题和导航之间的最小间距 */
  width: 100%; /* 让顶部索引行占满页面宽度 */
  padding: 16px 20px; /* 让索引行更贴近左上角 */
  background: #f6f3ec; /* 遮住下面滚动过去的文字，避免导航和正文重合 */
  opacity: 0; /* 初始隐藏顶部索引行 */
  animation: index-arrive 900ms ease 2.65s both; /* 让顶部索引行在 WELCOME 到位后慢慢淡入 */
}

.index-title {
  display: flex; /* 让 WELCOME 和域名横向排列 */
  flex-wrap: wrap; /* 屏幕窄时允许域名换到下一行 */
  align-items: baseline; /* 让两段文字按基线对齐 */
  gap: 8px; /* 设置 WELCOME 和域名之间的距离 */
  font-size: 22px; /* 设置左上角 WELCOME 的大小 */
  font-weight: 700; /* 让左上角 WELCOME 加粗 */
}

.index-domain {
  color: #35415a; /* 让域名带一点蓝灰色，更适合黑白建筑感 */
  font-size: 14px; /* 让域名字号小一点 */
  font-weight: 400; /* 让域名字重轻一点 */
  white-space: nowrap; /* 防止域名在中间断行 */
}

.index-domain.is-ready span {
  display: inline-block; /* 让每个字母都能单独做动画 */
  opacity: 0; /* 初始隐藏每个字母 */
  transform: translateY(14px) rotate(-7deg) scale(0.88); /* 初始让字母分散在下方 */
  animation: letter-wave 720ms cubic-bezier(0.2, 1.45, 0.35, 1)
    calc(5s + var(--i) * 50ms) both; /* 让字母按顺序波浪弹出 */
}

.index-domain.is-ready span:nth-child(even) {
  transform: translateY(-10px) rotate(6deg) scale(0.88); /* 让偶数字母从上方弹出，形成波浪 */
}

.index-nav {
  display: flex; /* 让导航链接横向排列 */
  flex-wrap: wrap; /* 屏幕窄时允许导航换行 */
  justify-content: flex-end; /* 让导航整体靠右 */
  gap: 18px; /* 设置导航链接之间的距离 */
  color: #111111; /* 设置导航链接颜色 */
  font-size: 14px; /* 设置导航链接字号 */
}

.index-nav a:hover {
  color: #35415a; /* 鼠标放到导航链接上时变成蓝灰色 */
}

.index-nav a.is-active {
  font-style: italic; /* 标记当前正在看的页面 */
}

/* View system */
.view {
  display: none; /* 默认隐藏所有页面视图 */
}

.view.is-active {
  display: block; /* 只显示当前被选中的页面视图 */
}

/* Home hello section */
.home-stage {
  display: grid; /* 使用网格控制 hello 和 scroll hint */
  min-height: 100vh; /* 让首页占满一屏 */
  place-items: center; /* 让 hello 在屏幕中间 */
  position: relative; /* 给 scroll hint 提供定位参照 */
}

.hello-svg {
  width: min(82vw, 638px); /* 使用原始 hello 宽度比例，避免末尾被裁切 */
  height: auto; /* 让 SVG 高度按比例变化 */
  overflow: visible; /* 允许线条端点超出 viewBox 一点点 */
}

.hello-path {
  fill: none; /* 不填充形状，只显示线条 */
  opacity: 0; /* 动画真正写出前保持透明，避免起笔黑点 */
  stroke: #111111; /* 设置 hello 线条颜色 */
  stroke-dasharray: 1.08; /* 比完整路径略长，避免末尾包裹闪现 */
  stroke-dashoffset: 1.08; /* 初始把整条线推到路径外面 */
  stroke-linecap: round; /* 让线条两端变圆 */
  stroke-linejoin: round; /* 让线条转角变圆 */
  stroke-width: 14.8883; /* 使用你朋友 SVG 的原始线条粗细 */
}

.hello-path-first {
  animation: draw-hello 1300ms ease-in-out 7s both; /* 控制 hello 第一段的书写速度和开始时间 */
}

.hello-path-rest {
  animation: draw-hello 4600ms ease-in-out 8s both; /* 控制 hello 剩余部分的书写速度和开始时间 */
}

body.home-hello-complete .hello-path {
  animation: none; /* 回到 Home 时不重新播放 hello 书写动画 */
  opacity: 1; /* 让 hello 直接保持可见 */
  stroke-dashoffset: 0; /* 让 hello 直接显示完整路径 */
}

/* Scroll hint */
.scroll-hint {
  position: absolute; /* 固定在首页底部区域 */
  bottom: 36px; /* 距离底部 36px */
  left: 50%; /* 水平定位到中间 */
  display: flex; /* 让文字和线条竖向排列 */
  flex-direction: column; /* 让 Scroll 和线条上下排列 */
  align-items: center; /* 让文字和线条居中 */
  gap: 10px; /* 设置文字和线条之间的距离 */
  color: #35415a; /* 使用蓝灰色提示滚动 */
  font-size: 12px; /* 设置提示文字较小 */
  letter-spacing: 0.08em; /* 让提示文字更有呼吸感 */
  opacity: 0; /* 初始隐藏 */
  text-transform: uppercase; /* 把提示文字转成大写风格 */
  transform: translateX(-50%); /* 修正 left 50% 带来的偏移 */
  animation: index-arrive 900ms ease 12s both; /* hello 写完后再出现 */
}

body.home-hello-complete .scroll-hint {
  animation: none; /* 回到 Home 时不重新等待 Scroll 提示动画 */
  opacity: 1; /* 让 Scroll 提示直接显示 */
}

.scroll-line {
  width: 1px; /* 细线宽度 */
  height: 42px; /* 细线高度 */
  background: #35415a; /* 细线颜色 */
  animation: scroll-line 1400ms ease-in-out infinite; /* 让细线轻微上下运动 */
}

/* About section */
.page-section {
  display: grid; /* 使用网格方便内容居中 */
  min-height: 100vh; /* 每个大区块占一屏 */
  padding: 120px 20px; /* 给内容留出上下左右空间 */
  place-items: center; /* 让内容在区块中间 */
}

.section-inner {
  max-width: 860px; /* 限制文字最大宽度 */
  width: 100%; /* 让内容在小屏幕上占满可用宽度 */
}

.section-kicker {
  margin: 0 0 22px; /* 设置小标题和主标题之间的距离 */
  color: #35415a; /* 设置小标题颜色 */
  font-size: 14px; /* 设置小标题字号 */
  text-transform: uppercase; /* 小标题使用大写 */
}

.about-section h1 {
  margin: 0 0 28px; /* 设置主介绍和段落之间的距离 */
  font-size: clamp(42px, 7vw, 96px); /* 让介绍标题自适应屏幕 */
  font-weight: 400; /* 让标题更轻，更有建筑作品集感 */
  line-height: 1.05; /* 控制大标题行高 */
}

.section-inner p {
  max-width: 620px; /* 限制正文宽度 */
  color: #35415a; /* 设置正文为蓝灰色 */
  font-size: 19px; /* 设置正文大小 */
  line-height: 1.7; /* 设置正文行高 */
}

/* Identity cards */
.identity-section {
  display: grid; /* 让三张卡片按纵向滚动排列 */
}

.identity-card {
  display: flex; /* 让卡片内容可以竖向排布 */
  min-height: 100vh; /* 每张卡片占一屏 */
  flex-direction: column; /* 卡片内容上下排列 */
  justify-content: center; /* 卡片内容垂直居中 */
  padding: 120px 8vw; /* 给卡片留出大边距 */
}

.identity-card > span {
  color: #35415a; /* 设置编号颜色 */
  font-size: 14px; /* 设置编号字号 */
}

.identity-card h2 {
  margin: 18px 0 24px; /* 设置标题上下间距 */
  font-size: clamp(72px, 16vw, 180px); /* 让卡片标题非常醒目 */
  font-weight: 400; /* 让卡片标题更轻 */
  line-height: 0.92; /* 让大字更紧凑 */
}

.identity-card h2 span {
  display: block; /* 让 I am a 单独占一行 */
  margin-bottom: 12px; /* 设置小字和大词之间的距离 */
  color: #35415a; /* 设置小字颜色 */
  font-size: clamp(22px, 3vw, 38px); /* 让 I am a 比身份词小很多 */
  line-height: 1.1; /* 控制小字行高 */
}

.identity-card p {
  max-width: 560px; /* 限制卡片描述宽度 */
  color: #35415a; /* 设置卡片描述颜色 */
  font-size: 20px; /* 设置卡片描述字号 */
  line-height: 1.6; /* 设置卡片描述行高 */
}

/* Works section */
.works-section .section-inner {
  max-width: 1080px; /* 让 Home 里的转盘有足够横向空间 */
}

.works-section h2 {
  margin: 0 0 24px; /* 设置区块标题间距 */
  font-size: clamp(44px, 8vw, 112px); /* 设置区块标题大小 */
  font-weight: 400; /* 让区块标题更轻 */
  line-height: 1; /* 控制区块标题行高 */
}

/* Contact bar */
.contact-bar {
  display: flex; /* 让 Contact 标题和联系内容横向排列 */
  align-items: center; /* 让联系栏内容垂直居中 */
  justify-content: space-between; /* 让标题在左，联系内容在右 */
  gap: 24px; /* 设置左右内容之间的距离 */
  margin: 0 20px 20px; /* 让联系栏贴近页面底部但保留边距 */
  background: #f6f3ec; /* 让联系栏背景和页面一致 */
  padding: 16px 20px; /* 设置联系栏内部留白 */
}

.contact-bar > span {
  font-size: 22px; /* 让 Contact 像顶部 WELCOME 一样有索引感 */
  font-weight: 700; /* 加粗 Contact 标题 */
}

.contact-items {
  display: flex; /* 让联系方式横向排列 */
  flex-wrap: wrap; /* 小屏幕下允许联系方式换行 */
  justify-content: flex-end; /* 让联系方式靠右 */
  gap: 18px; /* 设置联系方式之间的距离 */
  color: #35415a; /* 设置联系方式颜色 */
  font-size: 14px; /* 设置联系方式字号 */
}

.contact-items a:hover {
  color: #111111; /* 鼠标放到链接上时变深 */
}

/* Inner pages */
.page-view {
  min-height: 100vh; /* 让每个独立页面至少占满一屏 */
  padding: 120px 20px 80px; /* 给固定导航和页面内容留出空间 */
}

.view-shell {
  width: 100%; /* 让内容容器在小屏幕占满可用宽度 */
  max-width: 1080px; /* 限制大屏幕内容宽度 */
  margin: 0 auto; /* 让内容容器水平居中 */
}

.view-shell h1 {
  max-width: 900px; /* 避免标题在大屏幕上太长 */
  margin: 0 0 24px; /* 设置页面标题下方距离 */
  font-size: clamp(48px, 9vw, 132px); /* 设置页面大标题大小 */
  font-weight: 400; /* 让标题保持轻盈 */
  line-height: 0.98; /* 让大标题更紧凑 */
}

.view-shell > p {
  max-width: 620px; /* 限制页面说明文字宽度 */
  color: #35415a; /* 设置页面说明文字颜色 */
  font-size: 19px; /* 设置页面说明文字大小 */
  line-height: 1.7; /* 设置页面说明文字行高 */
}

.text-link,
.project-link {
  display: inline-block; /* 让链接可以拥有上下间距 */
  margin-top: 22px; /* 设置链接和上方文字的距离 */
  border-bottom: 1px solid #111111; /* 给链接加细下划线 */
  padding-bottom: 4px; /* 让下划线和文字分开一点 */
}

/* Works cover flow */
.coverflow {
  position: relative; /* 给绝对定位的封面卡片提供参照 */
  height: clamp(300px, 42vh, 460px); /* 设置转盘区域高度 */
  margin-top: 64px; /* 拉开说明文字和转盘的距离 */
  overflow: hidden; /* 隐藏转盘边缘多余卡片 */
  cursor: grab; /* 提示这个区域可以拖动 */
  perspective: 1000px; /* 给封面旋转制造 3D 深度 */
  touch-action: pan-y; /* 保留手机上下滚动手势 */
  user-select: none; /* 拖动时不要选中文字 */
}

.coverflow.is-dragging {
  cursor: grabbing; /* 拖动中改变鼠标状态 */
}

.coverflow-card {
  position: absolute; /* 让所有卡片叠在转盘舞台里 */
  top: 18px; /* 控制卡片距离转盘顶部的位置 */
  left: 50%; /* 先把卡片放到水平中线 */
  z-index: var(--z); /* 让中间卡片压在两侧卡片上面 */
  display: flex; /* 让卡片内部文字可以上下排列 */
  width: clamp(170px, 23vw, 280px); /* 设置封面卡片大小 */
  aspect-ratio: 1 / 1; /* 让卡片保持正方形 */
  flex-direction: column; /* 让卡片内容上下排列 */
  justify-content: space-between; /* 让分类、标题、身份分布在上下 */
  border: 1px solid #111111; /* 设置封面边框 */
  background: #f6f3ec; /* 设置封面背景 */
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.14); /* 给封面一点浮起感 */
  font-family: inherit; /* 让按钮继承网页字体 */
  opacity: var(--opacity); /* JS 控制远处卡片透明度 */
  padding: 20px; /* 设置封面内部留白 */
  text-align: left; /* 让封面文字靠左 */
  transform: translateX(calc(-50% + var(--x))) rotateY(var(--rotate))
    scale(var(--scale)); /* JS 控制卡片位置、旋转、大小 */
  transform-style: preserve-3d; /* 保留 3D 旋转效果 */
  transition:
    opacity 260ms ease,
    transform 260ms ease; /* 控制转盘移动动画 */
  -webkit-box-reflect: below 10px
    linear-gradient(transparent 55%, rgba(246, 243, 236, 0.24)); /* 模仿 Apple Cover Flow 的倒影 */
}

.coverflow-card:hover {
  background: #111111; /* 鼠标放上去时变成黑底 */
  color: #f6f3ec; /* 鼠标放上去时文字变成暖白 */
}

.coverflow-card--image {
  overflow: hidden; /* 图片超出封面时裁掉 */
  padding: 0; /* 图片封面不需要文字留白 */
}

.coverflow-card--image img {
  display: block; /* 去掉图片底部默认空隙 */
  width: 100%; /* 图片占满封面宽度 */
  height: 100%; /* 图片占满封面高度 */
  filter: grayscale(1); /* 默认黑白，保持整体风格统一 */
  object-fit: cover; /* 让图片像封面一样裁切铺满 */
  pointer-events: none; /* 让鼠标拖动作用在卡片上，而不是图片本身 */
  transition:
    filter 220ms ease,
    transform 220ms ease; /* 控制图片 hover 动画 */
  user-select: none; /* 禁止拖动时选中图片 */
  -webkit-user-drag: none; /* 禁止浏览器把图片当成可拖拽文件 */
}

.coverflow-card--image:hover img {
  filter: grayscale(0); /* 鼠标放上去时恢复彩色 */
  transform: scale(1.04); /* 鼠标放上去时图片轻微放大 */
}

.coverflow-card span,
.coverflow-card small {
  font-size: 13px; /* 设置封面辅助文字大小 */
  letter-spacing: 0.06em; /* 让辅助文字更像索引 */
  text-transform: uppercase; /* 让辅助文字大写 */
}

.coverflow-card strong {
  font-size: clamp(30px, 4vw, 48px); /* 设置封面主标题大小 */
  font-weight: 400; /* 让封面主标题不太厚重 */
  line-height: 1; /* 控制封面主标题行高 */
}

.coverflow-title {
  min-height: 24px; /* 防止标题变化时页面跳动 */
  margin-top: 12px; /* 设置标题和转盘之间的距离 */
  color: #35415a; /* 设置当前封面标题颜色 */
  text-align: center; /* 让当前封面标题居中 */
}

/* Collection pages */
.collection {
  position: relative; /* 给左右切换按钮提供定位参照 */
  width: 100%; /* 让 collection 占满可用宽度 */
  max-width: 1120px; /* 给建筑作品图留出更宽的展示空间 */
  margin: 0 auto; /* 让 collection 居中 */
}

.collection > .article {
  display: none; /* 默认隐藏 collection 里的项目 */
}

.collection > .article.is-current {
  display: block; /* 只显示当前项目 */
}

.cover-entry {
  display: flex; /* 让项目封面和说明可以纵向排列 */
  min-height: calc(100vh - 160px); /* 让项目封面区域接近一屏 */
  flex-direction: column; /* 让封面和说明上下排列 */
  justify-content: center; /* 让封面区域垂直居中 */
  text-align: center; /* 让封面说明居中 */
}

.cover-entry__button {
  display: flex; /* 让封面按钮内部文字上下排列 */
  width: min(100%, 520px); /* 限制封面按钮最大宽度 */
  aspect-ratio: 1 / 1; /* 让封面按钮保持正方形 */
  flex-direction: column; /* 让封面按钮文字上下排列 */
  justify-content: space-between; /* 让文字分布在封面上下 */
  margin: 0 auto; /* 让封面按钮居中 */
  border: 1px solid #111111; /* 设置封面按钮边框 */
  background: #f6f3ec; /* 设置封面按钮背景 */
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.12); /* 给封面按钮一点浮起感 */
  font-family: inherit; /* 让按钮继承网页字体 */
  padding: 28px; /* 设置封面按钮内部留白 */
  text-align: left; /* 让封面按钮文字靠左 */
  transition:
    background 220ms ease,
    color 220ms ease,
    transform 220ms ease; /* 控制封面按钮 hover 动画 */
}

.cover-entry__button:hover {
  background: #111111; /* 鼠标放上去时变成黑底 */
  color: #f6f3ec; /* 鼠标放上去时文字变成暖白 */
  transform: scale(1.018); /* 鼠标放上去时轻微放大 */
}

.cover-entry__button--image {
  overflow: hidden; /* 图片超出大封面时裁掉 */
  padding: 0; /* 图片大封面不需要文字留白 */
}

.cover-entry__button--image img {
  display: block; /* 去掉图片底部默认空隙 */
  width: 100%; /* 图片占满大封面宽度 */
  height: 100%; /* 图片占满大封面高度 */
  filter: grayscale(1); /* 默认黑白，和主页转盘保持一致 */
  object-fit: cover; /* 让图片像作品封面一样裁切铺满 */
  transition:
    filter 220ms ease,
    transform 220ms ease; /* 控制大封面 hover 动画 */
}

.cover-entry__button--image:hover img {
  filter: grayscale(0); /* 鼠标放上去时恢复彩色 */
  transform: scale(1.035); /* 鼠标放上去时图片轻微放大 */
}

.cover-entry__button span,
.cover-entry__button small {
  font-size: 14px; /* 设置封面辅助文字大小 */
  letter-spacing: 0.06em; /* 让辅助文字更像索引 */
  text-transform: uppercase; /* 让辅助文字大写 */
}

.cover-entry__button strong {
  font-size: clamp(42px, 9vw, 86px); /* 设置封面主标题大小 */
  font-weight: 400; /* 让封面主标题保持轻 */
  line-height: 0.98; /* 控制封面主标题行高 */
}

.caption {
  margin-top: 22px; /* 设置封面和说明之间的距离 */
}

.caption h2 {
  margin: 0 0 8px; /* 设置说明标题间距 */
  font-size: 18px; /* 设置说明标题大小 */
  font-style: italic; /* 模仿你同学页面的斜体说明 */
  font-weight: 400; /* 让说明标题更轻 */
}

.caption p {
  margin: 0; /* 去掉说明段落默认外边距 */
  color: #35415a; /* 设置说明段落颜色 */
}

.article-content {
  display: none; /* 默认隐藏项目正文 */
  padding: 24px 0 80px; /* 给项目正文留出上下空间 */
  text-align: center; /* 让项目正文居中 */
}

.article-content.is-open {
  display: block; /* 打开的项目正文显示出来 */
}

.article-header h2 {
  margin: 0 0 18px; /* 设置项目正文标题间距 */
  font-size: clamp(42px, 8vw, 96px); /* 设置项目正文标题大小 */
  font-weight: 400; /* 让项目正文标题更轻 */
  line-height: 1; /* 控制项目正文标题行高 */
}

.article-header p:not(.section-kicker) {
  max-width: 620px; /* 限制正文介绍宽度 */
  margin: 0 auto; /* 让正文介绍居中 */
  color: #35415a; /* 设置正文介绍颜色 */
  font-size: 18px; /* 设置正文介绍大小 */
  line-height: 1.7; /* 设置正文介绍行高 */
}

.project-images {
  display: grid; /* 让作品页图片纵向排列 */
  gap: 28px; /* 设置每张作品图之间的距离 */
  width: 100%; /* 让作品图片区域占满可用宽度 */
  margin: 48px auto 0; /* 拉开正文标题和作品图 */
}

.project-images img {
  display: block; /* 去掉图片底部默认空隙 */
  width: 100%; /* 让作品图适应页面宽度 */
  height: auto; /* 保持图片原始比例 */
  background: #ffffff; /* 图片加载前有白色底 */
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.12); /* 给作品图一点纸张浮起感 */
}

.collection-button {
  position: absolute; /* 让左右按钮贴着 collection 两侧 */
  z-index: 5; /* 让左右按钮压在项目封面上面 */
  top: calc((100vh - 160px) / 2); /* 让按钮垂直对齐封面区域中间 */
  width: 44px; /* 设置按钮宽度 */
  height: 44px; /* 设置按钮高度 */
  color: #111111; /* 设置按钮颜色 */
  font-family: inherit; /* 让按钮继承网页字体 */
  font-size: 42px; /* 设置箭头大小 */
  font-style: italic; /* 模仿你同学页面的箭头风格 */
  line-height: 1; /* 控制箭头行高 */
  transform: translateY(-50%); /* 修正垂直居中 */
}

.collection-button--prev {
  left: -64px; /* 把上一项按钮放到左侧 */
}

.collection-button--next {
  right: -64px; /* 把下一项按钮放到右侧 */
}

/* Reveal on scroll */
.reveal-section {
  opacity: 0; /* 初始隐藏滚动出现区块 */
  transform: translateY(44px); /* 初始让区块稍微向下 */
  transition:
    opacity 900ms ease,
    transform 900ms ease; /* 控制浮现动画 */
}

.reveal-section.is-visible {
  opacity: 1; /* 滚动到视口后显示 */
  transform: translateY(0); /* 滚动到视口后回到原位 */
}

/* Animations */
@keyframes welcome-to-corner {
  from {
    top: 50%; /* 动画开始时 WELCOME 在屏幕垂直中间 */
    left: 50%; /* 动画开始时 WELCOME 在屏幕水平中间 */
    font-size: clamp(56px, 12vw, 180px); /* 动画开始时 WELCOME 是大字 */
    transform: translate(-50%, -50%); /* 动画开始时让 WELCOME 真正居中 */
  }

  to {
    top: 16px; /* 动画结束时 WELCOME 更靠近顶部 */
    left: 20px; /* 动画结束时 WELCOME 更靠近左边 */
    font-size: 22px; /* 动画结束时 WELCOME 缩小成索引行大小 */
    transform: translate(0, 0); /* 动画结束时取消居中偏移 */
  }
}

@keyframes intro-lift {
  from {
    transform: translateY(0); /* 动画开始时黑色幕布覆盖屏幕 */
  }

  to {
    transform: translateY(-100%); /* 动画结束时黑色幕布向上移出屏幕 */
  }
}

@keyframes index-arrive {
  from {
    opacity: 0; /* 动画开始时不可见 */
  }

  to {
    opacity: 1; /* 动画结束时可见 */
  }
}

@keyframes letter-wave {
  from {
    opacity: 0; /* 动画开始时字母不可见 */
  }

  70% {
    opacity: 1; /* 动画中段字母已经可见 */
    transform: translateY(-4px) rotate(0deg) scale(1.12); /* 字母稍微越过正常位置，形成弹性 */
  }

  to {
    opacity: 1; /* 动画结束时字母保持可见 */
    transform: translateY(0) rotate(0deg) scale(1); /* 字母回到正常位置 */
  }
}

@keyframes draw-hello {
  0% {
    opacity: 0; /* 动画开始瞬间隐藏，避免圆形线帽露点 */
    stroke-dashoffset: 1.08; /* 动画开始时路径不可见 */
  }

  3% {
    opacity: 1; /* 路径开始移动后再显示线条 */
    stroke-dashoffset: 1.06; /* 先推进一点点，避免只露出端点 */
  }

  100% {
    opacity: 1; /* 动画结束后保持可见 */
    stroke-dashoffset: 0; /* 动画结束时路径完整显示 */
  }
}

@keyframes scroll-line {
  0%,
  100% {
    transform: scaleY(0.65); /* 动画开始和结束时线条稍短 */
    transform-origin: top; /* 让线条从顶部开始缩放 */
  }

  50% {
    transform: scaleY(1); /* 动画中间线条恢复完整高度 */
  }
}

/* Responsive */
@media (max-width: 700px) {
  .index-bar {
    align-items: flex-start; /* 小屏幕下让索引内容靠上对齐 */
    flex-direction: column; /* 小屏幕下让标题和导航上下排列 */
  }

  .index-nav {
    justify-content: flex-start; /* 小屏幕下让导航靠左 */
  }

  .identity-card {
    padding: 100px 24px; /* 小屏幕下减少卡片左右边距 */
  }

  .contact-bar {
    align-items: flex-start; /* 小屏幕下联系栏内容靠上对齐 */
    flex-direction: column; /* 小屏幕下联系栏变成上下排列 */
  }

  .contact-items {
    justify-content: flex-start; /* 小屏幕下联系方式靠左 */
  }

  .page-view {
    padding-top: 150px; /* 小屏幕导航变高，所以页面内容往下移 */
  }

  .coverflow {
    height: 260px; /* 小屏幕下转盘区域稍微矮一点 */
  }

  .coverflow-card {
    width: 150px; /* 小屏幕下缩小转盘封面 */
  }

  .cover-entry__button {
    width: min(100%, 360px); /* 小屏幕下缩小项目封面 */
  }

  .collection-button--prev {
    left: -8px; /* 小屏幕下把上一项按钮收回屏幕内 */
  }

  .collection-button--next {
    right: -8px; /* 小屏幕下把下一项按钮收回屏幕内 */
  }
}