/* ═══════════════════════════════════════════════════════════════
   NICERA PRESS · 黑金装帧展示组件（.tome）
   统帅 2026-08-22 指令：带阴影的 3D 书本展示框 + 动态微光特效。

   用法：
     <div class="tome">
       <div class="tome-stage">
         <div class="tome-body">
           <div class="tome-spine"></div>
           <div class="tome-face"><img src="封面.webp" alt=""></div>
           <div class="tome-sheen" aria-hidden="true"></div>
         </div>
         <div class="tome-shadow" aria-hidden="true"></div>
       </div>
     </div>

   尺寸只由外层宽度决定（书本身是 2:3），所以首屏大书和书架小书**同一套代码**。
   要改厚度/角度，改 --tome-thick / --tome-turn 两个变量即可。

   🔴 无图时不塌：.tome-face 空着会显示金线几何占位，版式先站住。
   ═══════════════════════════════════════════════════════════════ */

.tome{
  --tome-thick: 22px;      /* 书脊厚度 */
  --tome-turn: 17deg;      /* 转角：左侧朝向观者，露出书脊 */
  --tome-gold: #c6a15b;
  --tome-gold-dim: #8a7340;
  --tome-panel: #0b0b0b;
  width:100%;
}

/* 舞台：透视只加在这里，不污染子元素的普通布局 */
.tome-stage{
  position:relative;
  perspective: 1500px;
  perspective-origin: 60% 45%;
  padding-bottom: 34px;    /* 给落地阴影留地方 */
}

.tome-body{
  position:relative;
  aspect-ratio: 2 / 3;
  transform-style: preserve-3d;
  transform: rotateY(var(--tome-turn));
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  /* 书本自身的体积感：右下方向的投影 */
  filter: drop-shadow(18px 22px 30px rgba(0,0,0,.65));
}

/* 悬停时书转正一点 —— 像是被人拿起来看 */
.tome:hover .tome-body{ transform: rotateY(calc(var(--tome-turn) * .35)); }

/* ── 封面 ───────────────────────────────────────────── */
.tome-face{
  position:absolute; inset:0;
  background: var(--tome-panel);
  /* 🔴 物理边不是金的。金线是**印在封面上**的（见 cover-template）。
     两处都用金 = 双重金框，实测看起来像贴了两层贴纸。
     这里只留一道极暗的实体边，负责把书从黑背景里切出来。 */
  border:1px solid #191919;
  overflow:hidden;
  /* 靠书脊那一侧压一道暗影：纸张往内卷的地方，真书都有 */
  box-shadow: inset 14px 0 22px -14px rgba(0,0,0,.9);
  backface-visibility:hidden;
}
.tome-face img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 空封面占位：金线几何 + 负空间，读起来是「刻意的构成」不是「没做完」 */
.tome-face:empty::before{
  content:""; position:absolute; inset:20%;
  border:1px solid var(--tome-gold-dim);
  clip-path: polygon(0 0,100% 0,100% 42%,42% 42%,42% 100%,0 100%);
}
.tome-face:empty::after{
  content: attr(data-placeholder);
  position:absolute; left:0; right:0; bottom:18px; text-align:center;
  font-size:10px; letter-spacing:.26em; color:#4a473f;
}

/* ── 书脊：以封面左边为轴向后折 90° ──────────────────────
   ⚠️ 转角符号是实测定的，不是推的：body 用 rotateY(正值) 时左边缘朝向观者，
      书脊必须往**后**折才看得见，所以是 +90deg。上一版写成 -90deg，
      书脊折到了封面背后 —— 页面上完全看不到，书看起来像一块浮着的板。 */
.tome-spine{
  position:absolute; top:0; left:0; height:100%;
  width: var(--tome-thick);
  transform-origin: left center;
  /* rotateY(+90deg)：x=thick 处的点映射到 z=-thick，即整条往屏幕里折 —— 正是要的。
     ⚠️ 上一版还多写了 translateX，把书脊又推出去一截，等于没折。别加。 */
  transform: rotateY(90deg);
  /* 🔴 别用纯黑。书脊贴着黑背景，太暗就是黑吃黑，3D 白做。
     这里做成「侧光打在书脊上」：靠封面那侧亮，往里逐渐没入。 */
  background:
    linear-gradient(90deg,
      #2a2620 0%, #423a2c 14%, #171512 46%, #0d0c0a 78%, #070706 100%);
  border-top:1px solid rgba(198,161,91,.3);
  border-bottom:1px solid rgba(198,161,91,.3);
}
/* 书脊上那道竖向烫金线 */
.tome-spine::after{
  content:""; position:absolute; top:8%; bottom:8%; left:50%;
  width:1px; transform:translateX(-50%);
  background:linear-gradient(180deg, transparent, var(--tome-gold-dim) 18%, var(--tome-gold-dim) 82%, transparent);
  opacity:.5;
}

/* ── 动态微光：一道斜向金箔反光缓慢扫过封面 ───────────────
   mix-blend-mode: screen 让它只提亮、不糊住图。 */
.tome-sheen{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode: screen;
  opacity:.55;
}
.tome-sheen::before{
  content:"";
  position:absolute; top:-60%; bottom:-60%; left:-160%;
  width:55%;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,236,190,.06) 35%,
    rgba(255,226,160,.30) 50%,
    rgba(255,236,190,.06) 65%,
    rgba(255,255,255,0) 100%);
  transform: rotate(8deg);
  animation: tome-sheen 6.5s cubic-bezier(.45,0,.35,1) infinite;
}
@keyframes tome-sheen{
  0%   { left:-160%; }
  55%  { left:150%;  }
  100% { left:150%;  }   /* 后段静止 = 扫过一次后歇一会儿，不做成霓虹灯 */
}

/* ── 落地阴影：椭圆 + 模糊，跟着书的转角偏向右下 ────────── */
.tome-shadow{
  position:absolute; left:6%; right:2%; bottom:6px; height:26px;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(0,0,0,.72) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,0) 72%);
  filter: blur(7px);
  transform: scaleY(.9);
  pointer-events:none;
}

/* ── 小尺寸（书架）：薄一点、转角小一点，否则一排书会打架 ── */
.tome.is-sm{ --tome-thick:12px; --tome-turn:11deg; }
.tome.is-sm .tome-stage{ padding-bottom:20px; perspective:900px; }
.tome.is-sm .tome-body{ filter: drop-shadow(9px 12px 16px rgba(0,0,0,.6)); }
.tome.is-sm .tome-shadow{ height:16px; bottom:4px; }
.tome.is-sm .tome-sheen{ opacity:.4 }

/* ── 无障碍：系统开了「减少动态效果」就把微光和转动关掉 ──
   不是可选项 —— 前庭功能敏感的人会因为持续动画头晕。 */
@media (prefers-reduced-motion: reduce){
  .tome-sheen::before{ animation:none; opacity:0; }
  .tome-body, .tome:hover .tome-body{ transition:none; }
}