.sketchthumbz {
width:10%;
}

/*
Source - https://stackoverflow.com/a/79011802
Posted by Roko C. Buljan, modified by community. See post 'Timeline' for change history
Retrieved 2026-05-12, License - CC BY-SA 4.0
*/

* { box-sizing: border-box; }


.book {
  --c: 0;
  display: flex;
  margin: auto;
  width:100px;
  min-width:50%;
  aspect-ratio: 3 / 4.5;
  /*1* let pointer event go trough pages of lower Z than .book */
  pointer-events: none;
  transform-style: preserve-3d;
  transition: translate 1s;
  translate: calc(min(var(--c), 1) * 50%) 0%;
  /* DEMO ONLY: incline on the X axis for pages preview */
  rotate: 1 0 0 30deg;

  [name^=book] { display: none; }
  &:has(#c0:checked) { --c:0; }
  &:has(#c1:checked) { --c:1; }
  &:has(#c2:checked) { --c:2; }
  &:has(#c3:checked) { --c:3; }
  &:has(#c4:checked) { --c:4; }
  &:has(#c5:checked) { --c:5; } 
  &:has(#c6:checked) { --c:6; }
  &:has(#c7:checked) { --c:7; }
  &:has(#c8:checked) { --c:8; }
  &:has(#c9:checked) { --c:9; }
  &:has(#c10:checked) { --c:10; }
  &:has(#c11:checked) { --c:11; }
  &:has(#c12:checked) { --c:12; }
  &:has(#c13:checked) { --c:13; }
   &:has(#c14:checked) { --c:14; }
 
 
}

.page {
  --thickness: 5;
  /* PS: Don't go below thickness 0.4 or the pages might transpare */
  flex: none;
  display: flex;
  width: 100%;
  /*1* allow pointer events on pages */
  pointer-events: all;
  user-select: none;
  transform-style: preserve-3d;
  border-right: 3px solid #2F4F4F;
  border-bottom: 1px solid #2F4F4F;
  transform-origin: left center;
  transition:
    transform 1s,
    rotate 1s ease-in calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);
  translate: calc(var(--i) * -100%) 0px 0px;
  transform: translateZ( calc((var(--c) - var(--i) - 0.5) * calc(var(--thickness) * 1px)));
  rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);

  label {
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
  }

  img {
    max-width: 100%;
    aspect-ratio: 3 / 4.5;
  }
}



.front,
.back {
  flex: none;
  width: 100%;

  backface-visibility: hidden;
  background-color: #fff;
  /* Fix backface visibility Firefox: */
  translate: 0px;
}

.back {
  background-image: linear-gradient(to right, #fff 80%, #ddd 100%);
  translate: -100% 0;
  rotate: 0 1 0 180deg;
}