/* ultra_library · o volume -------------------------------------------------
   O sólido: a caixa 3D e as seis faces. Só geometria e a luz fixa de cada
   face — a matéria está em materials.css, a lombada e a capa nos seus arquivos,
   e todo movimento em interaction.css.

   As medidas vêm do build.py em cada .book: --t (espessura), --h (altura),
   --c (cor), --hue; --w (largura da capa) é global. */

.book {
  position: relative;
  flex: none;
  width: var(--t);
  height: var(--h);
  text-decoration: none;
  transform-style: preserve-3d;
  transform: perspective(1300px) translateZ(calc(var(--w) / -2)) rotateY(0deg);
  transform-origin: 50% 100%;
  cursor: pointer;
  color: var(--cream);
}
.face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  display: block;
}

/* as seis faces ------------------------------------------------------------ */
/* a lombada (.spine) fica em spine.css: é a face com anatomia própria */
.cover, .back {
  width: var(--w); height: var(--h);
  left: 50%; margin-left: calc(var(--w) / -2);
}
.cover { transform: rotateY(90deg) translateZ(calc(var(--t) / 2)); }
.back  { transform: rotateY(-90deg) translateZ(calc(var(--t) / 2)); --sheen: linear-gradient(90deg, rgba(0,0,0,.3), transparent 20%), linear-gradient(transparent, transparent); }
.edge {
  width: var(--t); height: var(--h);
  transform: rotateY(180deg) translateZ(calc(var(--w) / 2));
  background: repeating-linear-gradient(90deg, var(--pages) 0 1px, #cfc6ae 1px 2px);
}
.top, .bottom {
  width: var(--t); height: var(--w);
  top: 50%; margin-top: calc(var(--w) / -2);
  background:
    linear-gradient(90deg, rgba(0,0,0,.25), transparent 12%, transparent 88%, rgba(0,0,0,.25)),
    repeating-linear-gradient(0deg, var(--pages) 0 1px, #cfc6ae 1px 2px);
}
.top    { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); background: var(--c); }

/* sombra de contato do volume na tábua (interaction.css a afasta no hover);
   o topo do pseudo-elemento coincide com a base do livro: o núcleo escuro do
   gradiente (at 50% 0) fica na linha de contato e desvanece sobre a tábua */
.book::before {
  content: ""; position: absolute; left: -12px; right: -12px; bottom: -14px; height: 14px;
  background: radial-gradient(ellipse 60% 100% at 50% 0, rgba(0,0,0,.7), transparent 72%);
  transform: translateZ(calc(var(--w) / 2 + 1px));
  pointer-events: none;
}