/* Book Open/Close Animations */

/* Book Open Animation */
@keyframes book-open {
  0% {
    transform: perspective(1200px) rotateY(0deg);
    transform-origin: left center;
  }
  50% {
    transform: perspective(1200px) rotateY(-90deg);
    transform-origin: left center;
  }
  100% {
    transform: perspective(1200px) rotateY(-180deg);
    transform-origin: left center;
  }
}

@keyframes book-open-shadow {
  0% {
    box-shadow: 
      0 4px 16px rgba(0, 0, 0, 0.1),
      inset -20px 0 40px rgba(0, 0, 0, 0.05);
  }
  50% {
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.15),
      inset -60px 0 80px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 
      0 4px 16px rgba(0, 0, 0, 0.1),
      inset -100px 0 120px rgba(0, 0, 0, 0.3);
  }
}

.book-opening {
  animation: 
    book-open 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    book-open-shadow 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.book-opening-shadow {
  animation: book-open-shadow 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Book Close Animation */
@keyframes book-close {
  0% {
    transform: perspective(1200px) rotateY(-180deg);
    transform-origin: left center;
  }
  50% {
    transform: perspective(1200px) rotateY(-90deg);
    transform-origin: left center;
  }
  100% {
    transform: perspective(1200px) rotateY(0deg);
    transform-origin: left center;
  }
}

@keyframes book-close-shadow {
  0% {
    box-shadow: 
      0 4px 16px rgba(0, 0, 0, 0.1),
      inset -100px 0 120px rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.15),
      inset -60px 0 80px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 
      0 4px 16px rgba(0, 0, 0, 0.1),
      inset -20px 0 40px rgba(0, 0, 0, 0.05);
  }
}

.book-closing {
  animation: 
    book-close 1s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    book-close-shadow 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.book-closing-shadow {
  animation: book-close-shadow 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Book Container - Ensure proper sizing */
.book-container {
  perspective: 1200px;
  perspective-origin: center center;
  transform-style: preserve-3d;
  overflow: hidden;
  position: relative;
}

.book-page {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  position: relative;
}