/* Page Flip Animations */

/* Page Flip Forward (Next Page) - Realistic 3D */
@keyframes page-flip-forward {
  0% {
    transform: perspective(1000px) rotateY(0deg);
    transform-origin: left center;
    z-index: 1;
  }
  25% {
    transform: perspective(1000px) rotateY(-25deg) translateZ(10px);
    transform-origin: left center;
    z-index: 2;
  }
  50% {
    transform: perspective(1000px) rotateY(-90deg) translateZ(20px);
    transform-origin: left center;
    z-index: 3;
  }
  75% {
    transform: perspective(1000px) rotateY(-155deg) translateZ(10px);
    transform-origin: left center;
    z-index: 2;
  }
  100% {
    transform: perspective(1000px) rotateY(-180deg);
    transform-origin: left center;
    z-index: 1;
  }
}

@keyframes page-flip-forward-shadow {
  0% {
    box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.1),
      -2px 0 4px rgba(0, 0, 0, 0.05);
  }
  25% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.15),
      -8px 0 16px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 
      0 8px 24px rgba(0, 0, 0, 0.2),
      -20px 0 40px rgba(0, 0, 0, 0.15);
  }
  75% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.15),
      -8px 0 16px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.1),
      2px 0 4px rgba(0, 0, 0, 0.05);
  }
}

@keyframes page-flip-forward-bend {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(0.85);
  }
  100% {
    filter: brightness(1);
  }
}

.page-flip-forward {
  animation: 
    page-flip-forward 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
    page-flip-forward-shadow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
    page-flip-forward-bend 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Page Flip Backward (Previous Page) - Slower, Softer */
@keyframes page-flip-backward {
  0% {
    transform: perspective(1000px) rotateY(-180deg);
    transform-origin: right center;
    z-index: 1;
  }
  25% {
    transform: perspective(1000px) rotateY(-155deg) translateZ(10px);
    transform-origin: right center;
    z-index: 2;
  }
  50% {
    transform: perspective(1000px) rotateY(-90deg) translateZ(20px);
    transform-origin: right center;
    z-index: 3;
  }
  75% {
    transform: perspective(1000px) rotateY(-25deg) translateZ(10px);
    transform-origin: right center;
    z-index: 2;
  }
  100% {
    transform: perspective(1000px) rotateY(0deg);
    transform-origin: right center;
    z-index: 1;
  }
}

@keyframes page-flip-backward-shadow {
  0% {
    box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.1),
      2px 0 4px rgba(0, 0, 0, 0.05);
  }
  25% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.15),
      8px 0 16px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 
      0 8px 24px rgba(0, 0, 0, 0.2),
      20px 0 40px rgba(0, 0, 0, 0.15);
  }
  75% {
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.15),
      8px 0 16px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 
      0 2px 8px rgba(0, 0, 0, 0.1),
      -2px 0 4px rgba(0, 0, 0, 0.05);
  }
}

.page-flip-backward {
  animation: 
    page-flip-backward 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    page-flip-backward-shadow 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    page-flip-forward-bend 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}