/* book3d-realistic.css — a aparencia do LIVRO 3D do app AUTOR (.b3r-*).
   Copia do app; o original, comentado, mora la. */
.b3r-scene {
  position: relative;
  transform-style: preserve-3d;
  margin: 0 auto;               
}

.b3r-book {
  position: absolute; inset: 0; margin: auto;
  transform-style: preserve-3d;
  will-change: transform;
}
.b3r-book--spin { animation: b3rSpin 26s linear infinite; }
@keyframes b3rSpin {
  from { transform: rotateX(-6deg) rotateY(0deg); }
  to   { transform: rotateX(-6deg) rotateY(360deg); }
}

.dgm-b3d-ambient:hover .b3r-book--spin { animation-play-state: paused; }

.b3r-face {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;               
  backface-visibility: hidden;
  overflow: hidden;
  border-radius: 2px;
  
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
.b3r-tex {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; object-fit: cover;
}
.b3r-face > .b3r-shade,
.b3r-gloss, .b3r-grain, .b3r-lip {
  position: absolute; inset: 0; pointer-events: none;
}

.b3r-face--cover > .b3r-shade {
  background: linear-gradient(150deg,
    rgba(255, 255, 255, .17) 0%,
    rgba(255, 255, 255, 0) 34%,
    rgba(0, 0, 0, .05) 66%,
    rgba(0, 0, 0, .17) 100%);
}

.b3r-face--front > .b3r-shade {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, 0) 9%),
    linear-gradient(150deg,
      rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, 0) 34%,
      rgba(0, 0, 0, .05) 66%, rgba(0, 0, 0, .17) 100%);
}

.b3r-face--spineface > .b3r-shade {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .38) 0%,
    rgba(255, 255, 255, .10) 44%,
    rgba(255, 255, 255, .06) 56%,
    rgba(0, 0, 0, .38) 100%);
}

.b3r-face--pages {
  background: linear-gradient(180deg, #efeadd, #ded7c6);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .18);
}

.b3r-face--edge {
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .55) 0 1px,
      rgba(120, 110, 88, .30) 1px 2.4px),
    linear-gradient(180deg, #f0ebde, #dcd5c3);
}

.b3r-face--top, .b3r-face--bottom {
  background:
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, .5) 0 1px,
      rgba(120, 110, 88, .26) 1px 2.4px),
    linear-gradient(90deg, #efe9dc, #ded7c6);
}
.b3r-face--pages > .b3r-shade {
  background: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .12));
}

.b3r-lip {
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .28),
    inset 0 0 0 2px rgba(255, 255, 255, .05);
}

.b3r-gloss {
  background: linear-gradient(105deg,
    transparent 38%,
    rgba(255, 255, 255, .32) 48%,
    rgba(255, 255, 255, .08) 55%,
    transparent 66%);
  opacity: .9;
  will-change: transform;
  animation: b3rGloss 7s ease-in-out infinite;
}
@keyframes b3rGloss {
  0%   { transform: translateX(-72%); opacity: 0; }
  45%  { opacity: .95; }
  55%  { opacity: .95; }
  100% { transform: translateX(72%); opacity: 0; }
}

.b3r-grain {
  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;
}

