/* Đợt 1: trang Album như một kệ sách gỗ. Chỉ animate transform và opacity cho mượt. */
/* Chỉ áp cho sách trên kệ (.fa-shelf): cuốn album lật trang (album-book.js, frames.css) cũng dùng tên lớp .fa-book và .fa-book-spine. */
.fa-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); row-gap: 2.6rem; column-gap: 0;
  padding: 1.6rem 0 .5rem; margin-top: .5rem; }
@media (max-width: 400px) { .fa-shelf { grid-template-columns: repeat(2, 1fr); } }

/* mỗi ô có một đoạn ván gỗ; các ô cạnh nhau ghép thành một tấm kệ dài */
.fa-shelf-slot { position: relative; display: flex; justify-content: center; padding: 0 10px 18px; }
.fa-shelf-slot::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; z-index: 0;
  background: linear-gradient(180deg, #D9A26B 0%, #C08048 35%, #9A5F33 100%);
  box-shadow: 0 10px 14px -8px rgba(90, 50, 20, .55), inset 0 2px 0 rgba(255, 230, 190, .5); }
.fa-shelf-slot:first-child::after { border-radius: 6px 0 0 6px; }
.fa-shelf-slot:last-child::after { border-radius: 0 6px 6px 0; }
/* bóng mờ của sách hắt lên tường phía sau */
.fa-shelf-slot::before { content: ''; position: absolute; left: 18%; right: 12%; bottom: 14px; height: 30px; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(80, 45, 15, .32), rgba(80, 45, 15, 0) 70%); }

.fa-shelf .fa-book { position: relative; z-index: 1; display: block; width: 100%; max-width: 170px; color: #fff; text-decoration: none;
  transition: transform .45s var(--fa-ease); }
.fa-shelf .fa-book:hover, .fa-shelf .fa-book:focus-visible { color: #fff; }
@media (hover: hover) {
  .fa-shelf .fa-book:hover, .fa-shelf .fa-book:focus-visible { transform: translateY(-10px) rotate(-1.5deg); }
  .fa-shelf-slot:nth-child(even) .fa-book:hover { transform: translateY(-10px) rotate(1.5deg); }
}
.fa-shelf .fa-book:focus-visible { outline: 3px solid var(--fa-honey); outline-offset: 4px; border-radius: 6px; }

.fa-shelf .fa-book-body { position: relative; display: block; aspect-ratio: 3 / 4.2; perspective: 900px; }
.fa-shelf .fa-book-spine, .fa-shelf .fa-book-cover, .fa-shelf .fa-book-pages { position: absolute; top: 0; bottom: 0; }

/* gáy sách bằng da, có 2 đường chỉ vàng, ảnh nhỏ và tên album viết dọc */
.fa-shelf .fa-book-spine { left: 0; width: 26px; border-radius: 5px 0 0 5px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 8px 0; overflow: hidden; background: var(--book, #8B4A2B);
  box-shadow: inset -5px 0 8px -4px rgba(0, 0, 0, .45), inset 2px 0 0 rgba(255, 255, 255, .18); }
.fa-shelf .fa-book-spine::before, .fa-shelf .fa-book-spine::after { content: ''; position: absolute; left: 3px; right: 3px; height: 2px; background: #E9C46A; opacity: .8; }
.fa-shelf .fa-book-spine::before { top: 3px; } .fa-shelf .fa-book-spine::after { bottom: 3px; }
.fa-shelf .fa-book-spine img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; border: 1.5px solid #E9C46A; flex: none; }
.fa-shelf .fa-book-spine i { color: #E9C46A; font-size: .8rem; }
.fa-shelf .fa-book-spine .t { writing-mode: vertical-rl; font-family: 'Playfair Display', Georgia, serif; font-size: .78rem; font-weight: 600;
  color: #FBE7C1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 0; flex: 1; letter-spacing: .02em; }

/* ruột sách: giấy kem, chỉ thấy khi bìa mở ra */
.fa-shelf .fa-book-pages { left: 24px; right: 0; border-radius: 0 6px 6px 0; display: grid; place-items: center; color: var(--fa-muted);
  background: repeating-linear-gradient(90deg, #FFFDF6 0 3px, #F1E4CB 3px 4px); font-family: 'Patrick Hand', cursive; font-size: 1.05rem;
  box-shadow: inset 6px 0 10px -6px rgba(90, 50, 20, .35); }
.fa-shelf .fa-book-pages span { opacity: 0; transition: opacity .3s .25s; }

/* bìa trước: ảnh ghép + tên album, xoay quanh mép trái khi mở */
.fa-shelf .fa-book-cover { left: 24px; right: 0; border-radius: 0 6px 6px 0; overflow: hidden; background: var(--book, #8B4A2B);
  transform-origin: left center; transform: rotateY(0deg); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .65s var(--fa-ease);
  box-shadow: 0 14px 22px -12px rgba(70, 35, 10, .65), inset 0 0 0 4px var(--book, #8B4A2B); }
.fa-shelf .fa-book-cover .fa-collage { inset: 4px; border-radius: 0 3px 3px 0; overflow: hidden; }
.fa-shelf .fa-book-cover .fa-album-placeholder { inset: 4px; position: absolute; display: grid; place-items: center; font-size: 2.4rem;
  color: #E9C46A; background: rgba(255, 255, 255, .06); }
.fa-shelf .fa-book-label { position: absolute; left: 4px; right: 4px; bottom: 4px; padding: 1.6rem .55rem .5rem; display: block; line-height: 1.2;
  background: linear-gradient(180deg, rgba(40, 20, 8, 0), rgba(40, 20, 8, .82)); border-radius: 0 0 3px 0; }
.fa-shelf .fa-book-label b { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: .98rem; font-weight: 600;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.fa-shelf .fa-book-label small { font-size: .72rem; opacity: .9; }
.fa-shelf .fa-book-tag { position: absolute; z-index: 2; top: 8px; right: 6px; font-size: .68rem; font-weight: 600; padding: .12rem .45rem;
  border-radius: 999px; background: rgba(255, 253, 248, .92); color: #B85E1E; }

/* màu da sách, đổi theo album cho kệ có nhiều màu */
.fa-shelf .fa-book.tone0 { --book: #8B4A2B; } .fa-shelf .fa-book.tone1 { --book: #A0612F; } .fa-shelf .fa-book.tone2 { --book: #7A3B3B; }
.fa-shelf .fa-book.tone3 { --book: #4E6B4F; } .fa-shelf .fa-book.tone4 { --book: #3F5670; } .fa-shelf .fa-book.tone5 { --book: #9A7B3C; }

/* đang mở sách (shelf.js thêm lớp is-opening rồi mới chuyển trang) */
.fa-shelf .fa-book.is-opening { transform: translateY(-14px) scale(1.12); z-index: 5; }
.fa-shelf .fa-book.is-opening .fa-book-cover { transform: rotateY(-155deg); }
.fa-shelf .fa-book.is-opening .fa-book-pages span { opacity: 1; }
.fa-shelf .fa-book.is-opening .fa-book-tag { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .fa-shelf .fa-book, .fa-shelf .fa-book-cover, .fa-shelf .fa-book-pages span { transition: none; }
}