/* ═══════════════════════════════════════════════════════════════════════════
   livro3d.css — LIVRO 3D autônomo (Estrela do Caos), sem dependência do app
   ───────────────────────────────────────────────────────────────────────────
   Adaptado do renderizador aprovado do app (renderer/book3d-realistic.css,
   variante BROCHURA): luz assada por face, verniz, miolo com estrias, oclusão
   na junção lombada↔capa, grão do papel e duas sombras no chão.
   Regra de leveza: só transform/opacity animam; luz e sombra são gradientes
   pré-compostos (nada de blur()/mix-blend no caminho quente).

   Uso:
     <div class="livro3d" data-livro3d data-faces="caminho/faces/">
       <img class="livro3d-reserva" src="caminho/render/estrela-3q-escuro.webp" alt="…">
     </div>
     <script src="caminho/livro3d.js" defer></script>
   O tamanho vem da CAIXA: dê largura ao .livro3d (a altura sai do aspect-ratio).
   ═══════════════════════════════════════════════════════════════════════════ */

.livro3d {
  --livro3d-aspecto: 3 / 4;
  --livro3d-brilho: rgb(150 205 255 / .2);   /* aura fria atrás do livro (gelo) */
  position: relative;
  width: 100%;
  aspect-ratio: var(--livro3d-aspecto);
  overflow: visible;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
/* Reserva (imagem parada): fica até o 3D ficar pronto; sem JS/3D, é ela que aparece. */
.livro3d > .livro3d-reserva {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity .5s ease;
}
.livro3d.livro3d--pronto > .livro3d-reserva { opacity: 0; pointer-events: none; }

/* PALCO: dá a perspectiva (a JS calcula pelo tamanho do livro). */
.livro3d-palco {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.livro3d--pronto > .livro3d-palco { opacity: 1; }

/* Aura opcional (data-aura): luz fria atrás do livro, pré-composta. */
.livro3d-aura {
  position: absolute; left: 50%; top: 50%;
  width: 115%; aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(closest-side, var(--livro3d-brilho), transparent 72%);
  pointer-events: none;
}

.livro3d-cena {
  position: relative;
  transform-style: preserve-3d;
}
.livro3d-livro {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── FACE: elemento no espaço 3D; camadas 2D dentro (inset:0) ─────────────── */
.livro3d-face {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  border-radius: 1.5px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
.livro3d-tex {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; object-fit: cover;
  user-select: none; -webkit-user-drag: none;
}
.livro3d-luz, .livro3d-verniz, .livro3d-grao, .livro3d-aba {
  position: absolute; inset: 0; pointer-events: none;
}

/* ── LUZ ASSADA (luz vinda do alto-esquerda, à frente) ──────────────────────── */
/* Frente: oclusão na junção com a lombada + o VINCO da brochura (a dobra marcada
   a ~7 mm da lombada, onde a capa abre) + queda de luz para baixo/direita. */
.livro3d-face--frente > .livro3d-luz {
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .10) 2.2%,
      rgba(0, 0, 0, .02) 3.9%, rgba(255, 255, 255, .13) 4.4%, rgba(0, 0, 0, .10) 5.0%,
      rgba(0, 0, 0, 0) 8%),
    linear-gradient(150deg,
      rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, 0) 34%,
      rgba(0, 0, 0, .05) 66%, rgba(0, 0, 0, .20) 100%);
}
.livro3d-face--verso > .livro3d-luz {
  background: linear-gradient(150deg,
    rgba(255, 255, 255, .08) 0%, rgba(0, 0, 0, .06) 50%, rgba(0, 0, 0, .26) 100%);
}
/* Lombada: um tom abaixo da frente (vira para o lado) + leve curva do dorso. */
.livro3d-face--lombada > .livro3d-luz {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .40) 0%, rgba(0, 0, 0, .14) 16%,
    rgba(255, 255, 255, .07) 46%, rgba(0, 0, 0, .06) 64%,
    rgba(0, 0, 0, .30) 100%);
}

/* ── MIOLO DE PÁGINAS: estrias finíssimas + creme de bloco de folhas ────────── */
.livro3d-face--paginas {
  background: linear-gradient(180deg, #efeadd, #ddd6c4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
}
/* Corte (fore-edge): as folhas empilham na profundidade → linhas verticais.
   As duas beiradas são a grossura da CAPA (cartão), no azul escuro da arte. */
.livro3d-face--corte {
  background:
    linear-gradient(90deg, #0d2a3b 0 1.6%, transparent 1.6% 98.4%, #0d2a3b 98.4%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .55) 0 1px,
      rgba(120, 110, 88, .28) 1px 2.4px),
    linear-gradient(180deg, #f1ecdf, #dcd4c1);
}
/* Topo/pé: a pilha corre na altura da face → linhas horizontais; capa nas bordas. */
.livro3d-face--topo, .livro3d-face--pe {
  background:
    linear-gradient(0deg, #0d2a3b 0 1.6%, transparent 1.6% 98.4%, #0d2a3b 98.4%),
    linear-gradient(90deg, #0d2a3b 0 .35%, transparent .35%),
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, .5) 0 1px,
      rgba(120, 110, 88, .24) 1px 2.4px),
    linear-gradient(90deg, #efe9dc, #ddd5c3);
}
.livro3d-face--corte > .livro3d-luz {
  background: linear-gradient(180deg, rgba(0, 0, 0, .10), rgba(0, 0, 0, .34));
}
.livro3d-face--topo > .livro3d-luz {
  background: linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(0, 0, 0, .06));
}
.livro3d-face--pe > .livro3d-luz { background: rgba(0, 0, 0, .45); }

/* ── ABA da capa (a borda do cartão) ──────────────────────────────────────── */
.livro3d-aba {
  border-radius: 1.5px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .30),
    inset 0 0 0 2px rgba(255, 255, 255, .04);
}

/* ── VERNIZ: brilho largo que desliza com o giro (a JS move; só transform) ─── */
.livro3d-verniz {
  inset: 0 -60%;
  background: linear-gradient(105deg,
    transparent 36%,
    rgba(255, 255, 255, .16) 46%,
    rgba(255, 255, 255, .05) 54%,
    transparent 64%);
  will-change: transform;
}

/* ── GRÃO do papel (~4%), estático, sem mix-blend ─────────────────────────── */
.livro3d-grao {
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

/* ── CHÃO: sombra longa difusa + contato duro (2D, pré-compostos) ─────────── */
.livro3d-chao {
  position: absolute; left: 50%;
  translate: -50% 0;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(0, 0, 0, .46) 0%, rgba(0, 0, 0, .20) 48%, transparent 100%);
}
.livro3d-chao::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 66%; height: 34%; translate: -50% -50%;
  background: radial-gradient(closest-side,
    rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .30) 60%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .livro3d > .livro3d-reserva, .livro3d-palco { transition: none; }
}