/* ==========================================================================
   دار السحاب — مجسمات الكتب ثلاثية الأبعاد (Ultra-Premium 3D Book Volumes)
   تعتمد على CSS 3D Transforms مع إضاءة ديناميكية، لمعان هولوجرامي، وظلال واقعية.
   ========================================================================== */

:root {
    --book-perspective: 1200px;
    --book-holo-sheen: linear-gradient(
        115deg,
        transparent 20%,
        rgba(255, 255, 255, 0.08) 35%,
        rgba(232, 161, 58, 0.28) 45%,
        rgba(210, 85, 58, 0.22) 50%,
        rgba(90, 74, 140, 0.25) 55%,
        rgba(255, 255, 255, 0.45) 60%,
        transparent 75%
    );
}

.book-object {
    --book-depth: clamp(14px, 1.8vw, 26px);
    --book-y: -22deg;
    --book-x: 4deg;
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --glare-x: 50%;
    --glare-y: 50%;
    --glare-opacity: 0;
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    overflow: visible;
    background: transparent;
    border-radius: 0;
    transform-style: preserve-3d;
    transform: perspective(var(--book-perspective)) 
               rotateX(calc(var(--book-x) + var(--tilt-x))) 
               rotateY(calc(var(--book-y) + var(--tilt-y)));
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s ease;
    will-change: transform;
}

/* ظل واقعي ثلاثي الأبعاد أسفل الكتاب يتفاعل مع الميلان */
.book-object::after {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 8%;
    right: 8%;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(8, 14, 26, 0.65) 0%, rgba(8, 14, 26, 0.25) 55%, transparent 75%);
    filter: blur(8px);
    transform: translateZ(-30px) rotateX(85deg) scale(0.95);
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s ease;
    pointer-events: none;
    z-index: -2;
}

/* أحجام مخصصة */
.book-object--sm { --book-depth: clamp(8px, 1.2vw, 14px); }
.book-object--md { --book-depth: clamp(14px, 1.6vw, 24px); }
.book-object--xl {
    --book-depth: clamp(22px, 2.8vw, 36px);
    --book-y: -18deg;
    --book-x: 3deg;
}

/* الأوجه الرئيسية للغلاف */
.book-volume-front,
.book-volume-back {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 2px 6px 6px 2px;
    backface-visibility: hidden;
    background: #141d2e;
}

.book-volume-front {
    transform: translateZ(calc(var(--book-depth) / 2));
    overflow: hidden;
    box-shadow: 
        inset 2px 0 3px rgba(255, 255, 255, 0.25),
        inset -2px 0 4px rgba(0, 0, 0, 0.4),
        6px 16px 28px -6px rgba(0, 0, 0, 0.55),
        0 0 16px rgba(232, 161, 58, 0.12);
}

.book-volume-front > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #e9e4d8;
    border-radius: 0;
    transition: transform 0.5s ease;
}

/* لمعان هولوجرامي وبريق فاخر يمر على الغلاف */
.book-volume-front::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--book-holo-sheen);
    background-size: 250% 250%;
    background-position: var(--glare-x) var(--glare-y);
    opacity: var(--glare-opacity);
    mix-blend-mode: overlay;
    transition: opacity 0.35s ease;
    z-index: 2;
}

/* تجعيد حافة الغلاف والعمود الفقري */
.book-volume-front::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(255, 255, 255, 0.18) 1.5%,
        rgba(0, 0, 0, 0.35) 3.5%,
        rgba(255, 255, 255, 0.15) 5%,
        transparent 9%,
        transparent 94%,
        rgba(0, 0, 0, 0.35) 100%
    );
    z-index: 3;
}

