/* ===========================================================
   VERTEBRA — scroll-driven ink spine
   纸白底 + 墨灰骨，一个 canvas + 几层 CSS，无图片资源
   =========================================================== */

:root{
  --bg: #f7f5ee;
  --paper: #faf8f2;
  --fg: #131313;
  --muted: rgba(19, 19, 19, .46);
  --hair: rgba(0, 0, 0, .15);
  --accent: #7a7466;
  --progress: 0;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --font-shou: "ShouJin", "FZShouJinTi", "方正瘦金体", "瘦金体",
               "FangSong", "STFangsong", "仿宋", "KaiTi", "STKaiti", "楷体", serif;
}

*{ box-sizing: border-box; }

html{
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.22) transparent;
}

body{
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------- 舞台 ---------- */
#stage{
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  background: transparent;
}
body.ready #stage{ opacity: 1; }

/* 画布本身是透明的，纸纹透过它显出来 */
#gl{
  display: block;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, #000 7%, #000 93%, rgba(0,0,0,0) 100%);
}

/* 纸的吸墨感：极淡的灰调在中心聚一点 */
.glow{
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background:
    radial-gradient(46% 40% at 50% 44%, rgba(96, 88, 68, .10), transparent 74%),
    radial-gradient(60% 55% at 50% 96%, rgba(96, 88, 68, .06), transparent 76%);
  mix-blend-mode: multiply;
}

/* 纸色薄雾：滚到入径时把脊椎压进纸里，而不是硬切一页 */
.veil{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--bg);
  opacity: 0;
  will-change: opacity;
}

/* 纸纤维颗粒 */
.grain{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
}
body.lowfx .grain{ display: none; }

.vignette{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(78% 70% at 50% 46%, transparent 44%, rgba(28, 24, 16, .07) 100%);
}

/* ---------- 首屏标题（矢量字形） ---------- */
.hero{
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0 clamp(20px, 6vw, 84px) clamp(70px, 13vh, 118px);
  margin: 0;
  pointer-events: none;
  will-change: opacity;
}
.hero-inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2px, .7vw, 9px);
  margin: 0;
  transform-origin: left bottom;
  will-change: transform;
}
.title-cn{
  display: block;
  width: clamp(190px, 25vw, 380px);
  height: auto;
  mix-blend-mode: multiply;
}
.title-en{
  display: block;
  width: clamp(166px, 21vw, 322px);
  height: auto;
  margin-left: 4%;
  mix-blend-mode: multiply;
}

/* ---------- 滚动提示 ---------- */
.scrollhint{
  position: fixed;
  right: clamp(20px, 4vw, 46px);
  bottom: 26px;
  left: auto;
  z-index: 4;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  transition: opacity .5s var(--ease);
  mix-blend-mode: multiply;
}
.scrollhint i{
  display: block;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, var(--hair), transparent);
  position: relative;
  overflow: hidden;
}
.scrollhint i::after{
  content: "";
  position: absolute;
  inset: -50% 0 auto 0;
  height: 50%;
  background: linear-gradient(to bottom, transparent, #16150f);
  animation: drop 1.9s var(--ease) infinite;
}
@keyframes drop{
  0%   { transform: translateY(0); opacity: 0; }
  25%  { opacity: .85; }
  100% { transform: translateY(320%); opacity: 0; }
}

/* ---------- 进度条 ---------- */
.rail{
  position: fixed;
  right: clamp(14px, 3vw, 28px);
  top: 50%;
  z-index: 4;
  width: 1px;
  height: 116px;
  margin-top: -58px;
  background: var(--hair);
  pointer-events: none;
}
.rail b{
  position: absolute;
  left: -0.5px;
  top: 0;
  width: 2px;
  height: calc(var(--progress) * 100%);
  background: linear-gradient(to bottom, #111, rgba(17,17,17,.28));
  transition: height .08s linear;
}

/* ---------- 滚动容器 ---------- */
.scroll-space{
  position: relative;
  z-index: 1;
}
.spine-run{
  height: 220vh;      /* 脊椎滚完这一段，正好接上入径 */
  pointer-events: none;
}

/* ---------- 入径 ---------- */
.entry{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 4vw 12vh;
  background: transparent;   /* 让脊椎留在纸面后面，两页连成一体 */
}

.entry-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 5vh, 54px);
  opacity: var(--reveal, 0);
  transform: translateY(calc((1 - var(--reveal, 0)) * 34px));
  will-change: opacity, transform;
}

