.bb-bookblock {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 100;

  -webkit-perspective: 110vw;
  perspective: 110vw;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

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

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

.bb-horizontal .bb-page {
  width: 100%;
  height: 50%;
  top: 50%;
  -webkit-transform-origin: center top;
  transform-origin: center top;
}

.bb-page > div,
.bb-outer,
.bb-content,
.bb-inner {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

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

.bb-horizontal .bb-content {
  height: 200%;
}

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

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

.bb-horizontal .bb-back {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}

.bb-outer {
  width: 100%;
  overflow: hidden;
  z-index: 999;
}

.bb-overlay,
.bb-flipoverlay {
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
}

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

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

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

/* Content display */
.bb-content {
  background: #fff;
}

.bb-vertical .bb-front .bb-content {
  left: -100%;
}

.bb-horizontal .bb-front .bb-content {
  top: -100%;
}

/* Flipping classes */
.bb-vertical .bb-flip-next,
.bb-vertical .bb-flip-initial {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.bb-vertical .bb-flip-prev {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.bb-horizontal .bb-flip-next,
.bb-horizontal .bb-flip-initial {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

.bb-horizontal .bb-flip-prev {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

.bb-vertical .bb-flip-next-end {
  -webkit-transform: rotateY(-5deg);
  transform: rotateY(-5deg);
}

.bb-vertical .bb-flip-prev-end {
  -webkit-transform: rotateY(-175deg);
  transform: rotateY(-175deg);
}

.bb-horizontal .bb-flip-next-end {
  -webkit-transform: rotateX(15deg);
  transform: rotateX(15deg);
}

.bb-horizontal .bb-flip-prev-end {
  -webkit-transform: rotateX(165deg);
  transform: rotateX(165deg);
}

.bb-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background: inherit;
}

.book-cover > * {
  padding: 0;
  height: 100%;
  width: 50%;
  transition: transform 0.5s;
}

.move-book-cover {
  transform: translate(50%, 0);
}

/* No JS */
.no-js .bb-bookblock,
.no-js ul.bb-custom-grid li {
  width: auto;
  height: auto;
}

.no-js .bb-item {
  display: block;
  position: relative;
}

.bb-bookblock {
  perspective: 2000px;
}

.bb-page {
  --bb-speed: 1600ms;
  /* animate only transforms to avoid expensive repaints during motion */
  transition: transform var(--bb-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  backface-visibility: hidden;
}

.bb-vertical .bb-flip-next,
.bb-vertical .bb-flip-initial {
  -webkit-transform: rotateY(-180deg) translateZ(6px) skewY(-1deg) scaleX(0.998);
  transform: rotateY(-180deg) translateZ(6px) skewY(-1deg) scaleX(0.998);
  box-shadow: -8px 20px 36px rgba(0, 0, 0, 0.12);
}

.bb-vertical .bb-flip-prev {
  -webkit-transform: rotateY(0deg) translateZ(6px) skewY(1deg) scaleX(0.998);
  transform: rotateY(0deg) translateZ(6px) skewY(1deg) scaleX(0.998);
  box-shadow: 8px 20px 36px rgba(0, 0, 0, 0.12);
}

.bb-vertical .bb-flip-next-end {
  -webkit-transform: rotateY(-6deg) translateZ(2px) skewY(-0.6deg);
  transform: rotateY(-6deg) translateZ(2px) skewY(-0.6deg);
}

.bb-vertical .bb-flip-prev-end {
  -webkit-transform: rotateY(-174deg) translateZ(2px) skewY(-0.6deg);
  transform: rotateY(-174deg) translateZ(2px) skewY(-0.6deg);
}

/* subtle curl shadow that transitions during the flip (keeps transitionend firing)
   The pseudo-element transitions opacity and transform to avoid heavy repainting. */
.bb-page .bb-outer::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  transform-origin: left center;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.06) 55%,
    rgba(0, 0, 0, 0.12) 100%
  );
  opacity: 0;
  pointer-events: none;
  transition:
    transform calc(var(--bb-speed) / 1.2) cubic-bezier(0.22, 0.9, 0.2, 1),
    opacity calc(var(--bb-speed) / 1.2) linear;
  will-change: transform, opacity;
  z-index: 8;
}

.bb-page.bb-flip-next .bb-outer::before,
.bb-page.bb-flip-initial .bb-outer::before {
  opacity: 1;
  transform: translateX(0) skewY(-3deg) scaleX(1.02);
}

.bb-page.bb-flip-prev .bb-outer::before {
  opacity: 1;
  transform: translateX(8%) skewY(3deg) scaleX(1.02);
}

/* reduce page shadows while in mid-turn to avoid visual jitter; re-enabled on finalize */
.bb-bookblock.bb-reduce-shadows .bb-page,
.bb-bookblock.bb-reduce-shadows .bb-page .bb-content,
.bb-bookblock.bb-reduce-shadows .bb-outer {
  box-shadow: none !important;
}

/* short finalize settle to smooth landing (overrides long flip transition briefly) */
.bb-vertical .bb-page.bb-finalize.bb-flip-next,
.bb-vertical .bb-page.bb-finalize.bb-flip-initial {
  transition: transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: rotateY(-180deg) translateZ(1px) skewY(-0.4deg) scaleX(1);
}

.bb-vertical .bb-page.bb-finalize.bb-flip-prev {
  transition: transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: rotateY(0deg) translateZ(0px) skewY(0deg) scaleX(1);
}

.bb-vertical .bb-page.bb-finalize .bb-outer::before,
.bb-vertical .bb-page.bb-finalize .bb-outer::before {
  transition:
    transform 160ms ease,
    opacity 160ms linear;
  opacity: 0.22;
  transform: translateX(0) skewY(-1deg) scaleX(1.01);
}

/* motion/settle customizations removed to restore native landing behavior */

.bb-bookblock:not(.book-closed) .bb-page .bb-content {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #fbf7f0 0%,
    #fffdf8 45%,
    #f8f1e6 50%,
    #fffdf8 55%,
    #fbf7f0 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.03),
    inset 0 28px 40px rgba(0, 0, 0, 0.03),
    inset 0 -20px 30px rgba(0, 0, 0, 0.02);
}

.bb-bookblock:not(.book-closed) .bb-page .bb-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 18px;
  height: 100%;
  transform: translateX(-50%) skewY(-0.4deg);
  background: radial-gradient(
    circle at 50% 20%,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0) 45%
  );
  pointer-events: none;
  opacity: 0.55;
  z-index: 5;
}

.bb-bookblock:not(.book-closed) .bb-page .bb-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 32%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.05) 45%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 0.25;
  z-index: 4;
}