/* Book page-turn transition */
.pageturn-leaf{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:9998;pointer-events:none;opacity:0;
  transform-origin:left center;transform:perspective(2200px) rotateY(0deg);
  background:
    linear-gradient(90deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 8%),
    #e6dabf;
  /* faint paper texture via subtle repeating lines */
  box-shadow:inset 0 0 120px rgba(120,95,50,.15);
}
.pageturn-leaf.flip{
  animation:leafflip .62s cubic-bezier(.62,.03,.4,1) forwards;
}
@keyframes leafflip{
  0%{opacity:1;transform:perspective(2200px) rotateY(0deg)}
  100%{opacity:1;transform:perspective(2200px) rotateY(-105deg)}
}
/* a moving shadow that sweeps as the leaf turns */
.pageturn-shade{
  position:fixed;top:0;left:0;width:100%;height:100%;
  z-index:9997;pointer-events:none;opacity:0;
  background:radial-gradient(120% 100% at 0% 50%, rgba(0,0,0,.35), rgba(0,0,0,0) 55%);
  transition:opacity .3s ease;
}
.pageturn-shade.on{opacity:1;transition:opacity .5s ease}

/* page-out: current content dips slightly as its leaf lifts */
body.pageturn-out{ }
/* page-in: incoming content settles */
body.pageturn-in{ animation:pagein .7s ease forwards; }
@keyframes pagein{
  0%{opacity:.4;transform:translateY(6px)}
  100%{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  .pageturn-leaf,.pageturn-shade{display:none!important}
  body.pageturn-in{animation:none}
}