.b3r-face--ghostcover {
  background:
    radial-gradient(circle at 50% 42%, rgb(var(--accent-rgb, 210 170 85) / .16), transparent 46%),
    linear-gradient(160deg, var(--surface-lift, #2a2440), var(--surface-depth, #17131f));
}
.b3r-face--ghostcover::after {
  content: ""; position: absolute; left: 50%; top: 42%;
  width: 34%; aspect-ratio: 1; translate: -50% -50%;
  border: 1px solid rgb(var(--accent-rgb, 210 170 85) / .34);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: 0 0 18px rgb(var(--accent-rgb, 210 170 85) / .12);
  opacity: .7; pointer-events: none;
}
.b3r-face--ghostspine {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .34), var(--surface-depth, #17131f) 45%,
    var(--surface-depth, #17131f) 55%, rgba(0, 0, 0, .34));
}

.b3r-floor {
  position: absolute; left: 50%; bottom: -6px;
  height: 42px;
  transform: translateX(-50%) rotateX(84deg);
  transform-origin: 50% 100%;
  pointer-events: none;
  
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(0, 0, 0, .40) 0%, rgba(0, 0, 0, .12) 45%, transparent 72%);
}
.b3r-floor::before {   
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 58%; height: 46%; translate: -50% -50%;
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, .60) 0%, rgba(0, 0, 0, .32) 55%, transparent 74%);
}
.b3r-floor::after {    
  content: ""; position: absolute; left: 50%; top: 46%;
  width: 40%; height: 34%; translate: -50% -50%;
  background: radial-gradient(ellipse at center,
    rgb(var(--accent-rgb, 210 170 85) / .10), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .b3r-book--spin { animation: none; transform: rotateX(-6deg) rotateY(28deg); }
  .b3r-gloss { animation: none; opacity: .4; transform: translateX(0); }
  
  .b3r-scene--hardcover .b3r-gloss { animation: none; opacity: .7; }
}

.b3r-slab { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }

.b3r-face--board, .b3r-face--boardrim { box-shadow: none; border-radius: 0; }

.b3r-face--board > .b3r-shade {
  background: linear-gradient(150deg,
    rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 40%,
    rgba(0, 0, 0, .04) 72%, rgba(0, 0, 0, .12) 100%);
}

.b3r-rim--wrap > .b3r-tex { object-fit: cover; }
.b3r-rim--top > .b3r-tex    { object-position: center top; }
.b3r-rim--bottom > .b3r-tex { object-position: center bottom; }
.b3r-rim--right > .b3r-tex  { object-position: right center; }
.b3r-rim--left > .b3r-tex   { object-position: left center; }

.b3r-rim--top > .b3r-shade, .b3r-rim--bottom > .b3r-shade {
  background: linear-gradient(0deg, rgba(0, 0, 0, .20), rgba(0, 0, 0, .04) 50%, rgba(0, 0, 0, .16));
}
.b3r-rim--left > .b3r-shade, .b3r-rim--right > .b3r-shade {
  background: linear-gradient(90deg, rgba(0, 0, 0, .20), rgba(0, 0, 0, .04) 50%, rgba(0, 0, 0, .16));
}

.b3r-rim--dark { background: linear-gradient(90deg, #241d2f, #17131f 50%, #241d2f); }

.b3r-rim--joint > .b3r-shade {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .40) 45%, rgba(0, 0, 0, .52) 100%);
}

.b3r-scene--hardcover .b3r-face { backface-visibility: visible; }

.b3r-face--boardin {
  background: linear-gradient(160deg, #e8e1d1, #d3c9b3);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}

.b3r-face--joint {
  box-shadow: none;
  border-radius: 0;
}
.b3r-face--joint > .b3r-shade {
  background: linear-gradient(90deg,
    rgba(0, 0, 0, .46) 0%, rgba(0, 0, 0, .30) 22%,
    rgba(0, 0, 0, .16) 50%,
    rgba(0, 0, 0, .30) 78%, rgba(0, 0, 0, .46) 100%);
}

.b3r-scene--hardcover .b3r-face--board { border-radius: 0 3px 3px 0; }
.b3r-scene--hardcover .b3r-board--spine .b3r-face--board { border-radius: 0; }

.b3r-scene--hardcover .b3r-gloss {
  background: linear-gradient(112deg,
    rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .03) 26%,
    transparent 54%, rgba(255, 255, 255, .02) 78%, rgba(255, 255, 255, .07) 100%);
  animation: b3rMatteSheen 15s ease-in-out infinite;
  transform: none;
}
@keyframes b3rMatteSheen {
  0%, 100% { opacity: .5; }
  50%      { opacity: .95; }
}

.b3r-scene--hardcover .b3r-face--board::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 92% at 30% 20%, rgba(255, 255, 255, .07), transparent 48%),
    radial-gradient(132% 104% at 50% 50%, transparent 54%, rgba(0, 0, 0, .30) 100%);
}

.b3r-scene--hardcover .b3r-grain { opacity: .075; background-size: 84px 84px; }

.b3r-scene--hardcover .b3r-face--pages {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, .28),
    inset 0 0 12px 3px rgba(0, 0, 0, .40);
}

.b3r-face--endpaper {
  background: linear-gradient(160deg, #efe9db, #ddd4c0);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}

.b3r-face--headband {
  border-radius: 0;
  background: repeating-linear-gradient(90deg,
    rgb(var(--accent-rgb, 210 170 85) / .55) 0 1.5px,
    rgba(224, 216, 200, .85) 1.5px 3px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
}