/* ================================================
   3D BOOK HOVER EFFECT
   Creates realistic book appearance with hover animation
   ================================================ */

/* 3D Book Container */
.book-3d-container {
    perspective: 1000px;
    transform-style: preserve-3d;
    position: relative;
}

/* Wrapper for 3D book and action buttons */
.book-3d-wrapper {
    position: relative;
    margin-bottom: 12px;
    /* Prevent wrapper from inheriting perspective */
    transform-style: flat;
}

/* Book link - covers the 3D book only */
.book-3d-link {
    display: block;
    position: relative;
    z-index: 1;
}

.book-3d {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    /* Default rotation to show spine/page edges effect */
    transform: rotateY(-12deg) rotateX(3deg);
}

/* Hover effect - rotates more to emphasize spine */
.book-3d-container:hover .book-3d {
    transform: rotateY(-30deg) rotateX(0deg) translateZ(0);
}

/* Front Cover (the actual book image) */
.book-3d-front {
    position: relative;
    transform-style: preserve-3d;
    border-radius: 4px 12px 12px 4px;
    overflow: hidden;
    box-shadow:
        0 10px 30px -5px rgba(0, 0, 0, 0.2),
        0 4px 15px -3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.6s ease;
}

.book-3d-container:hover .book-3d-front {
    box-shadow:
        15px 15px 30px -10px rgba(0, 0, 0, 0.3),
        5px 10px 20px -5px rgba(0, 0, 0, 0.15);
}

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

/* Book Spine - left edge */
.book-3d-spine {
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 100%;
    transform: rotateY(90deg) translateZ(12.5px) translateX(-12.5px);
    background: url('../img/bookpattren.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 2px 0 0 2px;
    transform-origin: left center;
}

/* Book Back Cover */
.book-3d-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateZ(-25px);
    border-radius: 4px 12px 12px 4px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2);
    /* Match legacy back cover background */
    background: #000 url('../img/bookpattren.png') no-repeat;
    background-size: 15px 100%;
    background-position: right top;
}

/* Page edges - right side */
.book-3d-pages {
    position: absolute;
    top: 3%;
    right: -12px;
    width: 12px;
    height: 94%;
    background: linear-gradient(90deg,
            #f5f5f5 0%,
            #e8e8e8 5%,
            #f2f2f2 10%,
            #eee 15%,
            #f0f0f0 20%,
            #ececec 25%,
            #f3f3f3 30%,
            #e9e9e9 35%,
            #f1f1f1 40%,
            #ededed 45%,
            #f4f4f4 50%,
            #eaeaea 55%,
            #f0f0f0 60%,
            #eeeeee 65%,
            #f2f2f2 70%,
            #ebebeb 75%,
            #f3f3f3 80%,
            #e8e8e8 85%,
            #f1f1f1 90%,
            #ececec 95%,
            #f5f5f5 100%);
    transform: rotateY(90deg) translateZ(-6px) translateX(6px);
    border-radius: 0 2px 2px 0;
    transform-origin: right center;
}

/* Bottom page edges */
.book-3d-bottom-pages {
    position: absolute;
    bottom: -8px;
    left: 3%;
    width: 94%;
    height: 8px;
    background: linear-gradient(180deg,
            #f0f0f0 0%,
            #e5e5e5 50%,
            #f8f8f8 100%);
    transform: rotateX(90deg) translateZ(-4px);
    border-radius: 0 0 2px 2px;
    transform-origin: bottom center;
}

/* Overlay badges */
.book-3d-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.book-3d-overlay>* {
    pointer-events: auto;
}



/* Shine effect on hover */
.book-3d-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent 0%,
            transparent 40%,
            rgba(255, 255, 255, 0.15) 45%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0.15) 55%,
            transparent 60%,
            transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
    pointer-events: none;
    border-radius: 4px 12px 12px 4px;
}

.book-3d-container:hover .book-3d-shine {
    transform: translateX(100%);
}

/* Featured badge animation */
.book-3d-featured {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 20;
}

.book-3d-featured span {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: linear-gradient(135deg, #D4A632 0%, #efc75f 50%, #D4A632 100%);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(212, 166, 50, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.book-3d-featured i {
    margin-right: 4px;
    font-size: 10px;
}

/* Views badge */
.book-3d-views {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 20;
}

.book-3d-views span {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 11px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
}

.book-3d-views i {
    margin-right: 4px;
    font-size: 10px;
}

/* Brochure badge */
.book-3d-type {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
}

.book-3d-type span {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: linear-gradient(135deg, #1E7CB8 0%, #47a7d7 100%);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(30, 124, 184, 0.4);
}

/* Book info styling */
.book-3d-info {
    padding: 12px 4px 0;
}

.book-3d-title {
    font-size: 14px;
    font-weight: 600;
    color: #0e3250;
    /* Primary 900 to match header */
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
    margin: 0;
}

.book-3d-container:hover .book-3d-title {
    color: #1E7CB8;
}

.book-3d-author {
    font-size: 13px;
    color: #6b7280;
    margin-top: 4px;
    display: flex;
    align-items: center;
}

.book-3d-author i {
    margin-right: 6px;
    font-size: 11px;
}

.book-3d-category {
    margin-top: 8px;
}

.book-3d-category-badge {
    display: inline-block;
    padding: 3px 10px;
    background: #e8f4fa;
    color: #1E7CB8;
    font-size: 11px;
    font-weight: 500;
    border-radius: 20px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .book-3d {
        /* Slightly reduced default rotation on mobile */
        transform: rotateY(-10deg) rotateX(2deg);
    }

    .book-3d-container:hover .book-3d {
        transform: rotateY(-15deg) rotateX(3deg) translateZ(5px);
    }

    .book-3d-spine {
        width: 15px;
        transform: rotateY(90deg) translateZ(7.5px) translateX(-7.5px);
    }

    .book-3d-back {
        transform: translateZ(-15px);
    }

    .book-3d-pages {
        width: 8px;
        right: -8px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .book-3d-container:hover .book-3d-title {
        color: #47a7d7;
    }

    .book-3d-author {
        color: #9ca3af;
    }

    .book-3d-category-badge {
        background: #12456a;
        color: #a3d3eb;
    }
}