html {
    box-sizing: border-box;
    --size: 150px;
}

*,
*:after,
*:before {
    box-sizing: inherit;
}

.container-gift {
    left: 0;
    height: 0;
    margin: 0 auto;
    perspective: 600px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--size);
    display: block;
    transition: height 1s ease-in, width 1s ease-in, opacity 1s ease-in;
    opacity: 0;
}

.container-open {
    z-index: 5;
    opacity: 1;
    height: var(--size);
}

.container-gift:hover {
    height: 80%;
    width: 300px;
}

.present {
    height: var(--size);
    left: 0;
    margin: 0 auto;
    perspective: 600px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--size);
    z-index: 3;
}

.image {
    background-image: url('http://www.firststepsjs.com/Stored_Assets/Surprise.png');
    background-size: cover;
    position: absolute;
    top: 45%;
    transform: translate3d(0, -50%, 0) rotateY(0) rotateX(0);
    transition: transform 2.5s cubic-bezier(0.22, 0.61, 0.36, 1);
    width: 100%;
    height: 100%;
    z-index: 5;
    display: block;
    border-radius: 12px;
}

.image:hover {
    cursor: pointer;
}

.present:hover {
    cursor: pointer;
}

.instruction {
    bottom: -100px;
    left: 0;
    opacity: 1;
    position: absolute;
    text-align: center;
    transition: opacity .5s;
    width: 100%;
}

.rotate-container {
    animation: present-rotate 30s infinite linear;
    height: 100%;
    transform: rotateY(170deg);
    transform-style: preserve-3d;
}

@keyframes present-rotate {
    0% { transform: rotateY(0); }
    100% { transform: rotateY(360deg); }
}

.bottom,
.front,
.left,
.back,
.right {
    background-color: #ffc0cb;
    border: 1px solid rgba(0, 0, 0, .2);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.bottom {
    transform: translateY(50%) rotateX(90deg);
}

.front,
.left,
.back,
.right {
    transition: transform .5s;
    transform-origin: bottom;
    transform-style: preserve-3d;
}

.front:after,
.left:after,
.back:after,
.right:after,
.lid-top:after,
.lid-front:after,
.lid-left:after,
.lid-back:after,
.lid-right:after {
    background-color: #ff3333;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    content: '';
    height: 100%;
    left: calc(50% - 10px);
    position: absolute;
    transform: translateZ(.1px);
    width: 20px;
}

.lid-top:before {
    background-color: #ef6191;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    content: '';
    height: 20px;
    left: 0;
    position: absolute;
    top: calc(50% - 10px);
    transform: translateZ(.1px);
    width: 100%;
}

.left { 
    transform: translateX(-50%) rotateY(-90deg); 
}

.back { 
    transform: translateZ(calc(var(--size) / -2)) rotateY(180deg) rotateX(0); 
}

.right { 
    transform: translateX(50%) rotateY(90deg); 
}

.front { 
    transform: translateZ(calc(var(--size) / 2)); 
}

.lid {
    animation: lid-animation 3.5s 1s infinite;
    transform: translate3d(0, 0, 0);
    transform-style: preserve-3d;
    transition: transform .5s;
}

@keyframes lid-animation {
    0% { transform: translate3d(0, 0, 0) rotateX(0); }
    5% { transform: translate3d(0, -10px, -5px) rotateX(5deg); }
    10% { transform: translate3d(0, -10px, 5px) rotateX(-5deg); }
    15% { transform: translate3d(0, -10px, -5px) rotateX(5deg); }
    20% { transform: translate3d(0, -10px, 5px) rotateX(-5deg); }
    25% { transform: translate3d(0, -10px, -5px) rotateX(5deg); }
    30% { transform: translate3d(0, 0, 0) rotateX(0); }
}

.lid-top,
.lid-left,
.lid-back,
.lid-right,
.lid-front {
    background-color: #ef6191;
    border: 1px solid rgba(0, 0, 0, .2);
    left: -5px;
    opacity: 1;
    position: absolute;
    top: 0;
    width: calc(var(--size) + 10px);
}

.lid-top {
    height: calc(var(--size) + 10px);
    top: -5px;
    transform: translateY(-50%) rotateX(90deg);
    transform-style: preserve-3d;
}

.lid-left,
.lid-back,
.lid-right,
.lid-front {
    height: 40px;
    top: -5px;
    transform-style: preserve-3d;
}

.lid-left { 
    transform: translateX(-50%) rotateY(-90deg); 
}

.lid-back { 
    transform: translateZ(calc(var(--size) / -2 - 5px)) rotateY(180deg); 
}

.lid-right { 
    transform: translateX(50%) rotateY(90deg); 
}

.lid-front { 
    transform: translateZ(calc(var(--size) / 2 + 5px)); 
}

.present:hover .lid {
    animation: none;
    transform: translate3d(0, -40px, -10px) rotateX(10deg);
}

.present.open .name { 
    transform: translate3d(0, -50%, 10px) rotateY(1080deg) rotateX(10deg); 
}

.present.open .instruction { 
    opacity: 0; 
}
    
.present.open .left { 
    transform: translateX(-50%) rotateY(-90deg) rotateX(-90deg); 
}

.present.open .back { 
    transform: translateZ(calc(var(--size) / -2)) rotateY(180deg) rotateX(-90deg); 
}

.present.open .right { 
    transform: translateX(50%) rotateY(90deg) rotateX(-90deg); 
}

.present.open .front { 
    transform: translateZ(calc(var(--size) / 2)) rotateX(-90deg); 
}
    
.present.open .lid {
    animation: none;
    transform: translate3d(0, -120px, -120px) rotateX(50deg);
}
.btn-close-gift {
    position: absolute;
    top: 1rem;
    right: 1rem;
    height: 1em;
    width: 1em;
    background: transparent var(--bs-btn-close-bg) center / 1.5em auto no-repeat;
    z-index: 2000 !important;
}
.text-gift {
    color: #80448A;
}
.spin-item {
    cursor: pointer;
}