:root {
    --book-width: 250px;
    --book-height: 350px;
    --book-thickness: 40px;
    --book-spine-color: linear-gradient(90deg, 
                           #afb1b3 0%, 
                           #afb1b3 30%, 
                           #afb1b3 100%);
    --book-pages-color: #f9f6f0;
    --book-cover-shine: linear-gradient(105deg, 
                          rgba(255,255,255,0) 0%, 
                          rgba(255,255,255,0.3) 50%, 
                          rgba(255,255,255,0) 100%);
  }
  
  .book-mockup-pro {
    position: relative;
    width: var(--book-width);
    height: var(--book-height);
    max-width: 100%;
    margin: 10px auto;
    transform-style: preserve-3d;
    perspective: 2000px;
    transform: rotateY(-5deg);
    transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  
  .book-mockup-pro:hover {
    transform: rotateY(15deg);
  }
  
  .book-3d-container {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--book-thickness) / 2));
    transition: transform 0.6s ease;
  }
  
  .book-mockup-pro:hover .book-3d-container {
    transform: translateZ(calc(var(--book-thickness) / -2)) rotateY(5deg);
  }
  
  /* Front Cover */
  .book-cover-pro {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('pic/covers/1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateZ(var(--book-thickness));
    border-radius: 1px 3px 3px 1px;
    box-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.1),
      0 10px 20px rgba(0, 0, 0, 0.2),
      inset 1px 0 0 rgba(255, 255, 255, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
  }
  
  .book-cover-pro:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--book-cover-shine);
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }
  
  .book-mockup-pro:hover .book-cover-pro {
    box-shadow: 
      0 5px 15px rgba(0, 0, 0, 0.3),
      0 15px 30px rgba(0, 0, 0, 0.25),
      inset 1px 0 0 rgba(255, 255, 255, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  
  .book-mockup-pro:hover .book-cover-pro:before {
    opacity: 0.8;
  }
  
  /* Spine */
  .book-spine-pro {
    position: absolute;
    width: var(--book-thickness);
    height: 100%;
    left: 13px;
    background: var(--book-spine-color);
    transform: rotateY(-82deg) translateX(calc(var(--book-thickness) * -1));
    transform-origin: left center;
    border-radius: 1px 0 0 1px;
    box-shadow: 
      inset -5px 0 10px rgba(0, 0, 0, 0.5),
      0 1px 0 rgba(255, 255, 255, 0.1);
  }
  
  /* Pages Edge */
  .book-pages-edge-pro {
    position: absolute;
    width: var(--book-thickness);
    height: calc(100% - 6px);
    top: 3px;
    right: 0;
    background: var(--book-pages-color);
    transform: rotateY(90deg) translateZ(var(--book-thickness));
    transform-origin: right center;
    box-shadow: 
      inset 0 0 30px rgba(0, 0, 0, 0.1),
      0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
  
  .book-pages-lines-pro {
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(to right,
      rgba(0,0,0,0.03) 0px,
      rgba(0,0,0,0.03) 1px,
      transparent 1px,
      transparent 5px);
  }
  
  /* Top Edge */
  .book-top-edge-pro {
    position: absolute;
    width: 100%;
    height: var(--book-thickness);
    top: 0;
    background: var(--book-pages-color);
    transform: rotateX(90deg) translateY(calc(var(--book-thickness) * -1));
    transform-origin: top center;
    box-shadow: 
      inset 0 0 10px rgba(0, 0, 0, 0.1),
      0 -1px 0 rgba(0, 0, 0, 0.1);
  }
  
  /* Bottom Shadow */
  
  
  .book-mockup-pro:hover .book-shadow-pro {
    opacity: 0.8;
    transform: rotateX(-90deg) scale(1.1);
    filter: blur(8px);
  }