/* 3D Book Component Styles */

.book-3d-container {
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.book-3d {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(25deg);
  transition: transform 0.5s ease;
  /* Default size - can be overridden with size classes */
  --book-width: 180px;
  --book-height: 180px;
  --book-depth: 20px;
  --spine-color: #8b4513;
  --page-color: #f5f5dc;
  width: var(--book-width);
  height: var(--book-height);
}

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

/* Front cover - the main cover image */
.book-3d-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateZ(calc(var(--book-depth) / 2));
  border-radius: 0 4px 4px 0;
  overflow: hidden;
  box-shadow:
    2px 2px 10px rgba(0, 0, 0, 0.3),
    inset -2px 0 10px rgba(0, 0, 0, 0.1);
  backface-visibility: hidden;
}

.book-3d-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Spine of the book - visible in default view */
.book-3d-spine {
  position: absolute;
  left: 0;
  width: var(--book-depth);
  height: 100%;
  transform-origin: right center;
  /* Rotate perpendicular, move forward to cover's edge, nudge right to close seam */
  transform: translateX(1px) translateZ(calc(var(--book-depth) / 2)) rotateY(90deg);
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--spine-color) 85%, black),
    var(--spine-color) 30%,
    var(--spine-color) 70%,
    color-mix(in srgb, var(--spine-color) 70%, black)
  );
  border-radius: 2px 0 0 2px;
  backface-visibility: hidden;
}

/* Pages edge - hidden in spine view (we're rotated right, showing left/spine side) */
.book-3d-pages {
  display: none;
}

/* Back cover */
.book-3d-back {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateZ(calc(var(--book-depth) / -2));
  background: linear-gradient(135deg, #654321, #8b4513);
  border-radius: 4px 0 0 4px;
  box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.4);
  backface-visibility: hidden;
}

/* Size variants */
.book-3d-sm {
  --book-width: 120px;
  --book-height: 120px;
  --book-depth: 14px;
}

.book-3d-md {
  --book-width: 180px;
  --book-height: 180px;
  --book-depth: 20px;
}

.book-3d-lg {
  --book-width: 240px;
  --book-height: 240px;
  --book-depth: 26px;
}

/* Responsive sizing */
@media (max-width: 640px) {
  .book-3d {
    --book-width: 140px;
    --book-height: 140px;
    --book-depth: 16px;
  }

  .book-3d-lg {
    --book-width: 180px;
    --book-height: 180px;
    --book-depth: 20px;
  }
}

/* Fallback icon styling when no cover image */
.book-3d-cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--spine-color);
}

.book-3d-cover-fallback .material-symbols-outlined {
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.5);
}

/* Shadow beneath the book */
.book-3d-shadow {
  position: absolute;
  bottom: -15px;
  left: 10%;
  width: 80%;
  height: 15px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.3) 0%,
    transparent 70%
  );
  transform: rotateX(90deg);
  pointer-events: none;
}