/* ultra_library · interação ------------------------------------------------
   Tudo que só existe quando alguém aponta ou toca: o livro sendo puxado da
   prateleira, os vizinhos cedendo espaço, o tooltip ancorado (mouse) e a
   folha de prévia (toque). Nenhuma regra daqui muda a construção do
   volume — só estados.

   Um único modelo em dois passos, mouse e toque (library.js):
   · apontar (só mouse) — o livro desliza um dedo para fora, sozinho: nenhum
     vizinho se move, nada escurece — dá para varrer a prateleira inteira;
   · 1º clique/toque    — espiar (.peek): o livro vira de vez e a síntese
     aparece (tooltip ao lado da capa no mouse; folha no rodapé no toque,
     via <html class="ul-touch">);
   · 2º clique/toque    — abre a ficha; clique fora ou Esc guarda o livro.

   Regra de custo: estados contínuos (hover) só transformam o próprio livro;
   tudo que repinta a fileira (penumbra via filter, vizinhos cedendo) vive
   apenas no .peek, que é discreto — entra num clique, sai noutro. */

/* as transições vivem aqui porque só existem por causa dos estados abaixo */
.book { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.book .face { transition: filter .45s ease; }
.book::before { transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; transform-origin: 50% 0; }

/* apontar (só mouse): o livro desliza um pouco para fora e insinua a virada */
@media (hover: hover) and (pointer: fine) {
  .book:hover, .book:focus-visible {
    transform: perspective(1300px) translateZ(calc(26px - var(--w) / 2)) translateY(-3px) rotateY(-12deg);
    z-index: 5;
  }
  .book:hover::before, .book:focus-visible::before { transform: translateY(3px) scale(1.12, 1.2); opacity: .9; }
}

/* espiar (.peek): o livro é puxado da prateleira e vira a capa para a sala.
   Vale para mouse e toque; --shift entra pelo JS quando a capa aberta não
   caberia dentro da fileira. Depois do bloco de hover para vencê-lo. */
.book.peek, .book.peek:hover, .book.peek:active {
  transform: perspective(1300px) translateX(var(--shift, 0px)) translateZ(calc(120px - var(--w) / 2)) translateY(-8px) rotateY(-40deg);
  transition-duration: .6s;
  z-index: 6;
}
/* a sombra de contato se afasta e se espalha: o volume deixou a tábua */
.book.peek::before { transform: translateY(8px) scale(1.35, 1.6); opacity: .85; transition-duration: .6s; }
/* vizinhos: o da direita cede espaço, o da esquerda tomba de leve */
.book.peek + .book { transform: perspective(1300px) translateZ(calc(var(--w) / -2)) translateX(12px) rotateY(6deg); }
.book:has(+ .book.peek) { transform: perspective(1300px) translateZ(calc(var(--w) / -2)) translateX(-5px) rotateY(-4deg); }
/* o resto da fileira entra em penumbra */
.row-books:has(.book.peek) .book:not(.peek) .face { filter: brightness(.72) saturate(.85); }

/* tooltip: a síntese (L4), ancorada ao lado da capa aberta ----------------- */
.book .tip { display: none; }          /* a fonte do texto, no markup do livro */
.tooltip {
  position: fixed; z-index: 50;
  width: min(320px, calc(100vw - 2rem));
  background: #f4efe3; color: var(--ink);
  border-radius: 3px;
  padding: .95rem 1.05rem 1rem;
  box-shadow: 0 24px 44px -14px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.45);
  pointer-events: none;
  opacity: 0; transform: translateX(-8px);
  transition: opacity .18s, transform .18s;
  font-size: .86rem; line-height: 1.5;
}
.tooltip.on { opacity: 1; transform: none; }
/* filete de latão no topo, como a placa da estante */
.tooltip::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #a67c3c, #f0d493 50%, #9c7336);
  border-radius: 3px 3px 0 0;
}
.tooltip b { display: block; font-family: var(--display); font-weight: 500; font-size: 1.05rem; line-height: 1.2; }
.tooltip i { display: block; font-style: italic; color: #6b6355; margin-bottom: .5rem; font-size: .8rem; }
.tooltip .tip-l4 { display: block; text-wrap: pretty; }
.tooltip .tip-hint { display: block; margin-top: .6rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #8b6d3f; }

/* toque ------------------------------------------------------------------- */
@media (hover: none) {
  .book { -webkit-tap-highlight-color: transparent; }
  /* um leve afundamento confirma o tap antes de o livro girar (o .peek acima vence) */
  .book:active { transform: perspective(1300px) translateZ(calc(var(--w) / -2)) scale(.97); transition-duration: .1s; }
}

/* a folha de prévia que sobe do rodapé (o tooltip do toque) */
.peek-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  padding: 1.1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  background: #f4efe3; color: var(--ink);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -24px 50px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);
  transform: translateY(105%);
  transition: transform .38s cubic-bezier(.2,.8,.2,1);
  font-family: var(--body); font-size: .9rem; line-height: 1.45;
}
.peek-sheet.on { transform: none; }
.peek-sheet::before {
  content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px;
  border-radius: 2px; background: rgba(0,0,0,.18);
}
.peek-sheet b { display: block; font-family: var(--display); font-weight: 500; font-size: 1.15rem; line-height: 1.2; padding-right: 1.5rem; }
.peek-sheet i { display: block; font-style: italic; color: #6b6355; font-size: .82rem; margin: .1rem 0 .55rem; }
.peek-sheet .peek-l4 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.peek-sheet .peek-actions { display: flex; gap: .6rem; margin-top: .9rem; }
.peek-open {
  flex: 1; min-height: 46px; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--ink); color: var(--cream);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
}
.peek-open::after { content: " →"; }
.peek-close {
  min-width: 46px; min-height: 46px; border: 1px solid rgba(0,0,0,.22); border-radius: 4px; cursor: pointer;
  background: none; color: #6b6355; font-size: 1.3rem; line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .book, .book::before, .book .face, .tooltip, .peek-sheet { transition: none; }
}

/* brilho da capa — DESATIVADO --------------------------------------------
   Uma luz que varre a capa quando ela vira para a sala. Destoa das capas
   foscas e das encadernações de pano, então fica guardado aqui: para
   reativar, basta descomentar o bloco inteiro.

@keyframes ul-sheen { from { background-position: 110% 0; } to { background-position: -10% 0; } }
.book .cover::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 45%, rgba(255,255,255,.05) 52%, transparent 60%);
  background-size: 300% 100%; background-position: 110% 0;
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .book:hover .cover::after, .book:focus-visible .cover::after {
    opacity: 1; animation: ul-sheen .9s .25s cubic-bezier(.3,.7,.2,1) both;
  }
}
html.ul-touch .book.peek .cover::after {
  opacity: 1; animation: ul-sheen .9s .2s cubic-bezier(.3,.7,.2,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .book .cover::after { animation: none !important; }
}
------------------------------------------------------------------------- */