:root
{
   --bookmark-width: 5vw;
   --bookmark-height: 4vw;
   --bookmark-inset: 1vw;

   --page-hover-tilt: 15deg;
   --page-safe-tilt: 1deg;
   --page-safe-move: 1px;
   --page-flip-duration: 1s;
}



.book
{
   transition: opacity 0.4s 0.2s;
   perspective: 250vw;
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}
.book .page
{
   width: 50%; /* ? */
   height: 100%;

   float: none;
   clear: none;
   position: absolute;

   -webkit-transform-origin: 0 0;
   transform-origin: 0 0;
   -webkit-transition: -webkit-transform var(--page-flip-duration), right var(--page-flip-duration), left var(--page-flip-duration);
   transition: transform var(--page-flip-duration), right var(--page-flip-duration), left var(--page-flip-duration);
   -webkit-transform-style: preserve-3d;
   transform-style: preserve-3d;
   box-sizing: border-box;

   cursor: pointer;
   user-select: none;
   background-color: #f0f0f0;
   touch-action: manipulation;
}
@-moz-document url-prefix()
{
   .book .page
   {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
   }
}
.book .page.flipping
{
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
}
.book .page:before
{
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, 0);
   transition: background-color 0.7s;
   z-index: 2;
}



.book .page:nth-child(even)
{
   pointer-events: none;
   -webkit-transform: rotateY(180deg);
   transform: rotateY(180deg);
   -webkit-transform-origin: 100% 0;
   transform-origin: 100% 0;
   left: 0;
   border-radius: 4px 0 0 4px;
   background-image: linear-gradient(to left, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 10%);
}
.book .page:nth-child(odd)
{
   pointer-events: all;
   -webkit-transform: rotateY(0deg);
   transform: rotateY(0deg);
   right: 0;
   border-radius: 0 4px 4px 0;
   background-image: linear-gradient(to right, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 10%);
}

.book .page:nth-child(even):before
{
   background: rgba(0, 0, 0, 0.2);
}
.book .page:nth-child(odd):before
{
   background: rgba(0, 0, 0, 0);
}

.book .page.flipped:nth-child(even):hover:before
{
   background: rgba(0, 0, 0, 0.03);
}
.book .page:nth-child(odd):hover:before
{
   background: rgba(0, 0, 0, 0.03);
}

.book .page.flipped:nth-child(even)
{
   pointer-events: all;
   -webkit-transform: rotateY(0deg);
   transform: rotateY(0deg);
}
.book .page.flipped:nth-child(odd)
{
   pointer-events: none;
   -webkit-transform: rotateY(-180deg);
   transform: rotateY(-180deg);
}

.book .page.flipped:nth-child(even):before
{
   background: rgba(0, 0, 0, 0);
}
.book .page.flipped:nth-child(odd):before
{
   background: rgba(0, 0, 0, 0.2);
}

.book .page:not(.flipping):nth-last-child(1 of .flipped):hover
{
   -webkit-transform: rotateY( calc(var(--page-hover-tilt)) );
   transform:         rotateY( calc(var(--page-hover-tilt)) );
}
.book .page:not(.flipping):nth-child(1 of :not(.flipped)):hover
{
   -webkit-transform: rotateY( calc(0deg - var(--page-hover-tilt)) );
   transform:         rotateY( calc(0deg - var(--page-hover-tilt)) );
}

.book .page:has(+ .page:not(.flipping):nth-last-child(1 of .flipped):hover)
{
   -webkit-transform: rotateY( calc(var(--page-hover-tilt) - 180deg - var(--page-safe-tilt)) );
   transform:         rotateY( calc(var(--page-hover-tilt) - 180deg - var(--page-safe-tilt)) );
   right: var(--page-safe-move);
}
.book .page:not(.flipping):nth-child(1 of :not(.flipped)):hover + .page
{
   -webkit-transform: rotateY( calc(180deg - var(--page-hover-tilt) + var(--page-safe-tilt)) );
   transform:         rotateY( calc(180deg - var(--page-hover-tilt) + var(--page-safe-tilt)) );
   left: var(--page-safe-move);
}

.book .page:not(.flipped).flipping:nth-child(even)
{
   left: var(--page-safe-move);
}
.book .page.flipped.flipping:nth-child(odd)
{
   right: var(--page-safe-move);
}



.book .page .bookmark
{
   position: absolute;
   pointer-events: all;

   width: var(--bookmark-width);
   height: var(--bookmark-height);

   overflow: hidden;
}
.book .page .bookmark img
{
   width: 100%;
   height: 100%;
   object-fit: cover;
   pointer-events: none;
   border-radius: calc( var(--bookmark-inset)/2 );
}
.book .page:nth-child(even) .bookmark
{
   left:  calc( var(--bookmark-inset) - var(--bookmark-width) );
   width: var(--bookmark-width);

   -webkit-transform: rotateY(180deg);
   transform: rotateY(180deg);
}
.book .page:nth-child(odd) .bookmark
{
   right: calc( var(--bookmark-inset) - var(--bookmark-width) );
   width: var(--bookmark-width);

   -webkit-transform: rotateY(0deg);
   transform: rotateY(0deg);
}