/* ============================================================
   HERO · 照片底 + 32 本照片书斜排 / 指针掀起波浪
   ============================================================ */

@font-face{
  font-family:'Libre Caslon Display';
  src:url('assets/fonts/caslon.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}
@font-face{
  font-family:'Inter Local';
  src:url('assets/fonts/inter.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122;
}

:root{
  --caslon: 'Libre Caslon Display', 'Playfair Display', 'Times New Roman', serif;
  --ui: 'Inter Local', 'Inter', 'Space Mono', system-ui, -apple-system, 'PingFang SC', sans-serif;
  --paper: #fffdf5;
  --ink: #1a1410;
}

/* ---------------- 首屏 ---------------- */
.fh{
  position:relative;
  height:100svh; min-height:560px;
  background:#100b09;
  color:#fff;
  overflow:hidden;
  cursor:default;
  isolation:isolate;
}

/* 照片底：整张完整显示（contain），四周用同图的虚化副本补满 */
.fh-bg{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  background:#100b09;
}
.fh-bg-fill{
  position:absolute; inset:-8%;
  width:116%; height:116%;
  object-fit:cover;
  display:block;
  filter:blur(46px) saturate(.85) brightness(.42);
  transform:scale(1.06);
}
.fh-bg-main{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  object-position:50% 50%;
  display:block;
  filter:saturate(.95) contrast(1.02);
  animation:fhBgIn 2000ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fhBgIn{
  from{ opacity:0; transform:scale(1.05); filter:blur(10px) saturate(.6) brightness(.7); }
  to{ opacity:1; transform:scale(1); filter:blur(0) saturate(.95) contrast(1.02); }
}
.fh-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      rgba(14,9,7,.82) 0%,
      rgba(14,9,7,.46) 18%,
      rgba(14,9,7,.16) 40%,
      rgba(14,9,7,.14) 58%,
      rgba(14,9,7,.34) 78%,
      rgba(14,9,7,.62) 100%),
    radial-gradient(135% 95% at 50% 40%,
      rgba(14,9,7,0) 26%,
      rgba(14,9,7,.22) 70%,
      rgba(14,9,7,.52) 100%);
}

/* 底部渐隐成相册的纸色，和下一屏无缝接上 */
.fh-tail{
  position:absolute; z-index:4; left:0; right:0; bottom:0;
  height:20vh; min-height:120px;
  pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(255,253,245,0) 0%,
    rgba(255,253,245,.52) 42%,
    rgba(255,253,245,.94) 78%,
    var(--paper) 100%);
}

/* 导航 */
.fh-nav{
  position:absolute; z-index:6;
  left:6vw; right:6vw; top:4.2vh;
  display:flex; align-items:center;
  font-family:var(--ui); font-size:max(11px,.78vw); font-weight:500;
  color:#fff;
  opacity:0; transform:translateY(-1.2vh);
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.fh-nav.ready{ animation:fhNavIn 900ms cubic-bezier(.2,.8,.2,1) 600ms forwards; }
@keyframes fhNavIn{ to{ opacity:1; transform:translateY(0); } }

.fh-logo{ display:flex; align-items:center; gap:clamp(7px,.62vw,12px); color:inherit; }
.fh-mark{
  position:relative; flex:0 0 auto;
  width:clamp(20px,2.1vw,30px); height:clamp(23px,2.4vw,34px);
  border-radius:clamp(6px,.55vw,9px); background:#e8dcc8;
  box-shadow:0 2px 16px rgba(0,0,0,.35);
}
.fh-mark i{
  position:absolute; left:32%; top:18%; width:24%; height:64%;
  background:#16120d; border-radius:.08vw;
}
.fh-word{ display:flex; flex-direction:column; line-height:1; text-align:left; }
.fh-word b{
  font-family:var(--caslon); font-weight:400;
  font-size:clamp(15px,1.55vw,23px); letter-spacing:.005em;
}
.fh-word small{
  font-family:var(--ui); font-weight:400; font-size:clamp(8px,.6vw,10px);
  opacity:.72; letter-spacing:.02em; margin-top:.32em;
}

.fh-links{
  display:flex; align-items:center; gap:2.2vw;
  margin-left:auto; margin-right:auto;
  position:absolute; left:50%; transform:translateX(-50%);
}
.fh-links > *{ opacity:.86; transition:opacity .25s ease; }
.fh-links > *:hover{ opacity:1; }
.fh-links span{ display:inline-flex; align-items:center; gap:.34vw; cursor:pointer; }
.fh-links svg{ width:.62vw; height:.62vw; min-width:7px; min-height:7px; opacity:.72; }

.fh-right{ display:flex; align-items:center; gap:1.6vw; margin-left:auto; }
.fh-right a{ opacity:.86; transition:opacity .25s ease; }
.fh-right a:hover{ opacity:1; }
.fh-pill{
  display:inline-block; background:#fff; color:#000;
  border-radius:.4vw; padding:.55vw 1vw; line-height:1;
  text-shadow:none;
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.fh-pill:hover{ transform:translateY(-1px); }

/* 小字标：靠左，避开照片主体 */
.fh-title{
  position:absolute; z-index:1;
  left:6vw; right:auto; top:22vh;
  margin:0; text-align:left;
  --fs:clamp(38px, min(9.6vh, 6.4vw), 104px);
  font:400 var(--fs)/1 'Libre Caslon Display', 'Playfair Display', 'Noto Serif SC', 'Songti SC', 'STSong', serif;
  letter-spacing:-.015em;
  color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.3);
  opacity:0;
  will-change:opacity, transform, filter;
  pointer-events:none;
  user-select:none;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 章节索引：落在底部纸色带上 */
.fh-row{
  position:absolute; z-index:5;
  left:6vw; right:6vw; bottom:3.4vh;
  display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap;
  gap:0 1.5vw;
  font-family:var(--ui); font-weight:500; font-size:max(10px,.72vw);
  letter-spacing:.04em;
  color:rgba(26,20,16,.55);
  opacity:0; transform:translateY(1.2vh);
}
.fh-row a{ white-space:nowrap; transition:color .25s ease; }
.fh-row a:hover{ color:var(--ink); }
.fh-row.ready{ animation:fhRowIn 900ms cubic-bezier(.2,.8,.2,1) 820ms forwards; }
@keyframes fhRowIn{ to{ opacity:1; transform:translateY(0); } }

/* 三维画布 */
#fhCanvas{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; display:block;
  pointer-events:none;
}
.fh.no3d #fhCanvas{ display:none; }

/* 向下提示 */
.fh-scroll{
  position:absolute; z-index:5; right:6vw; bottom:3.2vh;
  display:flex; align-items:center; gap:.55vw;
  font-family:var(--ui); font-size:max(9px,.62vw); letter-spacing:.26em;
  color:rgba(26,20,16,.42);
  opacity:0; transition:opacity .6s ease;
  cursor:pointer;
}
.fh-scroll.ready{ opacity:1; }
.fh-scroll span{
  display:block; width:1px; height:15px;
  background:rgba(26,20,16,.35);
  animation:fhDrop 2.4s ease-in-out infinite;
}
@keyframes fhDrop{ 0%,100%{ opacity:.25; transform:scaleY(.6); } 50%{ opacity:.9; transform:scaleY(1); } }

/* ---------------- 平板 / 窄横屏 ---------------- */
@media (max-width:1100px){
  .fh-nav{ left:5vw; right:5vw; }
  .fh-title{ left:5.5vw; top:20vh; }
  .fh-row{ left:5vw; right:5vw; gap:0 2vw; }
  .fh-scroll{ right:5vw; }
  .fh-links{ display:none; }
}

/* ---------------- 竖屏 ---------------- */
@media (max-aspect-ratio:1/1){
  /* 竖屏照片按宽度完整显示，上下用同一张的虚化副本接出去，避免留出生硬的黑带 */
  /* 竖屏：照片按整宽完整放在画面中间，上下由同一张的虚化副本接出去 */
  .fh-bg-main{
    top:50%; left:0; bottom:auto; right:auto;
    width:100%; height:auto;
    translate:0 -50%;   /* 用独立的 translate，避免被入场动画的 transform 覆盖 */
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  }
  .fh-bg-fill{ filter:blur(38px) saturate(1.05) brightness(.62); inset:-12%; width:124%; height:124%; }
  .fh-veil{
    background:
      linear-gradient(180deg,
        rgba(14,9,7,.78) 0%,
        rgba(14,9,7,.48) 14%,
        rgba(14,9,7,.26) 34%,
        rgba(14,9,7,.34) 56%,
        rgba(14,9,7,.62) 78%,
        rgba(14,9,7,.86) 100%),
      radial-gradient(115% 75% at 50% 32%,
        rgba(14,9,7,0) 20%,
        rgba(14,9,7,.26) 64%,
        rgba(14,9,7,.62) 100%);
  }
  .fh-tail{ height:15vh; min-height:110px; }
  .fh-nav{ left:6vw; right:6vw; top:3.2vh; }
  .fh-right{ margin-left:auto; }

  .fh-title{
    left:6.5vw; top:15vh;
    --fs:clamp(34px, min(7.4vh, 12vw), 76px);
  }

  .fh-row{
    left:7vw; right:7vw; bottom:4.6vh;
    display:flex; align-items:center; justify-content:center;
    flex-wrap:nowrap; gap:.85em;
    font-size:clamp(10.5px,.78rem,12.5px); line-height:1.6;
    letter-spacing:.04em;
    color:rgba(255,248,242,.66);
    white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.6);
  }
  .fh-row > *:not(:last-child)::after{ content:'·'; margin-left:.85em; opacity:.45; }
  .fh-row a:hover{ color:#fff; }
  .fh-scroll{ display:none; }
}

/* ---------------- 手机 ---------------- */
@media (max-width:760px){
  .fh{ min-height:600px; }
  .fh-nav{ left:6vw; right:6vw; top:2.4vh; }
  .fh-right a{ display:none; }
  .fh-pill{ font-size:max(11px,.78rem); padding:.6rem 1rem; border-radius:.45rem; }
  .fh-mark{ width:26px; height:30px; border-radius:7px; }
  .fh-word b{ font-size:19px; }
  .fh-word small{ font-size:9px; }

  .fh-title{ left:7vw; top:13.5vh; --fs:clamp(32px, 11.4vw, 62px); }
  .fh-tail{ height:16vh; }

  .fh-row{
    left:7vw; right:7vw; bottom:5.2vh;
    gap:.7em; font-size:11.5px;
  }
  .fh-row > *:not(:last-child)::after{ margin-left:.7em; }
}