/* الغلاف الخلفي */
.book-volume-back {
    transform: rotateY(180deg) translateZ(calc(var(--book-depth) / 2));
    background: linear-gradient(135deg, #0d1522, #182338);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.6);
}

/* حواف الصفحات (Pages Block) */
.book-volume-pages,
.book-volume-spine {
    position: absolute;
    top: 1.2%;
    bottom: 1.2%;
    display: block;
    width: var(--book-depth);
    backface-visibility: hidden;
}

.book-volume-pages {
    right: 0;
    transform: translateX(50%) rotateY(90deg);
    background: repeating-linear-gradient(
        90deg,
        #b8ad97 0px,
        #fbf6eb 1px,
        #dfd5c0 2px,
        #efe6d2 3px
    );
    border-block: 2px solid #cebe9e;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
}

/* كعب الكتاب المذهب الأنيق (Spine) */
.book-volume-spine {
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-50%) rotateY(-90deg);
    background: linear-gradient(
        90deg,
        #070d18,
        #1c293f 35%,
        #2a3d5e 50%,
        #152033 75%,
        #0b1220
    );
    border-block: 2px solid #e8a13a;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.book-volume-spine > span {
    writing-mode: vertical-rl;
    font: 700 clamp(8px, 0.75vw, 11.5px)/1 var(--font-body);
    color: #f7e7ce;
    display: block;
    max-height: 84%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 14px auto;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* الحواف العلوية والسفلية */
.book-volume-top,
.book-volume-bottom {
    position: absolute;
    left: 1.2%;
    right: 1.2%;
    height: var(--book-depth);
    background: repeating-linear-gradient(
        0deg,
        #b8ad97 0px,
        #fbf6eb 1px,
        #dfd5c0 2px
    );
    backface-visibility: hidden;
}

.book-volume-top {
    top: 0;
    transform: translateY(-50%) rotateX(90deg);
    border-inline: 1px solid #cebe9e;
}

.book-volume-bottom {
    bottom: 0;
    transform: translateY(50%) rotateX(-90deg);
    border-inline: 1px solid #cebe9e;
}

/* تفاعل التحويم مع كارت الكتاب */
.book-card .book-cover {
    overflow: visible;
    perspective: 1200px;
}

.book-card .book-cover .book-object {
    transform: perspective(1000px) rotateX(4deg) rotateY(-20deg);
}

.book-card:hover .book-cover .book-object {
    transform: perspective(1000px) translateY(-10px) rotateX(2deg) rotateY(-32deg) scale(1.03);
    --glare-opacity: 0.75;
}

.book-card:hover .book-object::after {
    transform: translateZ(-35px) rotateX(85deg) scale(1.1);
    opacity: 0.85;
}

/* كفر كتاب الهيرو الرئيسي الفخم */
.stage-book--hero .book-object {
    --book-x: 2deg;
    --book-y: -16deg;
    filter: drop-shadow(0 25px 35px rgba(0,0,0,0.55));
    animation: hero-book-float 6s ease-in-out infinite alternate;
}

@keyframes hero-book-float {
    0% {
        transform: perspective(var(--book-perspective)) 
                   translateY(0) 
                   rotateX(2deg) 
                   rotateY(-16deg);
    }
    100% {
        transform: perspective(var(--book-perspective)) 
                   translateY(-14px) 
                   rotateX(5deg) 
                   rotateY(-24deg);
    }
}

.stage-book--hero:hover .book-object {
    animation-play-state: paused;
    transform: perspective(var(--book-perspective)) 
               translateY(-18px) 
               rotateX(1deg) 
               rotateY(-28deg) 
               scale(1.04);
    --glare-opacity: 0.9;
}

/* الكتب المروحية الخلفية */
.stage-book--a .book-object {
    transform: perspective(var(--book-perspective)) rotateX(5deg) rotateY(-30deg) rotateZ(-4deg);
}
.stage-book--b .book-object {
    transform: perspective(var(--book-perspective)) rotateX(3deg) rotateY(-10deg) rotateZ(6deg);
}

.stage-arch:hover .stage-book--a .book-object {
    transform: perspective(var(--book-perspective)) translateY(-8px) rotateX(3deg) rotateY(-36deg) rotateZ(-7deg);
}
.stage-arch:hover .stage-book--b .book-object {
    transform: perspective(var(--book-perspective)) translateY(-8px) rotateX(1deg) rotateY(-6deg) rotateZ(9deg);
}

/* كتاب الشهر (Spotlight) */
.spotlight-cover {
    perspective: 1400px;
    display: inline-block;
}
.spotlight-cover .book-object {
    transform: perspective(1400px) rotateX(3deg) rotateY(-22deg);
}
.spotlight-cover:hover .book-object {
    transform: perspective(1400px) translateY(-12px) rotateX(1deg) rotateY(-32deg) scale(1.04);
    --glare-opacity: 0.85;
}

/* الغلاف المذهب الخاص للمناسبات أو الإصدارات الحصرية */
.book-object--gold-foil .book-volume-front {
    box-shadow: 
        0 0 0 1px #e8a13a,
        0 0 25px rgba(232, 161, 58, 0.4),
        10px 20px 35px -8px rgba(0, 0, 0, 0.6);
}
.book-object--gold-foil .book-volume-pages {
    background: repeating-linear-gradient(
        90deg,
        #c99738 0px,
        #fce8a9 1px,
        #e3b85b 2px
    );
    border-block-color: #ffd875;
}

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .book-object,
    .stage-book--hero .book-object {
        animation: none !important;
        transition: none !important;
    }
    .book-card:hover .book-cover .book-object,
    .spotlight-cover:hover .book-object {
        transform: perspective(1000px) rotateX(4deg) rotateY(-20deg) !important;
    }
}