/* Book Content Display Fix - Enhanced Realistic Book with 20% Size Reduction */
/* NAVIGATION BUTTONS POSITIONED AT BOTTOM ABOVE DOTS */
/* FEATURE ICONS REMOVED */
/* PAGE CONTENT FULL WIDTH */

/* Features Section */
.features-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0a0a1a 0%, #0f0f23 25%, #1a1a2e 50%, #16213e 75%, #2d3561 100%);
    background-size: 400% 400%;
    animation: featuresGradient 18s ease infinite;
    position: relative;
    overflow: hidden;
}

@keyframes featuresGradient {
    0%, 100% { background-position: 0% 50%; }
    33% { background-position: 100% 50%; }
    66% { background-position: 50% 100%; }
}

.features-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    animation: featuresFloat 20s ease-in-out infinite;
}

@keyframes featuresFloat {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-30px) scale(1.1); }
}

.features-container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.features-header {
    text-align: center;
    margin-bottom: 4rem;
}

.features-title {
    font-size: 2.5rem;
    font-weight: 900;
    background: linear-gradient(45deg, #ffffff 0%, #e6f3ff 25%, #b3d9ff 50%, #80bfff 75%, #ffffff 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleGlow 6s ease infinite;
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

@keyframes titleGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.features-subtitle {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 700px;
    margin: 0 auto;
    font-weight: 500;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Book Container */
.features-book-container {
    max-width: 800px; /* Reduced from 1000px */
    margin: 0 auto;
    position: relative;
    perspective: 1200px; /* Reduced from 1500px */
    padding: 3rem 0 6rem 0; /* Reduced padding */
}

/* ENHANCED: Realistic Book - 20% Size Reduction */
.book {
    width: 100%;
    max-width: 640px; /* Reduced from 800px (20% reduction) */
    height: 480px; /* Reduced from 600px (20% reduction) */
    position: relative;
    transform-style: preserve-3d;
    margin: 0 auto;
    transform: rotateX(10deg) rotateY(-10deg);
    transition: transform 0.3s ease;
    padding-left: 40px; /* Reduced from 50px */
}

.book:hover {
    transform: rotateX(5deg) rotateY(-5deg);
}

/* ENHANCED: More Realistic Book Spine - Dark Theme */
.book-spine {
    position: absolute;
    left: -20px; /* Adjusted for smaller book */
    top: -4px;
    width: 40px; /* Reduced from 50px */
    height: calc(100% + 8px);
    background: 
        /* Main spine gradient with dark colors */
        linear-gradient(90deg, 
            #000000 0%,
            #0a0a0a 8%,
            #141414 15%,
            #1a1a1a 25%,
            #202020 40%,
            #2a2a2a 50%,
            #202020 60%,
            #1a1a1a 75%,
            #141414 85%,
            #0a0a0a 92%,
            #000000 100%
        ),
        /* Leather texture overlay */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 8px,
            rgba(255, 255, 255, 0.08) 8px,
            rgba(255, 255, 255, 0.08) 10px,
            transparent 10px,
            transparent 18px,
            rgba(0, 0, 0, 0.1) 18px,
            rgba(0, 0, 0, 0.1) 20px
        ),
        /* Subtle horizontal lines for book binding */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 15px,
            rgba(255, 255, 255, 0.15) 15px,
            rgba(255, 255, 255, 0.15) 16px
        );
    border-radius: 6px 0 0 6px; /* Reduced radius */
    box-shadow: 
        /* Inner shadows for depth */
        inset -6px 0 15px rgba(0, 0, 0, 0.7),
        inset 6px 0 12px rgba(255, 255, 255, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        /* Outer shadows */
        0 0 25px rgba(0, 0, 0, 0.6),
        -8px 0 20px rgba(0, 0, 0, 0.5),
        /* Realistic book spine shadow */
        -2px 0 8px rgba(0, 0, 0, 0.8);
    z-index: 1;
    transform: translateZ(-12px); /* Adjusted for smaller book */
}

/* Enhanced spine details */
.book-spine::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px; /* Reduced from 3px */
    height: 60%;
    background: 
        linear-gradient(0deg, 
            transparent 0%, 
            rgba(255, 255, 255, 0.4) 20%,
            rgba(255, 255, 255, 0.6) 50%, 
            rgba(255, 255, 255, 0.4) 80%,
            transparent 100%
        );
    border-radius: 1px;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

/* Enhanced spine text */
.book-spine::after {
    content: 'CHATROOM\\AFEATURES';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(90deg);
    font-size: 8px; /* Reduced from 10px */
    font-weight: 800;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 1.5px; /* Reduced from 2px */
    white-space: nowrap;
    text-shadow: 
        0 1px 3px rgba(0, 0, 0, 1),
        0 0 6px rgba(255, 255, 255, 0.5),
        0 0 2px rgba(255, 255, 255, 0.8);
    font-family: 'Arial', sans-serif;
}

/* Add spine ridges for more realism - Dark theme */
.book-spine:before {
    content: '';
    position: absolute;
    top: 10%;
    left: 2px;
    right: 2px;
    height: 80%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 25px,
            rgba(255, 255, 255, 0.05) 25px,
            rgba(255, 255, 255, 0.05) 27px,
            rgba(0, 0, 0, 0.4) 27px,
            rgba(0, 0, 0, 0.4) 29px
        );
    border-radius: 2px;
    z-index: 1;
}

/* FIXED: Book Cover - Proper hiding when opened */
.book-cover {
    position: absolute;
    top: 0;
    left: 20px; /* Adjusted for smaller spine */
    width: calc(100% - 20px);
    height: 100%;
    background: 
        radial-gradient(ellipse 32px 100% at 0% 50%, 
            rgba(0, 0, 0, 0.4) 0%, 
            rgba(0, 0, 0, 0.2) 30%, 
            transparent 70%
        ),
        linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(0,0,0,0.2) 100%),
        linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #16213e 50%, #2d3561 75%, #3f4a7a 100%);
    border-radius: 0 6px 6px 0; /* Reduced radius */
    box-shadow: 
        0 0 0 2px #0f0f23, /* Reduced border */
        0 0 0 4px #1a1a2e, /* Reduced border */
        0 6px 20px rgba(0, 0, 0, 0.4), /* Reduced shadows */
        0 16px 40px rgba(0, 0, 0, 0.3),
        0 28px 64px rgba(0, 0, 0, 0.2),
        inset 0 2px 5px rgba(255, 255, 255, 0.2), /* Reduced inset shadows */
        inset 0 -2px 5px rgba(0, 0, 0, 0.3),
        inset 20px 0 32px rgba(0, 0, 0, 0.3); /* Adjusted for smaller size */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 2.4rem; /* Reduced from 3rem (20% reduction) */
    transform-origin: left center;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1000; /* Very high when closed */
    overflow: hidden;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    cursor: pointer;
    /* FIXED: Default state */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* FIXED: Cover states - Completely hide when opened */
.book-cover.opened {
    z-index: 1 !important; /* Very low when opened */
    transform: rotateY(-170deg) translateZ(-40px) !important; /* Adjusted for smaller book */
    opacity: 0 !important; /* Completely transparent */
    visibility: hidden !important; /* Not visible */
    pointer-events: none !important; /* No interaction */
    display: none !important; /* Completely remove from layout */
}

.book-cover.opening {
    z-index: 500; /* Medium during animation */
    animation: coverOpenFixed 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.book-cover.closing {
    z-index: 500; /* Medium during animation */
    animation: coverCloseFixed 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    display: flex !important; /* Show during closing */
    opacity: 1 !important; /* Visible during closing */
    visibility: visible !important; /* Visible during closing */
    pointer-events: auto !important; /* Interactive during closing */
}

/* Cover binding edge */
.book-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px; /* Adjusted for smaller spine */
    width: 24px; /* Reduced from 30px */
    height: 100%;
    background: 
        radial-gradient(ellipse 16px 100% at 100% 50%, 
            rgba(0, 0, 0, 0.5) 0%, 
            rgba(0, 0, 0, 0.3) 50%, 
            transparent 100%
        ),
        linear-gradient(135deg, #0f0f23 0%, #1a1a2e 25%, #2d3561 50%, #3f4a7a 100%);
    border-radius: 6px 0 0 6px; /* Reduced radius */
    z-index: -1;
}

/* Cover texture */
.book-cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px, /* Reduced texture size */
            rgba(255, 255, 255, 0.05) 2px,
            rgba(255, 255, 255, 0.05) 4px
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.03) 2px,
            rgba(0, 0, 0, 0.03) 4px
        );
    pointer-events: none;
    z-index: 1;
}

