/* 03 / 纯艺作品 —— 液化长卷。沿用站内 --bg-art / --text-art / --accent-art / --font-art */

/* ---------- 横卷 ---------- */
.fa-scroll{position:relative;margin:0 0 5rem}
.fa-rail{
  display:flex;align-items:center;gap:0;
  height:62vh;min-height:340px;
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;          /* 不把横滚外溢成纵滚 */
  padding:0;
  cursor:grab;
  scrollbar-width:none;
}
.fa-rail::-webkit-scrollbar{display:none}
.fa-rail.dragging{cursor:grabbing}
.fa-rail:focus-visible{outline:1px solid var(--accent-art);outline-offset:6px}

.fa-plate{
  flex:0 0 auto;position:relative;
  height:100%;margin:0;
}
.fa-plate img{
  display:block;height:100%;width:auto;
  -webkit-user-drag:none;user-select:none;pointer-events:none;
}


/* 控件 */
.fa-ctl{display:flex;align-items:center;gap:1.2rem;margin-top:1.4rem}
.fa-prog{flex:1;height:1px;background:#ddd8cd;position:relative;overflow:hidden}
.fa-prog i{
  position:absolute;left:0;top:0;bottom:0;background:var(--accent-art);
  width:0;transition:width .2s cubic-bezier(0.22,1,0.36,1);
}
.fa-count{
  font-family:var(--font-sans);font-size:.7rem;letter-spacing:.14em;color:var(--text-art-dim);
  min-width:5.5em;text-align:right;
}

/* ---------- 卡片墙 ---------- */
.fa-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem 1.2rem;align-items:start;
}
.fa-card{
  display:block;width:100%;min-width:0;padding:0;border:0;background:none;text-align:left;
  color:inherit;font:inherit;cursor:pointer;
}
.fa-card:focus-visible{outline:1px solid var(--accent-art);outline-offset:5px}
.fa-card .box{
  width:100%;aspect-ratio:16/10;overflow:hidden;background:none;
}
.fa-card .box img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:0% 50%;      /* 静止就停在卷首 */
  transition:object-position .6s cubic-bezier(0.22,1,0.36,1);   /* 移开：快速回卷首 */
}
/* 悬停：从卷首匀速读到卷尾，不跳位 */
.fa-card:hover .box img{
  object-position:100% 50%;
  transition:object-position 3.6s linear;
}
.fa-card .line{
  margin-top:.6rem;display:flex;align-items:baseline;gap:.7rem;min-width:0;
  height:1.5rem;                      /* 定高 + minmax(0,1fr)：长题名不撑宽列、不顶偏同排 */
}
.fa-card .line .t{
  font-family:var(--font-art);font-size:.88rem;color:var(--text-art);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.fa-card .line .d{
  font-family:var(--font-sans);font-size:.64rem;letter-spacing:.12em;
  color:var(--text-art-dim);margin-left:auto;flex:0 0 auto;white-space:nowrap;
}

/* ---------- 细看 ---------- */
.fa-deep{
  position:fixed;inset:0;z-index:9999;background:#0d0c0b;
  display:none;cursor:grab;overflow:hidden;
}
.fa-deep.open{display:block}
.fa-deep.dragging{cursor:grabbing}
.fa-deep img{position:absolute;transform-origin:0 0;max-width:none;will-change:transform}
.fa-deep .bar{
  position:absolute;left:0;right:0;top:0;height:4.6rem;z-index:5;
  display:flex;align-items:center;gap:1.4rem;padding:0 1.8rem;
  background:linear-gradient(rgba(13,12,11,.86),rgba(13,12,11,0));
  font-family:var(--font-sans);font-size:.7rem;letter-spacing:.14em;color:#a49c92;
}
.fa-deep .bar .t{font-family:var(--font-art);font-size:1rem;color:#e9e2d8;letter-spacing:.08em}
.fa-deep .bar .sp{margin-left:auto}
.fa-deep .bar button{
  background:rgba(13,12,11,.55);border:1px solid #4a443c;color:#cfc7bc;padding:.5rem 1rem;
  border-radius:2px;cursor:pointer;font:inherit;letter-spacing:.14em;
  transition:border-color .2s cubic-bezier(0.22,1,0.36,1),color .2s cubic-bezier(0.22,1,0.36,1);
}
.fa-deep .bar button:hover{border-color:var(--accent-tech);color:#e9e2d8}
.fa-deep .bar button:active{transform:scale(.97)}
.fa-deep .bar button:focus-visible{outline:1px solid var(--accent-tech);outline-offset:2px}

@media (max-width:1100px){
  .fa-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .fa-rail{height:38vh;min-height:200px;padding:0 22vw;gap:12vw}
  .fa-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem .8rem}
  .fa-card .line .t{font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .fa-card .box img,.fa-plate{transition-duration:1ms}
}

/* ---------- 卡片墙折叠：三排 + 渐隐；点开时拉升与淡入同时 ---------- */
.fa-wall{
  position:relative;overflow:hidden;
  transition:max-height .9s cubic-bezier(0.22,1,0.36,1);
}
.fa-wall.done{overflow:visible}

/* 渐隐层本身就是热区：末端必须完全盖住，不能透出画和字 */
.fa-veil{
  position:absolute;left:0;right:0;bottom:0;height:21rem;
  border:0;padding:0;margin:0;cursor:pointer;
  display:flex;align-items:flex-end;justify-content:center;
  background:linear-gradient(to bottom,
    rgba(247,245,240,0)    0%,
    rgba(247,245,240,.35) 30%,
    rgba(247,245,240,.80) 56%,
    var(--bg-art)         76%,
    var(--bg-art)        100%);
  transition:opacity .9s cubic-bezier(0.22,1,0.36,1);
}
.fa-veil svg{
  width:26px;height:26px;margin-bottom:1.6rem;
  fill:none;stroke:var(--text-art-dim);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .2s cubic-bezier(0.22,1,0.36,1),transform .2s cubic-bezier(0.22,1,0.36,1);
}
.fa-veil:hover svg{stroke:var(--accent-art);transform:translateY(3px)}
.fa-veil:focus-visible{outline:1px solid var(--accent-art);outline-offset:-3px}
.fa-veil.gone{opacity:0;pointer-events:none}

.fa-card.fa-hidden{
  opacity:0;transform:translateY(14px);
  transition:opacity .9s cubic-bezier(0.22,1,0.36,1),transform .9s cubic-bezier(0.22,1,0.36,1);
}
.fa-wall.open .fa-card.fa-hidden{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .fa-wall,.fa-veil,.fa-card.fa-hidden{transition-duration:1ms}
}