/* Real 3D Book Scene - Refined Model */
.book-container {
    perspective: 2000px;
    /* Increased perspective for less distortion */
    width: 300px;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Blue Energy Background */
.energy-bg {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(0, 243, 255, 0.25), transparent 70%);
    filter: blur(50px);
    z-index: 0;
    animation: energyPulse 4s infinite ease-in-out;
}

.energy-bg::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(189, 0, 255, 0.15), transparent 60%);
    mix-blend-mode: color-dodge;
    animation: plasmaShift 6s infinite linear;
}

@keyframes energyPulse {

    0%,
    100% {
        transform: scale(0.95);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

@keyframes plasmaShift {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* The Book Object */
.real-book {
    width: 240px;
    height: 360px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(15deg) rotateY(-30deg);
    animation: rotate360 15s infinite linear;
    z-index: 10;
}

.real-book:hover {
    animation-play-state: paused;
}

@keyframes rotate360 {
    from {
        transform: rotateX(15deg) rotateY(0deg);
    }

    to {
        transform: rotateX(15deg) rotateY(360deg);
    }
}

/* Common Face properties */
.face {
    position: absolute;
    backface-visibility: visible;
    /* Ensure we see inside/back if needed, though mostly covered */
}

/* Dimensions */
/* Front & Back: 240 x 360 */
/* Spine & Pages (Sides): 50 x 360 */
/* Top & Bottom: 240 x 50 */

.front,
.back {
    width: 240px;
    height: 360px;
    left: 0;
    top: 0;
}

.spine,
.pages {
    width: 50px;
    height: 360px;
    left: 95px;
    /* (240 - 50) / 2 = 95 */
    top: 0;
}

.top,
.bottom {
    width: 240px;
    height: 50px;
    left: 0;
    top: 155px;
    /* (360 - 50) / 2 = 155 */
}

/* Transforms to build the box */
/* Depth is 50px. Center at Z=0. */
/* Front moves forward by 25px */
.front {
    background: url('real-book-cover.png');
    background-size: cover;
    background-position: center;
    transform: translateZ(25px);
    border-radius: 2px 4px 4px 2px;
}

/* Back moves backward by 25px and rotates to face out */
.back {
    /* Use the same cover image for tone, but darkened */
    background:
        linear-gradient(to bottom, rgba(16, 26, 41, 0.96), rgba(16, 26, 41, 0.98)),
        url('real-book-cover.png');
    background-size: cover;
    background-position: center;
    transform: rotateY(180deg) translateZ(25px);
    border-radius: 2px 4px 4px 2px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 40px;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}

.back::after {
    content: 'Glimber Carvalho';
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.5rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

/* Spine: Left side. Rotates -90deg (faces left). Pushes out by half Width (120px) */
.spine {
    background: linear-gradient(90deg, #1a202c, #0d1116 30%, #050505);
    background-size: cover;
    /* In case texture is added */
    transform: rotateY(-90deg) translateZ(120px);
    /* Just subtle borders to define edges */
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* Pages: Right side. Rotates 90deg (faces right). Pushes out by half Width (120px) */
.pages {
    background: #fff;
    background: repeating-linear-gradient(to right,
            #ddd 0px,
            #eee 2px,
            #ddd 4px);
    transform: rotateY(90deg) translateZ(120px);
    /* Inset visuals slightly to mimic cover overhang? 
       To do that physically, we'd need to reduce width of this face and translate less. 
       For "bug free" box, let's keep it flush. */
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

/* Top: Faces Up. Rotate 90deg X. Pushes out by half Height (180px) */
.top {
    background: #fff;
    transform: rotateX(90deg) translateZ(180px);
}

/* Bottom: Faces Down. Rotate -90deg X. Pushes out by half Height (180px) */
.bottom {
    background: #fff;
    transform: rotateX(-90deg) translateZ(180px);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    /* Shadow on the floor if needed */
}

/* Lighting / Shading overlay on faces for realism during rotation */
/* This is harder in pure CSS without a lighting engine, but we can fake it with gradients on faces */