/* Cover Content - Adjusted for smaller size */
.book-cover-content {
    position: relative;
    z-index: 2;
}

.book-cover h3 {
    font-size: 2.4rem; /* Reduced from 3rem (20% reduction) */
    font-weight: 900;
    color: white;
    margin-bottom: 1.2rem; /* Reduced from 1.5rem */
    text-shadow: 
        0 2px 5px rgba(0, 0, 0, 0.7), /* Reduced shadows */
        0 5px 10px rgba(0, 0, 0, 0.5);
    line-height: 1.2;
}

.book-cover p {
    font-size: 1.12rem; /* Reduced from 1.4rem (20% reduction) */
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Reduced shadow */
    margin-bottom: 1.6rem; /* Reduced from 2rem */
}

.book-cover .cover-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.book-cover .cover-features li {
    font-size: 0.88rem; /* Reduced from 1.1rem (20% reduction) */
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.4rem; /* Reduced from 0.5rem */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.book-cover .cover-features li::before {
    content: '✨';
    margin-right: 0.4rem; /* Reduced from 0.5rem */
}

/* Book Pages Container */
.book-pages {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* FIXED: Individual Book Pages - Always show content when active */
.book-page {
    position: absolute;
    top: 0;
    left: 20px; /* Adjusted for smaller spine */
    width: calc(100% - 20px);
    height: 100%;
    background: 
        radial-gradient(ellipse 24px 100% at 0% 50%, 
            rgba(0, 0, 0, 0.2) 0%, 
            rgba(0, 0, 0, 0.1) 30%, 
            transparent 70%
        ),
        linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(0,0,0,0.1) 100%),
        linear-gradient(135deg, #fefefe 0%, #f8f9fa 20%, #e9ecef 40%, #dee2e6 60%, #ced4da 80%, #adb5bd 100%);
    border-radius: 0 6px 6px 0; /* Reduced radius */
    box-shadow: 
        0 0 0 1px #495057, /* Reduced border */
        0 2px 10px rgba(0, 0, 0, 0.2), /* Reduced shadows */
        0 10px 24px rgba(0, 0, 0, 0.15),
        0 20px 40px rgba(0, 0, 0, 0.1),
        inset 0 1px 3px rgba(255, 255, 255, 0.4), /* Reduced inset shadows */
        inset 0 -1px 3px rgba(0, 0, 0, 0.1),
        inset 20px 0 28px rgba(0, 0, 0, 0.15); /* Adjusted for smaller size */
    transform-origin: left center;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem; /* REDUCED: Less padding for more content space */
    /* FIXED: Default state - hidden */
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    cursor: pointer;
    z-index: 10;
    pointer-events: none;
}

/* FIXED: Page stacking order */
.book-page:nth-child(1) { z-index: 16; }
.book-page:nth-child(2) { z-index: 15; }
.book-page:nth-child(3) { z-index: 14; }
.book-page:nth-child(4) { z-index: 13; }
.book-page:nth-child(5) { z-index: 12; }
.book-page:nth-child(6) { z-index: 11; }

/* Page binding edge */
.book-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: -20px; /* Adjusted for smaller spine */
    width: 24px; /* Reduced from 30px */
    height: 100%;
    background: 
        radial-gradient(ellipse 16px 100% at 100% 50%, 
            rgba(0, 0, 0, 0.3) 0%, 
            rgba(0, 0, 0, 0.15) 50%, 
            transparent 100%
        ),
        linear-gradient(135deg, #dee2e6 0%, #ced4da 25%, #adb5bd 50%, #868e96 100%);
    border-radius: 6px 0 0 6px; /* Reduced radius */
    z-index: -1;
}

/* Page texture */
.book-page::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 22px, /* Reduced from 28px */
            rgba(0, 0, 0, 0.08) 22px,
            rgba(0, 0, 0, 0.08) 24px /* Reduced from 30px */
        );
    pointer-events: none;
    z-index: 1;
}

