@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap'); 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins';
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #25252b;
}
.gift-container{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 20%;
    animation: Vibration 4s ease;
}
.gift-container .gift-box{
    position: relative; /* changed from absolute to relative */
    height: 200px;
    width: 300px;
    background: #ec9c4a;
    animation: Bounce 4s ease infinite forwards;
}
.gift-container.active{
    animation: Vibration 1s ease forwards;
}
@keyframes Vibration{
    0%{
        transform: scale(1,1);
    }
    25%{
        transform: scale(.95,1.05);
    }
    50%{
        transform: scale(1.1,.9);
    }
    70%{
        transform: scale(.9,1.1);
    }
    100%{
        transform: scale(1,1);
    }
}
@keyframes Bounce{
    0%{
        transform: translateY(-24px);
    }
    50%{
        transform: translateY(0px);
    }
    100%{
        transform: translateY(-24px);
    }
}

.gift-box .active{
    animation: none;
}

.gift-box::after{ /* moved from .gift-container to .gift-box */
    content: '';
    position: absolute;
    width: 50px;
    height: 200px;
    background: #e76f51;
    left: 124px;
    top: 0; /* added top: 0 to position it correctly */
}

.click{
    position: absolute;
    background: #ec9c4a;
    width: 340px;
    height: 90px;
    top: -90px;
    left: -20px;
    cursor: pointer;
    z-index: 1;
    transition: .5s ease;
}
.click.active{
    transition-delay: 1s;
    transform: rotateY(-240px);
}
.click::before{
    content: '';
    position: absolute;
    width: 50px;
    height: 90px;
    background: #e76f51;
    left: 144px;
    z-index: 2;
}
.click::after{
    content: '';
    position: absolute;
    width: 5px;
    height: 0;
    border-bottom: 60px solid #e76f51;
    border-top: 60px solid #e76f51;
    border-left: 0px solid transparent;
    border-right: 60px solid transparent;
    transform: rotate(-90deg);
    top: -93px;
    left: 136px;
    z-index: 3;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap'); 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins';
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #25252b;
}
.gift-container{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 20%;
    animation: Vibration 4s ease;
}
.gift-container .gift-box{
    position: relative; /* changed from absolute to relative */
    height: 200px;
    width: 300px;
    background: #ec9c4a;
    animation: Bounce 4s ease infinite forwards;
}
.gift-container.active{
    animation: Vibration 1s ease forwards;
}
@keyframes Vibration{
    0%{
        transform: scale(1,1);
    }
    25%{
        transform: scale(.95,1.05);
    }
    50%{
        transform: scale(1.1,.9);
    }
    70%{
        transform: scale(.9,1.1);
    }
    100%{
        transform: scale(1,1);
    }
}
@keyframes Bounce{
    0%{
        transform: translateY(-24px);
    }
    50%{
        transform: translateY(0px);
    }
    100%{
        transform: translateY(-24px);
    }
}
.gift-box .active{
    animation: none;
}

.gift-box::after{ /* moved from .gift-container to .gift-box */
    content: '';
    position: absolute;
    width: 50px;
    height: 200px;
    background: #e76f51;
    left: 124px;
    top: 0; /* added top: 0 to position it correctly */
}

.gift-container .giftshadow2{
    content: '';
    position: absolute;
    width: 300px;
    height: 15px;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,.4);
    transition: .5s ease;
    z-index: 1;
}
.giftshadow2 
{
    transition: opacity 1s ease;
}
.gift-box:hover .giftshadow2 
{
    opacity: 0;
    visibility: hidden;
}
.click{
    position: absolute;
    background: #ec9c4a;
    width: 340px;
    height: 90px;
    top: -90px;
    left: -20px;
    cursor: pointer;
    z-index: 1;
    transition: .5s ease;
}
.click.active{
    transition-delay: 1s;
    transform: rotateY(-240px);
}
.click::before{
    content: '';
    position: absolute;
    width: 50px;
    height: 90px;
    background: #e76f51;
    left: 144px;
    z-index: 2;
}
.click::after{
    content: '';
    position: absolute;
    width: 5px;
    height: 0;
    border-bottom: 60px solid #e76f51;
    border-top: 60px solid #e76f51;
    border-left: 0px solid transparent;
    border-right: 60px solid transparent;
    transform: rotate(-90deg);
    top: -93px;
    left: 136px;
    z-index: 3;
}

.gift-container .shadow{
    content: '';
    position: absolute;
    width: 340px;
    height: 40px;
    background: rgba(0,0,0,.4);
    top: 190px;
    border-radius: 50%;
    left: -6.5%;
    animation: BounceOut 4s ease infinite forwards;
}
.gift-container .shadow{
    animation: none;
}
@keyframes BounceOut{
    0%{
        transform: translateY(24px);
        scale: .7;
    }
    50%{
        transform: translateY(0px);
        scale: 1;
    }
    100%{
        transform: translateY(24px);
        scale: .7;
    }
}
@keyframes BounceOut{
    0%{
        transform: translateY(24px);
        scale: .7;
    }
    50%{
        transform: translateY(0px);
        scale: 1;
    }
    100%{
        transform: translateY(24px);
        scale: .7;
    }
}

.gift-box .text {
    color: aliceblue;
    position: absolute;
    top: -30;
    left: 49.8%;
    bottom: 260px;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden; /* add this line */
    transition: opacity 1s ease;
    white-space: nowrap;
}

.gift-box:hover .text {
    animation: ease-in 0.5s ease upwards;
    opacity: 1;
    visibility: visible; /* add this line */
}

.click::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 0;
    border-bottom: 60px solid #e76f51;
    border-top: 60px solid #e76f51;
    border-left: 0px solid transparent;
    border-right: 60px solid transparent;
    transform: rotate(-90deg);
    top: -93px;
    left: 136px;
    z-index: 3;
}
.click::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 90px;
    background: #e76f51;
    left: 144px;
    z-index: 2;
}
.click.active{
    transition-delay: 1s;
    transform: rotateY(-240px);
}
.click::after.shadow{
    content: '';
    position: absolute;
    width: 100%;
    height: 10px;
    background: rgba(0,0,0,.25);
    top: 90px;
    left: -20px;
    z-index: 4;
}
.click::after.shadow{
    content: '';
    position: absolute;
    width: 100%;
    height: 10px;
    background: rgba(0,0,0,.25);
    top: 90px;
    left: -20px;
    z-index: 4;
}
.gift-box:hover .click 
{
    transform: translateY(-200px); /* lift the lid up */
}

.gift-box:hover .click::after 
{
    transform: translateY(-200px); /* lift the lid up */
    transform: rotate(-90deg);
}
.click 
{
    transition: transform 0.5s ease; /* add transition effect */
}