/* 自述一屏（2026-10-10，参考 jayuestudio 的 About 屏）：大幅黑白肖像 + 第一人称的三段话。
   不动「关于」区的档案卡——10-10 试过让大肖像接管头像卡，本人看后定：档案卡更合自己的风格，自述另外加。
   放在品牌墙之后、预约之前：先见人，再谈联系。肖像是本人自己生成的回头侧脸照，转黑白并把背景墙往左延展成横幅（voice/portrait-back.jpg）：人在画面右侧，左边是慢慢暗下去的背景墙。 */

.section--voice { padding: 0; overflow: hidden; }
/* 肖像是铺满整屏的一层，文字浮在它上面。人物中心在照片宽度 69% 处，object-position 也取 69%，
   所以不管窗口多宽，人都落在屏幕约七成的位置，不会贴到右边缘（10-10 本人指出「人的位置太靠右了」）。
   10-10 第一版肖像只占右边一栏、左缘在栏内很快收掉，文字和肖像之间留下一条纯黑的空带，本人指出「过渡不够好」；
   改成横幅照片 + 很长的缓变遮罩：背景墙的灰从人物身边一路慢慢暗进页面底色，中间不再有断层。 */
.voice {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(92vh, 900px);
}
.voice__body {
  position: relative;
  z-index: 1;
  max-width: min(660px, 46vw);   /* 窄一点的窗口里文字栏跟着收，别压到脸 */
  padding: 110px 0 110px 60px;
}
.voice__body .section__kicker { margin-bottom: 36px; }
.voice__p {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.95;
  color: var(--text-dim);
}
.voice__p--first {
  margin-bottom: 34px;
  font-family: 'Baskerville', 'Songti SC', 'STSongti-SC', 'DW Serif SC', 'Noto Serif SC', Georgia, serif;
  font-size: clamp(28px, 2.9vw, 44px);
  font-weight: 600;
  line-height: 1.34;
  color: var(--text);
  text-wrap: balance;
}
.voice__p mark {
  background: none;
  color: var(--text);
  border-bottom: 1px solid var(--accent-line);
}
/* 正文扫光（2026-10-10，参考 jayuestudio About 屏的 shiny-text）：一道 120° 的白色光带从左到右扫过两段正文，
   3 秒扫完、停 0.6 秒再来（和参考站实测的节奏一致）。做法是把文字颜色换成一条两倍宽的渐变并裁到文字上，动的是渐变的位置。
   只扫正文，不扫第一句大字（它本身就是最亮的白）；带下划线的重点句保持纯白，不参与。进视口（is-in）后才开始。 */
.voice__p:not(.voice__p--first) {
  background-image: linear-gradient(120deg, var(--text-dim) 0%, var(--text-dim) 35%, #fff 50%, var(--text-dim) 65%, var(--text-dim) 100%);
  background-size: 200% auto;
  background-position: 150% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.voice__p:not(.voice__p--first) mark { -webkit-text-fill-color: var(--text); }
.section--voice.is-in .voice__p:not(.voice__p--first) { animation: voiceShine 3.6s linear infinite; }
@keyframes voiceShine {
  0% { background-position: 150% center; }
  83.4%, 100% { background-position: -50% center; }
}
.voice__sign {
  margin-top: 34px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm, 11px);
  letter-spacing: 0.18em;
  color: var(--text-faint);
}
.voice__sign i { font-style: normal; color: var(--accent); margin: 0 4px; }

.voice__portrait {
  position: absolute;
  inset: 5% 0 0 0;             /* 往下让 5%：头发顶部不要落进顶部渐隐区 */
  margin: 0;
}
.voice__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 69% 30%;
  filter: grayscale(1) contrast(1.04);          /* 文件本身已是黑白，这里只是保险 */
  /* 左边用多段缓变慢慢收进底色；右缘、上下各收一小段，和屏幕边缘、上下区块接上 */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.08) 10%, rgba(0, 0, 0, 0.3) 22%, rgba(0, 0, 0, 0.65) 34%, #000 46%),
    linear-gradient(to left, transparent 0%, #000 7%),
    linear-gradient(to top, transparent 0%, #000 22%),
    linear-gradient(to bottom, transparent 0%, #000 9%);
  -webkit-mask-composite: source-in, source-in, source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.08) 10%, rgba(0, 0, 0, 0.3) 22%, rgba(0, 0, 0, 0.65) 34%, #000 46%),
    linear-gradient(to left, transparent 0%, #000 7%),
    linear-gradient(to top, transparent 0%, #000 22%),
    linear-gradient(to bottom, transparent 0%, #000 9%);
  mask-composite: intersect, intersect, intersect;
}
/* 入场：growth.js 给区块加 is-in；文字逐段浮上来，肖像由虚到实 */
.section--voice .voice__body > * { opacity: 0; translate: 0 16px; transition: opacity 0.8s ease, translate 0.8s var(--ease-inout); }
.section--voice.is-in .voice__body > * { opacity: 1; translate: 0 0; }
.section--voice.is-in .voice__body > :nth-child(2) { transition-delay: 0.1s; }
.section--voice.is-in .voice__body > :nth-child(3) { transition-delay: 0.22s; }
.section--voice.is-in .voice__body > :nth-child(4) { transition-delay: 0.32s; }
.section--voice.is-in .voice__body > :nth-child(5) { transition-delay: 0.42s; }
.section--voice .voice__portrait { opacity: 0; scale: 1.03; transition: opacity 1.2s ease 0.1s, scale 1.6s var(--ease) 0.1s; }
.section--voice.is-in .voice__portrait { opacity: 1; scale: 1; }

@media (max-width: 1100px) {
  .voice { flex-direction: column; align-items: stretch; min-height: 0; }
  .voice__portrait { order: -1; position: relative; inset: auto; width: auto; height: 62vh; }
  .voice__img {
    object-position: 69% 30%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%), linear-gradient(to bottom, transparent 0%, #000 14%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to top, transparent 0%, #000 30%), linear-gradient(to bottom, transparent 0%, #000 14%);
    mask-composite: intersect;
  }
  .voice__body { max-width: none; padding: 8px 60px 88px; }
}
@media (max-width: 720px) {
  .voice__portrait { height: 56vh; }
  .voice__img { object-position: 77% 30%; }   /* 竖屏窄，人物挪到正中 */
  .voice__body { padding: 0 16px 64px; }
  .voice__p { font-size: 15px; }
  .voice__p--first { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .section--voice .voice__body > *, .section--voice .voice__portrait { opacity: 1; translate: 0 0; scale: 1; transition: none; }
  .section--voice.is-in .voice__p:not(.voice__p--first) { animation: none; }
}