/* FIXED: Page States - Force visibility when active */
.book-page.active {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2000 !important; /* Very high z-index */
    transform: rotateY(0deg) !important;
    display: flex !important;
    pointer-events: auto !important;
}

.book-page.turned {
    opacity: 1 !important;
    visibility: visible !important;
    transform: rotateY(-180deg) translateZ(-2px) !important; /* Adjusted for smaller book */
    z-index: 8 !important;
    pointer-events: none !important;
}

.book-page.turning {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 3000 !important; /* Highest during animation */
    animation: pageFlipForward 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none !important;
}

.book-page.turning-back {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 3000 !important; /* Highest during animation */
    animation: pageFlipBackward 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    pointer-events: none !important;
}

/* FIXED: Page Content - FULL WIDTH - Always visible and on top */
.page-content {
    text-align: center;
    width: 100% !important; /* FULL WIDTH */
    position: relative;
    z-index: 5000 !important; /* Very high z-index */
    max-width: none !important; /* REMOVED: No width restriction for full width */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    padding: 0 !important; /* REMOVED: No horizontal padding for full width */
}

/* REMOVED: Feature icons completely hidden */
.feature-icon-book {
    display: none !important; /* REMOVED: Feature icons hidden */
}

/* Remove icon gradient animation since icons are hidden */
@keyframes iconGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.feature-title-book {
    font-size: 2rem !important; /* Reduced from 2.5rem (20% reduction) */
    font-weight: 800 !important;
    color: #1a1a2e !important;
    margin-bottom: 1.2rem !important; /* REDUCED: Less margin for more content */
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.7) !important; /* Reduced shadow */
    line-height: 1.2 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 6000 !important;
    position: relative !important;
    /* ADJUSTED: No top margin since icon is removed */
    margin-top: 0 !important;
    width: 100% !important; /* FULL WIDTH */
}

