/* A flexible paper leaf; chapter links remain ordinary links without JavaScript. */
@view-transition { navigation: none; }
main, .site-header { view-transition-name: none; }

:root { --leaf-time: 1000ms; }

.page-curl-stage {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  isolation: isolate;
  contain: layout paint;
  perspective: 2600px;
  perspective-origin: 50% 50%;
  --count: 14;
}
.page-curl-stage *, .page-curl-stage *::before, .page-curl-stage *::after {
  pointer-events: none !important;
  user-select: none !important;
}
.curl-sheet {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: opacity;
}
.curl-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--i) * 100% / var(--count));
  width: calc(100% / var(--count) + 1px);
  transform-origin: left center;
  transform-style: preserve-3d;
  will-change: transform;
}
.page-curl-stage[data-direction='backward'] .curl-strip { transform-origin: right center; }
.curl-front, .curl-back, .curl-gloss {
  position: absolute;
  inset: 0;
  right: -1px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.curl-front {
  overflow: hidden;
  background: var(--paper, #eee3cb);
  transform: translateZ(.05px);
}
.curl-strip-content {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--i) * var(--sheet-width) / var(--count));
  width: var(--sheet-width);
  min-width: var(--sheet-width);
  height: var(--sheet-height);
  overflow: hidden;
  margin: 0;
}
.curl-strip-content > main {
  width: var(--sheet-width);
  max-width: none;
  margin: 0;
  box-shadow: none;
}
.curl-front::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #362010;
  opacity: var(--curl-shade, 0);
  transform: translateZ(.1px);
}
.curl-back {
  transform: rotateY(180deg) translateZ(.1px);
  background-color: #eadcc0;
  background-image: repeating-linear-gradient(1deg, transparent 0 3px, #73563106 3px 4px);
  background-size: var(--sheet-width) 100%;
  background-position: calc(-1 * var(--i) * var(--sheet-width) / var(--count)) 0;
}
.curl-back::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #47301a;
  opacity: var(--curl-back-shade, .04);
}
.curl-gloss {
  background: #fff8e86b;
  opacity: var(--curl-glint, 0);
  transform: translateZ(.2px);
}
.curl-cast-shadow {
  position: absolute;
  z-index: 0;
  top: -4%;
  bottom: -4%;
  left: 0;
  width: 26%;
  background: linear-gradient(90deg, #26160d00, #26160d12 24%, #26160d55 78%, #26160d00);
  opacity: 0;
  filter: blur(12px);
  will-change: transform, opacity;
}
.page-curl-stage[data-direction='backward'] .curl-cast-shadow {
  background: linear-gradient(90deg, #26160d00, #26160d55 22%, #26160d12 76%, #26160d00);
}
.page-curl-stage.is-turning .curl-cast-shadow {
  animation: curl-shadow-life var(--leaf-time) ease-in-out both;
}
@keyframes curl-shadow-life {
  0%, 100% { opacity: 0; }
  12% { opacity: .24; }
  42%, 68% { opacity: .9; }
  88% { opacity: .3; }
}
html.is-turning { cursor: progress; }
html.is-turning .site-header { cursor: default; }
[data-page-turn-toggle]:disabled { cursor: default; }

@media (max-width: 620px) {
  :root { --leaf-time: 850ms; }
  .page-curl-stage { perspective: 1800px; }
  .curl-cast-shadow { filter: blur(8px); width: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .page-curl-stage { display: none !important; }
  .page-curl-stage *, .page-curl-stage *::before, .page-curl-stage *::after {
    animation: none !important;
  }
}
@media print { .page-curl-stage { display: none !important; } }