/*
  JC BookBlock Core
  Efeito de página em duas metades, inspirado no padrão BookBlock usado no JC.
  Sem dependências externas. Mantém somente a mecânica necessária para PageSpeed limpo.
*/
.bb-bookblock {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050505;
  perspective: 2200px;
  backface-visibility: hidden;
}

.bb-item {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #050505;
}

.bb-page {
  position: absolute;
  transform-style: preserve-3d;
  transition-property: transform;
  will-change: transform;
}

.bb-vertical .bb-page {
  width: 50%;
  height: 100%;
  left: 50%;
  transform-origin: left center;
}

.bb-page > div,
.bb-outer,
.bb-content,
.bb-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #050505;
}

.bb-outer {
  z-index: 999;
  overflow: hidden;
  backface-visibility: hidden;
}

.bb-vertical .bb-content { width: 200%; }

.bb-page > div {
  width: 100%;
  transform-style: preserve-3d;
}

.bb-page > div:not(:only-child) { backface-visibility: hidden; }

.bb-vertical .bb-back { transform: rotateY(-180deg); }

.bb-overlay,
.bb-flipoverlay {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background-color: rgba(0,0,0,.70);
}

.bb-flipoverlay { background-color: rgba(0,0,0,.22); }

.bb-bookblock.bb-vertical > div.bb-page:first-child,
.bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back {
  transform: rotateY(180deg);
}

.bb-vertical .bb-front .bb-content { left: -100%; }
.bb-vertical .bb-flip-next,
.bb-vertical .bb-flip-initial { transform: rotateY(-180deg); }
.bb-vertical .bb-flip-prev { transform: rotateY(0deg); }
.bb-vertical .bb-flip-next-end { transform: rotateY(-15deg); }
.bb-vertical .bb-flip-prev-end { transform: rotateY(-165deg); }

.no-js .bb-bookblock,
.no-js .bb-item {
  position: relative;
  display: block;
  width: auto;
  height: auto;
}