.feature-description-book {
    color: #2d3748 !important;
    line-height: 1.6 !important; /* REDUCED: Tighter line height for more content */
    font-weight: 500 !important;
    font-size: 0.96rem !important; /* Reduced from 1.2rem (20% reduction) */
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5) !important;
    margin-bottom: 1.2rem !important; /* REDUCED: Less margin for more content */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 6000 !important;
    position: relative !important;
    width: 100% !important; /* FULL WIDTH */
}

.feature-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 6000 !important;
    position: relative !important;
    width: 100% !important; /* FULL WIDTH */
    columns: 2 !important; /* ADDED: Two columns for better space usage */
    column-gap: 1.5rem !important;
    column-fill: balance !important;
}

.feature-list li {
    font-size: 0.88rem !important; /* Reduced from 1.1rem (20% reduction) */
    color: #495057 !important;
    margin-bottom: 0.5rem !important; /* REDUCED: Less margin for more content */
    padding-left: 1.2rem !important; /* Reduced from 1.5rem */
    position: relative !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    break-inside: avoid !important; /* ADDED: Prevent column breaks within items */
    width: 100% !important;
}

.feature-list li::before {
    content: '✓' !important;
    position: absolute !important;
    left: 0 !important;
    color: #28a745 !important;
    font-weight: bold !important;
    font-size: 0.96rem !important; /* Reduced from 1.2rem */
}

/* FIXED: Navigation - Positioned at bottom above dots */
.book-navigation {
    position: absolute;
    bottom: -16px; /* Adjusted for smaller book */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px; /* Reduced from 20px */
    z-index: 10000; /* Very high for navigation */
}

.book-nav-btn {
    width: 40px; /* Reduced from 50px (20% reduction) */
    height: 40px; /* Reduced from 50px (20% reduction) */
    border-radius: 50%;
    background: 
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
        linear-gradient(135deg, #1a1a2e, #16213e);
    border: 2px solid rgba(255, 255, 255, 0.3); /* Reduced from 3px */
    color: white;
    font-size: 1.12rem; /* Reduced from 1.4rem (20% reduction) */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 
        0 6px 16px rgba(0, 0, 0, 0.4), /* Reduced shadows */
        0 3px 10px rgba(0, 0, 0, 0.3),
        inset 0 1px 3px rgba(255, 255, 255, 0.3), /* Reduced inset shadows */
        inset 0 -1px 3px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px); /* Reduced from 15px */
    font-weight: bold;
}

.book-nav-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); /* Reduced shadow */
    border-color: rgba(255, 255, 255, 0.7);
}

.book-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.book-nav-prev {
    /* Flexbox handles positioning */
}

.book-nav-next {
    /* Flexbox handles positioning */
}

/* FIXED: Page Indicators - Moved down to make room for navigation */
.book-page-indicator {
    position: absolute;
    bottom: -64px; /* Adjusted for smaller book */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.64rem; /* Reduced from 0.8rem */
    z-index: 10000; /* Very high for indicators */
}

.page-dot {
    width: 13px; /* Reduced from 16px (20% reduction) */
    height: 13px; /* Reduced from 16px (20% reduction) */
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 
        0 2px 5px rgba(0, 0, 0, 0.3), /* Reduced shadows */
        inset 0 1px 2px rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3); /* Reduced from 2px */
}

