*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#ff9a9e,#fad0c4);
padding:20px;
overflow:hidden;
}

.scene{
perspective:2000px;
}

.card{
position:relative;
width:350px;
height:500px;
}

.front{
position:absolute;
inset:0;
background:linear-gradient(135deg,#ff4b6e,#ff7597);
border-radius:20px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
color:white;
z-index:2;
transform-origin:left center;
transition:transform 1.5s ease;
box-shadow:0 15px 40px rgba(0,0,0,.25);
backface-visibility:hidden;
}

.inside{
position:absolute;
inset:0;
background:white;
border-radius:20px;
padding:30px;
display:flex;
flex-direction:column;
justify-content:center;
z-index:1;
box-shadow:0 15px 40px rgba(0,0,0,.15);
overflow:hidden;
}

.card.opened .front{
transform:perspective(2000px) rotateY(-150deg);
}

.heart{
font-size:80px;
animation:pulse 1.5s infinite;
}

.signature{
margin-top:20px;
font-weight:bold;
color:#ff4b6e;
}

@keyframes pulse{
50%{
transform:scale(1.15);
}
}

@media(max-width:768px){
.card{
width:90vw;
height:70vh;
max-width:350px;
}
}