/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Hide scrollbar for carousel containers */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

/* 3D Book Effect */
.book-container-3d {
  perspective: 1200px;
}

.book-3d {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: transform 1s ease;
  box-shadow: 0 20px 30px rgba(0,0,0,0.2);
}

.book-3d:hover {
  transform: rotateY(0deg);
}

.book-3d .face {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center;
}

/* Front cover */
.book-3d .front {
  width: 300px;
  height: 300px;
  background-size: cover;
  background-position: center;
  transform: translateZ(20px);
  border-radius: 2px 2px 0 0;
}

/* Shine effect on cover */
.book-3d .front::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%);
  pointer-events: none;
}

/* Back cover */
.book-3d .back {
  width: 300px;
  height: 300px;
  background-color: #8B4513;
  background-size: cover;
  background-position: center;
  transform: rotateY(180deg) translateZ(20px);
  border-radius: 2px 2px 0 0;
}

/* Solid back cover (no image) */
.book-3d .back.back-solid {
  background-color: #8B4513;
  background-image: none;
}

/* Pages (right side) */
.book-3d .pages {
  width: 40px;
  height: 300px;
  background-color: #f8f9fa;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0px,
    transparent 2px,
    #e0e0e0 2px,
    #e0e0e0 3px
  );
  box-shadow: inset 3px 0px 5px rgba(0,0,0,0.1);
  left: 130px;
  transform: rotateY(90deg) translateZ(150px);
}

/* Top edge */
.book-3d .top {
  width: 300px;
  height: 40px;
  background-color: #f8f9fa;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    #e0e0e0 2px,
    #e0e0e0 3px
  );
  top: 130px;
  transform: rotateX(90deg) translateZ(150px);
  box-shadow: inset 0px 3px 5px rgba(0,0,0,0.1);
}

/* Bottom edge */
.book-3d .bottom {
  width: 300px;
  height: 40px;
  background-color: #f8f9fa;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    #e0e0e0 2px,
    #e0e0e0 3px
  );
  top: 130px;
  transform: rotateX(-90deg) translateZ(150px);
  box-shadow: inset 0px 3px 5px rgba(0,0,0,0.1), 0 0 20px rgba(0,0,0,0.5);
}

/* Small book variant for library - thinner */
.book-3d.book-3d-small {
  width: 140px;
  height: 140px;
  box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}

.book-3d.book-3d-small .front {
  width: 140px;
  height: 140px;
  transform: translateZ(5px);
}

.book-3d.book-3d-small .back {
  width: 140px;
  height: 140px;
  transform: rotateY(180deg) translateZ(5px);
}

.book-3d.book-3d-small .pages {
  width: 10px;
  height: 140px;
  left: 65px;
  transform: rotateY(90deg) translateZ(70px);
  background-color: #f8f9fa;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0px,
    transparent 1px,
    #e0e0e0 1px,
    #e0e0e0 2px
  );
}

.book-3d.book-3d-small .top,
.book-3d.book-3d-small .bottom {
  width: 140px;
  height: 10px;
  top: 65px;
}

.book-3d.book-3d-small .top {
  transform: rotateX(90deg) translateZ(70px);
}

.book-3d.book-3d-small .bottom {
  transform: rotateX(-90deg) translateZ(70px);
}

/* Spine element for small books */
.book-3d.book-3d-small .spine {
  position: absolute;
  width: 6px;
  height: 140px;
  background-color: #8B4513;
  left: -3px;
  top: 0;
  transform: translateZ(0px);
  border-radius: 2px 0 0 2px;
}

@media (min-width: 640px) {
  .book-3d.book-3d-small {
    width: 160px;
    height: 160px;
  }
  .book-3d.book-3d-small .front,
  .book-3d.book-3d-small .back {
    width: 160px;
    height: 160px;
  }
  .book-3d.book-3d-small .pages {
    height: 160px;
    left: 75px;
    transform: rotateY(90deg) translateZ(80px);
  }
  .book-3d.book-3d-small .top,
  .book-3d.book-3d-small .bottom {
    width: 160px;
    top: 75px;
  }
  .book-3d.book-3d-small .top {
    transform: rotateX(90deg) translateZ(80px);
  }
  .book-3d.book-3d-small .bottom {
    transform: rotateX(-90deg) translateZ(80px);
  }
  .book-3d.book-3d-small .spine {
    height: 160px;
  }
}

/* Responsive sizing for default book */
@media (min-width: 480px) {
  .book-3d {
    width: 350px;
    height: 350px;
  }
  .book-3d .front,
  .book-3d .back {
    width: 350px;
    height: 350px;
  }
  .book-3d .pages {
    height: 350px;
    left: 155px;
    transform: rotateY(90deg) translateZ(175px);
  }
  .book-3d .top,
  .book-3d .bottom {
    width: 350px;
    top: 155px;
    transform-origin: center;
  }
  .book-3d .top {
    transform: rotateX(90deg) translateZ(175px);
  }
  .book-3d .bottom {
    transform: rotateX(-90deg) translateZ(175px);
  }
}

@media (min-width: 768px) {
  .book-3d {
    width: 400px;
    height: 400px;
  }
  .book-3d .front,
  .book-3d .back {
    width: 400px;
    height: 400px;
  }
  .book-3d .pages {
    width: 50px;
    height: 400px;
    left: 175px;
    transform: rotateY(90deg) translateZ(200px);
  }
  .book-3d .top,
  .book-3d .bottom {
    width: 400px;
    height: 50px;
    top: 175px;
  }
  .book-3d .top {
    transform: rotateX(90deg) translateZ(200px);
  }
  .book-3d .bottom {
    transform: rotateX(-90deg) translateZ(200px);
  }
}