* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;

    background: linear-gradient(135deg, #B7F8DB 0%, #50A7C2 100%);

    font-family: 'Arial', sans-serif;
    padding: 20px;

    /* Blocca lo scrolling */
    overflow: hidden;
    overscroll-behavior: none;
}


/* Contenitore con prospettiva 3D */
.birthday-card {
    width: 350px;
    height: 450px;

    perspective: 1200px;

    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}


/* Elemento che ruota */
.card-inner {

    width: 100%;
    height: 100%;

    position: relative;

    transform-style: preserve-3d;

    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);

}


/* Singola pagina */
.card-page {

    position: absolute;

    width: 100%;
    height: 100%;

    border-radius: 20px;

    backface-visibility: hidden;

    display: flex;

    justify-content: center;
    align-items: center;

    padding: 30px;

    text-align: center;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.25);

    overflow: hidden;

    transition: background 0.5s ease;

}


/* Contenuto pagina */
.page-content {

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

}


/* Testi */

.page-content h1,
.page-content h2 {

    margin-bottom: 20px;

    color: white;

    text-shadow:
        2px 2px 4px rgba(0,0,0,0.3);

}

.page-content h3 {

	font-size: 50px;

}

.page-content p {

    font-size: 20px;

    margin-bottom: 30px;

    color: white;

    text-shadow:
        1px 1px 2px rgba(0,0,0,0.3);

    line-height: 1.4;

}


/* Icone animate */

.balloon-icon,
.cake-icon,
.gift-icon {

    font-size: 70px;

    animation: bounce 2s infinite;

}


@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-20px);
    }

    60% {
        transform: translateY(-10px);
    }

}


/*
    Animazione pagina
*/


.card-inner.flip-forward {

    transform: rotateY(-180deg);

}


.card-inner.flip-back {

    transform: rotateY(180deg);

}



/*
    Regalo
*/


.gift-btn {

    width: 180px;
    height: 180px;

    display: flex;

    justify-content: center;
    align-items: center;

    font-size: 100px;

    border: none;

    background: transparent;

    cursor: pointer;

    transition:
        opacity .8s ease,
        transform .2s ease;

}


.gift-btn:hover {

    transform: scale(1.08);

}


.gift-btn:active {

    transform: scale(0.95);

}



.gift-image {

    position: absolute;

    max-width: 80%;

    opacity: 0;

    transition:
        opacity .8s ease;

    pointer-events: none;

}


.gift-btn.hidden {

    opacity: 0;

    pointer-events: none;

}


.gift-image.visible {

    opacity: 1;

}