.gift-box-container {
  scale: 150%;
  width: 20vh;
  height: 20vh;
  position: fixed;
  display: flex;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  z-index: 100;
  perspective: 40vh;
  -webkit-animation: fly-down 1s ease-in-out;
  animation: fly-down 1s ease-in-out;
}

.gift-box {
  --gift-box-color: #e63946;
  --gift-box-edge-color: #590b11;
  --wrap-color: #f1faee;
  --wrap-ribbon-color: #c0e4e6;
  --wrap-top-color: #d8efef;

  width: 20vh;
  height: 10vh;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transition: transform 1s;
  transition: transform 1s;
  -webkit-animation: rotation-3d 20s infinite linear;
          animation: rotation-3d 20s infinite linear;
}

.box-door {

  width: 20vh;
  transform-style: preserve-3d;

}

.box-body {

  width: 20vh;
  transform-style: preserve-3d;
  justify-content: center;
  display: flex;
}

.gift-box .gift-box__side,
.gift-box .gift-box__end {
  position: absolute;
  width: 20vh;
  height: 20vh;
  border: 2px solid var(--gift-box-edge-color);
}

.gift-box .gift-box-lid__side {
  position: absolute;
  width: 22vh;
  height: 5vh;
  border: 2px solid var(--gift-box-edge-color);
}

.gift-box .gift-box-lid__end {
  position: absolute;
  width: 22vh;
  height: 22vh;
  border: 2px solid var(--gift-box-edge-color);
}

.gift-box .gift-box__side,
.gift-box .gift-box-lid__side {
  background: linear-gradient(to right,
    var(--gift-box-color) 40%,
    var(--wrap-color) 40%,
    var(--wrap-color) 60%,
    var(--gift-box-color) 60%
  );
}
.gift-box .gift-box__end,
.gift-box .gift-box-lid__end {
  background: linear-gradient(to right,
    transparent 40%,
    var(--wrap-top-color) 40%,
    var(--wrap-top-color) 60%,
    transparent 60%
  ),
  linear-gradient(to bottom,
    var(--gift-box-color) 40%,
    var(--wrap-color) 40%,
    var(--wrap-color) 60%,
    var(--gift-box-color) 60%
  );
}

.gift-box .gift-box__side--front { transform: rotateY(0deg) translateZ(10vh); }
.gift-box .gift-box__side--back { transform: rotateY(180deg) translateZ(10vh); }
.gift-box .gift-box__side--left { transform: rotateY(-90deg) translateZ(10vh); }
.gift-box .gift-box__side--right { transform: rotateY(90deg) translateZ(10vh); }
.gift-box .gift-box__side--top { transform: rotateX(90deg) translateZ(10vh); }
.gift-box .gift-box__side--bottom { transform: rotateX(-90deg) translateZ(10vh); }

.gift-box .gift-box-lid__side--front { transform: rotateY(0deg) translateZ(11vh) translateX(-1vh) translateY(-1vh); }
.gift-box .gift-box-lid__side--back { transform: rotateY(180deg) translateZ(11vh) translateX(1vh) translateY(-1vh); }
.gift-box .gift-box-lid__side--left { transform: rotateY(-90deg) translateZ(12vh)  translateY(-1vh); }
.gift-box .gift-box-lid__side--right { transform: rotateY(90deg) translateZ(10vh)  translateY(-1vh); }
.gift-box .gift-box-lid__side--top { transform: rotateX(90deg) translateZ(12vh) translateX(-1vh) translateY(0); }


.gift-box .ribbon-l {
  position: absolute;
  width: 7vh;
  height: 7vh;
  border: 2px solid var(--wrap-ribbon-color);
  border-radius: 50% 50% 0 50%;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transform: rotateX(75deg)
             rotateY(90deg)
             /* use a CSS variable for the translate, defined in CSS */
             translateZ(calc(8vh - var(--gift-box-position)))  
             translateX(-8.5vh)
             translateY(-7.5vh)
             skewY(30deg);
}

.gift-box .ribbon-r {
  position: absolute;
  width: 7vh;
  height: 7vh;
  border: 2px solid var(--wrap-ribbon-color);
  border-radius: 50% 50% 0 50%;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  transform: rotateX(-5deg)
             rotateY(90deg)
             /* use a CSS variable for the translate, defined in CSS */
             translateZ(calc(8vh - var(--gift-box-position)))  
             translateX(-3vh)
             translateY(-11vh)
             skewY(30deg);
}

.ribbon-l-end {
  position: absolute;
  width: 4vh;
  height: 11vh;
  background:
    linear-gradient(45deg, var(--wrap-top-color) 72%, transparent 72%), 
    linear-gradient(-45deg, var(--wrap-top-color) 72%, transparent 72%);
  border: 2px solid var(--gift-box-edge-color);
  border-top: none;
  border-bottom: none;
  transform: rotateX(-70deg) translateX(8vh) translateY(-8vh) translateZ(-6vh);
}

.ribbon-r-end {
  position: absolute;
  width: 4vh;
  height: 11vh;
  background:
    linear-gradient(45deg, var(--wrap-top-color) 72%, transparent 72%), 
    linear-gradient(-45deg, var(--wrap-top-color) 72%, transparent 72%);
  border: 2px solid var(--gift-box-edge-color);
  border-top: none;
  border-bottom: none;
  transform: rotateX(80deg) translateX(8vh) translateY(-8vh) translateZ(6vh);
}


@-webkit-keyframes rotation-3d {
  from {
    transform: translateZ(-10vh) rotateY(50deg) rotateX(-5deg) rotateZ(-30deg)
  }
  to {
    transform: translateZ(-10vh) rotateY(409deg) rotateX(-5deg) rotateZ(-30deg)
  }
}


@keyframes rotation-3d {
  from {
    transform: translateZ(-10vh) rotateY(50deg) rotateX(-5deg) rotateZ(-30deg)
  }
  to {
    transform: translateZ(-10vh) rotateY(409deg) rotateX(-5deg) rotateZ(-30deg)
  }
}


.close {
  -webkit-transition: all 2s ease;  
  -moz-transition: all 2s ease;  
  -o-transition: all 2s ease;  
  -ms-transition: all 2s ease;  
  transition: all 2s ease;
  transform: 0;
  -webkit-animation: closing 3s !important;
}

.open {
  transform: translateX(10vh) rotate(90deg) translateX(18vh) rotate(90deg) translateX(10vh) translateY(-5vh); 
  -webkit-animation: opening 3s !important;
}
  
@keyframes opening {
  0%   { transform: translateY(0vh); }
  50% { transform: translateY(-7vh); }
  100% { transform: translateX(10vh) rotate(90deg) translateX(18vh) rotate(90deg) translateX(10vh) translateY(-7vh); }
}

@keyframes closing {
  0%   { transform: translateX(10vh) rotate(90deg) translateX(18vh) rotate(90deg) translateX(10vh) translateY(-7vh); }
  50% { transform: translateY(-7vh); }
  100% { transform: translateY(0vh); }
}

@-webkit-keyframes fly-down {
  0% {
    transform: translateY(-100vh);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes fly-down {
  0% {
    transform: translateY(-100vh);
  }
  100% {
    transform: translateY(0);
  }
}