.flipbook-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5vw;
  padding: 4vw 1.5vw;
  background: #fff;
}

.cover {
  width: min(720px, 90vw);
  aspect-ratio: 60 / 42.6;   /* preserves the original 720:511 proportions */
  height: auto;
  box-shadow: 0 0 100px rgba(0, 0, 0, .3);
  overflow: hidden;
}

.book {
  width: 100%;
  height: 100%;
  display: flex;
  perspective: 1200px;
  position: relative;
}

.book__page {
  position: relative;
  width: 50%;
  height: 100%;
  display: grid;
  transform: rotateY(0deg);
  transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform-origin: 0% 0%;
  background-color: #F5F5F5;
  background-image: linear-gradient(90deg, rgba(227, 227, 227, 1) 0%, rgba(247, 247, 247, 0) 18%);
}

.book__page:nth-of-type(1) {
  background-image: linear-gradient(-90deg, rgba(227, 227, 227, 1) 0%, rgba(247, 247, 247, 0) 18%);
}

.book__page--1 {
  overflow: hidden;
}

.book__page--2 {
  position: absolute;
  right: 0;
  transform-style: preserve-3d;
  background-color: #F5F5F5;
  background-image: linear-gradient(90deg, rgba(227, 227, 227, 1) 0%, rgba(247, 247, 247, 0) 18%);
}

.book__page--4 {
  cursor: pointer;
}

.book__page--last {
  position: absolute;
  right: 0;
  z-index: 0;
}

.book__page--sheet-1 {
  z-index: 4;
}

.book__page--sheet-2 {
  z-index: 3;
}

.book__page--sheet-3 {
  z-index: 2;
}

.book__page--sheet-4 {
  z-index: 1;
}

.book__page-front {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateY(0deg) translateZ(1px);
  overflow: hidden;
  cursor: pointer;
  backface-visibility: hidden;
}

.book__page-back {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg) translateZ(1px);
  overflow: hidden;
  cursor: pointer;
  backface-visibility: hidden;
}

.book__page img,
.book__page-front img,
.book__page-back img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.book input[type="radio"] {
  display: none;
}

#page-2:checked ~ .book__page--sheet-1,
#page-2-back:checked ~ .book__page--sheet-1,
#page-3:checked ~ .book__page--sheet-1,
#page-3-back:checked ~ .book__page--sheet-1,
#page-4:checked ~ .book__page--sheet-1,
#page-4-back:checked ~ .book__page--sheet-1,
#page-5:checked ~ .book__page--sheet-1,
#page-3:checked ~ .book__page--sheet-2,
#page-3-back:checked ~ .book__page--sheet-2,
#page-4:checked ~ .book__page--sheet-2,
#page-4-back:checked ~ .book__page--sheet-2,
#page-5:checked ~ .book__page--sheet-2,
#page-4:checked ~ .book__page--sheet-3,
#page-4-back:checked ~ .book__page--sheet-3,
#page-5:checked ~ .book__page--sheet-3,
#page-5:checked ~ .book__page--sheet-4 {
  transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform: rotateY(-180deg);
}

#page-2:checked ~ .book__page--sheet-1 {
  z-index: 5;
}

#page-2-back:checked ~ .book__page--sheet-1 {
  z-index: 4;
}

#page-2-back:checked ~ .book__page--sheet-2 {
  z-index: 5;
}

#page-3:checked ~ .book__page--sheet-1 {
  z-index: 1;
}

#page-3:checked ~ .book__page--sheet-2 {
  z-index: 5;
}

#page-3-back:checked ~ .book__page--sheet-1 {
  z-index: 1;
}

#page-3-back:checked ~ .book__page--sheet-2 {
  z-index: 4;
}

#page-3-back:checked ~ .book__page--sheet-3 {
  z-index: 5;
}

#page-4:checked ~ .book__page--sheet-1 {
  z-index: 1;
}

#page-4:checked ~ .book__page--sheet-2 {
  z-index: 2;
}

#page-4:checked ~ .book__page--sheet-3 {
  z-index: 5;
}

#page-4-back:checked ~ .book__page--sheet-1 {
  z-index: 1;
}

#page-4-back:checked ~ .book__page--sheet-2 {
  z-index: 2;
}

#page-4-back:checked ~ .book__page--sheet-3 {
  z-index: 3;
}

#page-4-back:checked ~ .book__page--sheet-4 {
  z-index: 5;
}

#page-5:checked ~ .book__page--sheet-1 {
  z-index: 1;
}

#page-5:checked ~ .book__page--sheet-2 {
  z-index: 2;
}

#page-5:checked ~ .book__page--sheet-3 {
  z-index: 3;
}

#page-5:checked ~ .book__page--sheet-4 {
  z-index: 5;
}