body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: sans-serif;
    overflow: hidden;
    margin: 0;
	background-image: url('biblia.webp');
	background-size: cover; /* Scale the image to cover the entire element */
  background-position: center center; /* Center the image horizontally and vertically */
  background-repeat: no-repeat; /* Prevent the image from repeating */
}

.scene {
    width: 230px;
    height: 130px;
    perspective: 1000px; /* Increased perspective */
}

.box {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(-20deg);
    cursor: pointer;
}

.box-face {
    position: absolute;
    width: 250px;
    height: 250px;
    background-image: url('box.webp');
	background-size: cover;
    border: 1px solid #8B4513;
    box-sizing: border-box;
}

.box-face2 {
    position: absolute;
    width: 250px;
    height: 250px;
    background-image: url('deus.webp');
	background-size: cover;
    border: 1px solid #8B4513;
    box-sizing: border-box;
}

.box-face3 {
    position: absolute;
    width: 250px;
    height: 250px;
    background-image: url('tampa.webp');
	background-size: cover;
    border: 1px solid #8B4513;
    box-sizing: border-box;
}

.front  { transform: rotateY(0deg) translateZ(125px); }
.back   { transform: rotateY(180deg) translateZ(125px); }
.right  { transform: rotateY(90deg) translateZ(125px); }
.left   { transform: rotateY(-90deg) translateZ(125px); }
.bottom { transform: rotateX(-90deg) translateZ(125px); }

/* The hinge controls the lid's opening animation */
.top-hinge {
    position: absolute;
    width: 250px;
    height: 250px;
    transform-style: preserve-3d;
    /* Position hinge at the top back edge of the box */
   
   
	transform: rotateX(-355deg) translateZ(0px); 
    transition: transform 1s ease-in-out;
}

.box.open .top-hinge {
    /* Rotate the hinge back to be vertical (90 deg rotation) */
     transform: rotateX(-263deg) translateZ(250px); 
}

/* The top face is now positioned relative to the hinge */
.top {
    /* transform: translateZ(50px) rotateX(-125deg) translateY(340px) rotateY(180deg) ; /* No extra transform needed */
	
	transform: rotateX(-275deg) translateZ(125px); 
}

/* Paper emerging from the box */
.paper {
    position: absolute;
    top: 1px;
    left: 10px;
    width: 180px;
    padding: 20px;
    background: #fafafa;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;

    /* Estado inicial: escondido dentro da caixa */
    transform: translateY(80px) translateZ(0px) rotateX(280deg);
    opacity: 0;

    /* Sem delay para recolher; recolhe imediatamente */
    transition: transform 1s ease-out, opacity 0.5s ease-out;
    transition-delay: 0s;
}

.box .paper.show {
    transform: translateY(-200px) translateZ(128px) rotateX(0deg);
    opacity: 1;
    transition-delay: 0.7s; /* só para a saída */
}

#verse {
    font-style: italic;
    color: #555;
}

#verse-link {
    display: none;
    margin-top: 12px;
    color: #8B4513;
    font-weight: bold;
    text-decoration: none;
}

#verse-link:hover {
    text-decoration: underline;
}

.paper.show #verse-link {
    display: inline-block;
}