.entry-label{
  margin: 0;
  font-size: 13px;
  letter-spacing: .62em;
  text-indent: .62em;
  color: rgba(19, 19, 19, .58);
  text-shadow: 0 0 14px rgba(247,245,238,.95), 0 0 5px rgba(247,245,238,.9);
}
.entries{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 7vw, 110px);
  flex-wrap: wrap;
}
.enso{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(190px, 23vw, 280px);
  height: clamp(190px, 23vw, 280px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
  isolation: isolate;
  transition: transform .55s cubic-bezier(.2,.8,.25,1);
}
.enso::before{
  content: "";
  position: absolute;
  inset: 12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,26,23,.10) 0%, rgba(27,26,23,.04) 55%, transparent 72%);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .5s, transform .5s;
}
.enso:hover{ transform: translateY(-7px); }
.enso:hover::before{ opacity: 1; transform: scale(1); }
.enso:focus-visible{ outline: 1px dashed rgba(27,26,23,.5); outline-offset: 10px; }

.enso-ring{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform .7s cubic-bezier(.2,.8,.25,1);
}
.enso-ring path{ transition: stroke .5s; }
.enso:hover .enso-ring{ transform: rotate(9deg) scale(1.045); }
.enso:hover .enso-ring path{ stroke: rgba(27,26,23,.95); }

.enso-word{
  position: relative;
  font-family: var(--font-shou);
  font-size: clamp(34px, 4.1vw, 54px);
  letter-spacing: .1em;
  text-indent: .1em;
  line-height: 1.2;
}
.enso-word--small{ font-size: clamp(27px, 3.3vw, 44px); }
.enso-sub{
  position: relative;
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--muted);
  opacity: .8;
}
.entry-foot{
  margin: 0;
  font-size: 12px;
  letter-spacing: .45em;
  text-indent: .45em;
  color: rgba(19, 19, 19, .54);
  text-shadow: 0 0 14px rgba(247,245,238,.95), 0 0 5px rgba(247,245,238,.9);
}

/* ---------- 作品浮层 ---------- */
.feat{
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--bg);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.feat[hidden]{ display: none; }
.feat.is-open{ opacity: 1; }
.feat iframe{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
}
.feat-close{
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 42px; height: 42px;
  padding: 0;
  border: 1px solid rgba(27,26,23,.22);
  border-radius: 50%;
  background: rgba(247,245,238,.9);
  color: var(--fg);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.feat-close:hover{ background: #fff; transform: rotate(90deg); }

body.locked{ overflow: hidden; }
body.on-entry .rail{ opacity: 0; }
.rail{ transition: opacity .4s var(--ease); }

/* ---------- 降级 ---------- */
#fallback{
  position: fixed;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: center;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .08em;
  background:
    radial-gradient(60% 50% at 50% 45%, rgba(96, 88, 68, .10), transparent 70%),
    var(--bg);
}
body.no-webgl #fallback{ display: grid; }
body.no-webgl #stage{ display: none; }

.nojs{
  position: fixed;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  letter-spacing: .1em;
}

/* ---------- 无障碍 / 低动效 ---------- */
@media (prefers-reduced-motion: reduce){
  .scrollhint i::after{ animation: none; }
  #stage{ transition: none; }
}

/* 小屏收一收留白 */
@media (max-width: 640px){
  /* 窄屏：让柱子底部更早融进纸里，给底部文字腾出干净区域 */
  #gl{
    -webkit-mask-image: linear-gradient(to bottom,
        rgba(0,0,0,0) 0%, #000 8%, #000 66%, rgba(0,0,0,0) 94%);
    mask-image: linear-gradient(to bottom,
        rgba(0,0,0,0) 0%, #000 8%, #000 66%, rgba(0,0,0,0) 94%);
  }
  /* 文字再垫一层纸色柔光 */
  .hero-inner{ position: relative; }
  .hero-inner::before{
    content: "";
    position: absolute;
    left: -46px; right: -46px; top: -34px; bottom: -34px;
    background: radial-gradient(closest-side at 46% 56%,
                rgba(247, 245, 238, .97), rgba(247, 245, 238, 0) 78%);
    z-index: -1;
    pointer-events: none;
  }
  .enso{ width: clamp(158px, 44vw, 220px); height: clamp(158px, 44vw, 220px); }
  .entry{ gap: clamp(18px, 3vh, 34px); padding: 12vh 5vw 14vh; }
  .title-cn{ width: clamp(148px, 34vw, 240px); }
  .title-en{ width: clamp(130px, 30vw, 210px); }
  .rail{ height: 88px; margin-top: -44px; }
  .scrollhint{ bottom: 20px; }
}