/* ============================================================
   3D 精选陈列（书城首页顶部）
   ------------------------------------------------------------
   参考 PS5 / Xbox 的选游戏界面：一排卡片沿弧线排开，
   中间那张正向面对你、最大最亮，两侧的向后倾斜并变暗。
   左右方向键 / 点击两侧卡片 / 按钮都能切换焦点。

   实现要点：
     · 视口给 perspective，reel 用 preserve-3d
     · 每张卡的 transform 由 JS 按「与焦点的距离」算出来
     · 位移写在 reel 的坐标系里，透视会自然缩放，和真实 3D 一致
   ============================================================ */

.cfs{
  position:relative; margin-bottom:26px; overflow:hidden;
  background:var(--bs-card); border:1px solid var(--bs-line);
  border-radius:18px; box-shadow:var(--bs-sd);
}

/* 分类色的氛围底 —— 跟着当前书变色 */
.cfs-bg{
  position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:background .7s ease, opacity .7s ease;
}
.cfs-bg.on{opacity:1;}

/* ---------- 头部 ---------- */
.cfs-head{
  position:relative; z-index:3;
  display:flex; align-items:center; gap:12px;
  padding:15px 22px 0; flex-wrap:wrap;
}
.cfs-head .t{font-size:13px; font-weight:700; letter-spacing:.01em;}
.cfs-head .t small{font-weight:400; color:var(--bs-muted); margin-left:7px; font-size:12px;}
.cfs-stats{
  margin-left:auto; display:flex; align-items:center; gap:16px;
  font-size:12px; color:var(--bs-muted);
}
.cfs-stats b{color:var(--bs-ink); font-weight:600; font-variant-numeric:tabular-nums; font-size:13.5px;}
.cfs-stats .sep{color:#d9d6cf;}

/* ---------- 3D 视口 ---------- */
.cfs-view{
  position:relative; height:322px;
  perspective:1500px; perspective-origin:50% 44%;
}
.cfs-reel{
  position:absolute; left:50%; top:0; width:0; height:100%;
  transform-style:preserve-3d;
}
.cfs-item{
  position:absolute; top:24px; left:-86px; width:172px;
  transition:transform .58s cubic-bezier(.22,.68,.31,1),
             opacity .46s ease, filter .46s ease;
  will-change:transform, opacity;
  cursor:pointer;
}
.cfs-item .bs-cv{width:100%;}
.cfs-item.dim{filter:brightness(.74) saturate(.72);}
.cfs-item .cfs-hit{position:absolute; inset:0; border-radius:2px 8px 8px 2px;}

/* 焦点卡：底部一道分类色投影，把它「托」起来 */
.cfs-item .cfs-shadow{
  position:absolute; left:8%; right:8%; bottom:-16px; height:14px;
  border-radius:50%; opacity:0; transition:opacity .5s;
  background:radial-gradient(50% 50% at 50% 50%, rgba(27,31,36,.34), rgba(27,31,36,0));
  filter:blur(3px);
}
.cfs-item.on .cfs-shadow{opacity:1;}

/* ---------- 左右按钮 ---------- */
.cfs-nav{
  position:absolute; top:170px; z-index:6;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--bs-line); background:rgba(255,255,255,.95);
  color:var(--bs-ink2); cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 5px 16px -7px rgba(27,31,36,.3);
  transition:transform .16s, background .16s, color .16s, opacity .16s;
}
.cfs-nav:hover{background:#fff; color:var(--bs-ink); transform:scale(1.09);}
.cfs-nav[disabled]{opacity:.28; cursor:default; transform:none;}
.cfs-nav.prev{left:16px;}
.cfs-nav.next{right:16px;}

/* ---------- 焦点信息 ---------- */
.cfs-info{position:relative; z-index:3; padding:6px 26px 24px; text-align:center;}
.cfs-info h3{
  margin:0 0 5px; font-size:20px; font-weight:700;
  letter-spacing:-.012em; line-height:1.35;
}
.cfs-info .sub{font-size:13px; color:var(--bs-muted); margin-bottom:13px; min-height:19px;}
.cfs-facts{
  display:flex; justify-content:center; gap:22px; flex-wrap:wrap;
  font-size:12.5px; color:var(--bs-muted); margin-bottom:15px;
}
.cfs-facts b{color:var(--bs-ink); font-weight:600; font-variant-numeric:tabular-nums;}

.cfs-prog{max-width:330px; margin:0 auto 15px;}
.cfs-prog .r{display:flex; font-size:11.5px; color:var(--bs-muted); margin-bottom:6px;}
.cfs-prog .r b{margin-left:auto; color:var(--bs-amber); font-weight:600; font-variant-numeric:tabular-nums;}
.cfs-prog .bs-track{height:6px;}

.cfs-cta{display:flex; justify-content:center; gap:9px; flex-wrap:wrap;}

/* 指示点 */
.cfs-dots{display:flex; justify-content:center; gap:6px; margin-top:17px;}
.cfs-dots i{
  width:6px; height:6px; border-radius:50%; background:#d9d6cf;
  cursor:pointer; transition:width .24s, background .24s, border-radius .24s;
}
.cfs-dots i:hover{background:#b8b5ae;}
.cfs-dots i.on{width:20px; border-radius:3px; background:var(--bs-ink);}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .cfs-view{height:268px;}
  .cfs-item{width:138px; left:-69px; top:20px;}
  .cfs-nav{top:142px; width:34px; height:34px;}
  .cfs-info{padding:4px 16px 20px;}
  .cfs-info h3{font-size:17.5px;}
  .cfs-stats{gap:11px; font-size:11.5px;}
}
@media (max-width:560px){
  .cfs-nav{display:none;}
  .cfs-head{padding:13px 16px 0;}
}