.page-dot.active {
    background: linear-gradient(135deg, #4CAF50, #81C784) !important;
    transform: scale(1.4) !important;
    box-shadow: 
        0 5px 10px rgba(0, 0, 0, 0.4), /* Reduced shadows */
        0 0 12px rgba(76, 175, 80, 0.6), /* Reduced glow */
        inset 0 1px 3px rgba(255, 255, 255, 0.6) !important; /* Reduced inset shadow */
    border-color: rgba(255, 255, 255, 0.9) !important;
}

/* FIXED: Cover Animation States */
@keyframes coverOpenFixed {
    0% {
        transform: rotateY(0deg) translateZ(0px);
        opacity: 1;
        visibility: visible;
        z-index: 1000;
    }
    25% {
        transform: rotateY(-45deg) translateZ(10px); /* Adjusted for smaller book */
        opacity: 0.8;
        visibility: visible;
        z-index: 500;
    }
    50% {
        transform: rotateY(-90deg) translateZ(14px); /* Adjusted for smaller book */
        opacity: 0.5;
        visibility: visible;
        z-index: 500;
    }
    75% {
        transform: rotateY(-135deg) translateZ(10px); /* Adjusted for smaller book */
        opacity: 0.2;
        visibility: visible;
        z-index: 500;
    }
    100% {
        transform: rotateY(-170deg) translateZ(-40px); /* Adjusted for smaller book */
        opacity: 0;
        visibility: hidden;
        z-index: 1;
        display: none;
        pointer-events: none;
    }
}

@keyframes coverCloseFixed {
    0% {
        transform: rotateY(-170deg) translateZ(-40px); /* Adjusted for smaller book */
        opacity: 0;
        visibility: hidden;
        z-index: 1;
        display: flex;
    }
    25% {
        transform: rotateY(-135deg) translateZ(10px); /* Adjusted for smaller book */
        opacity: 0.2;
        visibility: visible;
        z-index: 500;
        display: flex;
    }
    50% {
        transform: rotateY(-90deg) translateZ(14px); /* Adjusted for smaller book */
        opacity: 0.5;
        visibility: visible;
        z-index: 500;
        display: flex;
    }
    75% {
        transform: rotateY(-45deg) translateZ(10px); /* Adjusted for smaller book */
        opacity: 0.8;
        visibility: visible;
        z-index: 500;
        display: flex;
    }
    100% {
        transform: rotateY(0deg) translateZ(0px);
        opacity: 1;
        visibility: visible;
        z-index: 1000;
        display: flex;
        pointer-events: auto;
    }
}

/* Page Turning Animations - Adjusted for smaller book */
@keyframes pageFlipForward {
    0% {
        transform: rotateY(0deg) translateZ(0px);
    }
    25% {
        transform: rotateY(-45deg) translateZ(12px); /* Adjusted for smaller book */
    }
    50% {
        transform: rotateY(-90deg) translateZ(16px); /* Adjusted for smaller book */
    }
    75% {
        transform: rotateY(-135deg) translateZ(12px); /* Adjusted for smaller book */
    }
    100% {
        transform: rotateY(-180deg) translateZ(-2px); /* Adjusted for smaller book */
    }
}

@keyframes pageFlipBackward {
    0% {
        transform: rotateY(-180deg) translateZ(-2px); /* Adjusted for smaller book */
    }
    25% {
        transform: rotateY(-135deg) translateZ(12px); /* Adjusted for smaller book */
    }
    50% {
        transform: rotateY(-90deg) translateZ(16px); /* Adjusted for smaller book */
    }
    75% {
        transform: rotateY(-45deg) translateZ(12px); /* Adjusted for smaller book */
    }
    100% {
        transform: rotateY(0deg) translateZ(0px);
    }
}

/* Responsive Design - Adjusted for smaller book */
@media (max-width: 768px) {
    .book {
        max-width: 480px; /* Reduced from 600px */
        height: 360px; /* Reduced from 450px */
        transform: rotateX(5deg) rotateY(-5deg);
    }
    
    .book-page {
        padding: 1rem !important; /* REDUCED: Less padding on mobile for more content space */
    }
    
    .book-navigation {
        bottom: -12px; /* Adjusted */
        gap: 12px; /* Adjusted */
    }
    
    .book-nav-btn {
        width: 32px; /* Reduced from 40px */
        height: 32px; /* Reduced from 40px */
        font-size: 0.96rem; /* Reduced from 1.2rem */
    }
    
    .book-page-indicator {
        bottom: -52px; /* Adjusted */
    }
    
    .feature-title-book {
        font-size: 1.6rem !important; /* Reduced from 2rem */
    }
    
    .feature-description-book {
        font-size: 0.8rem !important; /* Reduced from 1rem */
    }
    
    .feature-list {
        columns: 1 !important; /* SINGLE COLUMN on mobile for better readability */
    }
    
    .book-cover h3 {
        font-size: 1.76rem; /* Reduced from 2.2rem */
    }
    
    .book-cover p {
        font-size: 0.88rem; /* Reduced from 1.1rem */
    }
}