/* A bookshelf of real books (src/lib/bookshelf.js): on the Book finder banner and the "Find your
   next book" card in What's on. Six books; every 2 seconds the next one slides out and shows its
   title and author, so a full turn of the shelf takes 12 seconds. */
.bs { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; pointer-events: none; }
.bs-row { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 1.2%; height: 66%; padding: 0 4%; }
/* plain books and bookends that fill out the shelf (they don't move) */
.bs-fill { flex: 0 0 auto; width: 5%; min-width: 12px; border-radius: 2px 2px 1px 1px; box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.14); }
.bs-fill--l0 { height: 58%; background: #8ec5d1; }
.bs-fill--l1 { height: 70%; background: #ffc93c; }
.bs-fill--r0 { height: 66%; background: #c7d77e; }
.bs-fill--r1 { height: 54%; background: #f4a4bf; transform: rotate(10deg); transform-origin: bottom left; margin-left: 2%; }
.bs-end { flex: 0 0 auto; width: 3%; min-width: 8px; height: 46%; border-radius: 6px 6px 0 0; background: #8a5a2b; box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.2); }
.bs-plank { display: block; height: 9%; min-height: 8px; margin: 0 3%; border-radius: 4px; background: linear-gradient(180deg, #c58b4a, #8a5a2b); box-shadow: 0 6px 10px rgba(40, 20, 0, 0.35); }

.bs-book { position: relative; flex: 0 0 auto; width: 9%; min-width: 22px; height: var(--h, 82%); border-radius: 3px 3px 1px 1px;
  box-shadow: inset -5px 0 0 rgba(0, 0, 0, 0.16), inset 3px 0 0 rgba(255, 255, 255, 0.18); transform-origin: bottom center;
  animation: bs-pick 12s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
.bs-book::before, .bs-book::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.35); }
.bs-book::before { top: 9%; }
.bs-book::after { bottom: 9%; }
.bs-spine { position: absolute; inset: 14% 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  writing-mode: vertical-rl; transform: rotate(180deg); color: #fff; font-size: clamp(0.5rem, 1.1vw, 0.72rem); font-weight: 800; line-height: 1; white-space: nowrap; text-overflow: ellipsis; }
/* the Book finder's six cover colours */
.bs-tone-0 { background: #212771; } .bs-tone-0 .bs-spine { color: #ffc93c; }
.bs-tone-1 { background: #b9335f; }
.bs-tone-2 { background: #536816; }
.bs-tone-3 { background: #0a6a79; }
.bs-tone-4 { background: #b74d06; }
.bs-tone-5 { background: #6c3fa0; }
/* a book with a cover stands face-out, leaning a little */
.bs-book--face { width: 24%; min-width: 54px; height: 92%; background: none; box-shadow: none; transform: rotate(-4deg); }
.bs-book--face::before, .bs-book--face::after { display: none; }
.bs-book--face img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; box-shadow: 0 6px 12px rgba(20, 16, 70, 0.35); }

/* the label above the book that's out */
.bs-label { position: absolute; left: 50%; bottom: calc(100% + 8px); display: grid; gap: 1px; width: max-content; max-width: 170px; padding: 6px 10px;
  border-radius: 10px; background: #fff; color: #212771; font-size: 0.78rem; line-height: 1.2; text-align: center; white-space: normal;
  box-shadow: 0 6px 16px rgba(20, 16, 70, 0.25); transform: translateX(-50%) translateY(6px); opacity: 0;
  animation: bs-label 12s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
.bs-label strong { font-weight: 800; }
.bs-label small { color: #646a71; font-size: 0.7rem; font-weight: 700; }
.bs-label::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; }
/* the first and last books' labels lean inwards so they stay inside the picture */
.bs-book:first-child .bs-label { left: 0; transform: translateY(6px); }
.bs-book:last-child .bs-label { left: auto; right: 0; transform: translateY(6px); }
.bs-book:first-child .bs-label::after { left: 18px; }
.bs-book:last-child .bs-label::after { left: auto; right: 12px; }

@keyframes bs-pick {
  0%, 16.7%, 100% { transform: translateY(0); filter: none; }
  3%, 13% { transform: translateY(-14%); filter: brightness(1.12) drop-shadow(0 6px 8px rgba(20, 16, 70, 0.35)); }
}
.bs-book--face { animation-name: bs-pick-face; }
@keyframes bs-pick-face {
  0%, 16.7%, 100% { transform: rotate(-4deg); }
  3%, 13% { transform: rotate(0) translateY(-8%) scale(1.06); }
}
@keyframes bs-label {
  0%, 2%, 15%, 100% { opacity: 0; }
  5%, 12% { opacity: 1; }
}

/* in a What's on card: a warm wall behind the shelf */
.bs--card { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 14px, transparent 14px 28px), linear-gradient(180deg, #2b3a8f, #212771); }
.bs--card .bs-row { height: 62%; }
/* on the Book finder banner: wider, sitting on the hero */
.bs--hero { width: min(620px, 100%); height: 200px; margin: 26px auto 0; }
.bs--hero .bs-row { height: 74%; gap: 2.5%; }
.bs--hero .bs-book { width: 10%; }
.bs--hero .bs-book--face { width: 22%; }
.bs--hero .bs-spine { font-size: 0.8rem; }
@media (max-width: 520px) { .bs--hero { height: 150px; } .bs--hero .bs-label { max-width: 130px; } }

/* still for reduced motion and "Pause animations": the shelf stays, nothing moves */
@media (prefers-reduced-motion: reduce) { .bs-book, .bs-label { animation: none !important; } }
html.br-still .bs-book, html.br-still .bs-label { animation: none !important; }