:root {
  --height: 20;
  --width: 20;
  --depth: 20;
  --no-of-steps: 12;
  --primary-hue: 260;
  --secondary-hue: 45;
  --bg: hsl(var(--primary-hue), 30%, 90%);
  --primary: hsl(var(--primary-hue), 80%, 50%);
  --secondary: hsl(var(--secondary-hue), 100%, 50%);
  --ribbon-bg: linear-gradient(90deg, var(--secondary) 0 10%, transparent 10% 25%, var(--secondary) 25% 75%, transparent 75% 90%, var(--secondary) 90%);
  --ribbon-bg-rotated: linear-gradient(0deg, var(--secondary) 0 10%, transparent 10% 25%, var(--secondary) 25% 75%, transparent 75% 90%, var(--secondary) 90%);
  --ribbon-width: calc(var(--width) * 0.2vmin);
}
*,
*:after,
*:before {
  box-sizing: border-box;
  transform-style: preserve-3d;
}
body {
  background: var(--bg);
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 100vmin;
  overflow: hidden;
}
input {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.close,
.open {
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: 2;
  transform: scale(var(--scale, 1)) translate3d(0, 0, 50vmin);
  transition: transform 0s var(--reveal-delay, calc(((var(--no-of-steps, 15) + 1) * var(--delay, 0.2)) * 1s));
}
#package:checked ~ .close,
.open {
  --scale: 0;
  --reveal-delay: 0s;
}
#package:checked ~ .open {
  --scale: 1;
  --reveal-delay: calc(((var(--no-of-steps, 15) + 1) * var(--delay, 0.2)) * 1s);
}
#package:checked ~ .scene {
  --packaged: 1;
}
.scene {
  transform: rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -32) * 1deg)) rotateX(90deg) translate3d(0, 0, calc(var(--height, 20) * -0.5vmin));
}
.scene *,
.scene *:after,
.scene *:before {
  --step-delay: calc(var(--step, 1) - ((1 - var(--packaged, 0)) * (var(--step, 1) - ((var(--no-of-steps) + 1) - var(--step, 1)))));
  transition: transform calc(var(--speed, 0.2) * 1s) calc((var(--step-delay) * var(--delay, 0.2)) * 1s) ease-in-out, opacity calc(var(--speed, 0.2) * 1s) calc((var(--step-delay) * var(--delay, 0.2)) * 1s) ease-in-out;
}
.gift {
  height: calc(var(--depth) * 1vmin);
  width: calc(var(--width) * 1vmin);
  background: var(--primary);
}
.gift__gift {
  height: calc(var(--height) * 1vmin);
  width: calc(min(var(--width), var(--depth)) * 1vmin);
  position: absolute;
  bottom: 50%;
  transform-origin: 50% 100%;
  transform: rotateX(-90deg) rotateY(45deg);
}
.gift__gift svg {
  height: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: var(--packaged, 0);
  transform: translate(-50%, -50%) translate(0, calc((1 - var(--packaged, 0)) * var(--height) * -1.25vmin));
}
.gift__ribbon {
  position: absolute;
  height: 50%;
  width: var(--ribbon-width);
  background: var(--ribbon-bg);
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  transform: translate(-50%, 0) rotate(calc(var(--rotate, 0) * 1deg)) translate(0, 100%) scaleY(var(--packaged, 0));
}
.gift__ribbon:nth-of-type(1) {
  --rotate: 0;
}
.gift__ribbon:nth-of-type(2) {
  --rotate: 90;
}
.gift__ribbon:nth-of-type(3) {
  --rotate: 180;
}
.gift__ribbon:nth-of-type(4) {
  --rotate: 270;
}
.gift__label {
  position: absolute;
  height: calc(var(--height) * 0.3vmin);
  width: calc(var(--height) * 0.15vmin);
  background: #fafafa;
  top: 15%;
  left: 10%;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transform-origin: 50% 0;
  transform: scale(var(--packaged, 0));
}
.gift__label:after,
.gift__label:before {
  content: '';
  background: #404040;
  position: absolute;
  height: calc(var(--h, 40) * 1%);
  width: 20%;
  top: 50%;
  left: 50%;
  transform-origin: 50% 100%;
  transform: translate(-50%, -50%) translate(calc(var(--t, -1) * 60%), 0) scaleY(var(--packaged, 0));
}
.gift__label:before {
  --h: 60;
  --t: 1;
}
.gift__lid {
  height: 100%;
  width: 100%;
  transform: scale(1.05) translate3d(0, 0, calc(((var(--height, 0) * (2 - var(--packaged, 0))) * 1vmin) + 4px));
}
.gift__side {
  background: var(--primary);
  filter: brightness(var(--b, 1));
  position: absolute;
  bottom: 50%;
  left: 50%;
  height: calc(var(--height) * 1vmin);
  width: calc(var(--width) * 1vmin);
  transform-origin: 50% 100%;
  transform: translate(-50%, 0) rotate(calc(var(--rotate, 0) * 1deg)) translate(0, calc(var(--offset) * -0.5vmin)) rotateX(calc(var(--packaged, 0) * -90deg));
}
.gift__side:after {
  content: '';
  position: absolute;
  height: 100%;
  transform-origin: 50% 100%;
  width: var(--ribbon-width);
  background: var(--ribbon-bg);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scaleY(var(--packaged, 0));
}
.gift__side--left,
.gift__side--right {
  --offset: var(--width, 20);
  width: calc(var(--depth) * 1vmin);
}
.gift__side--front,
.gift__side--back {
  --offset: var(--depth, 20);
  width: calc(var(--width) * 1vmin);
}
.gift__side--right {
  --b: 0.8;
  --rotate: 0;
}
.gift__side--front {
  --b: 0.85;
  --rotate: 90;
}
.gift__side--left {
  --b: 0.9;
  --rotate: 180;
}
.gift__side--back {
  --b: 0.95;
  --rotate: 270;
}
.gift-lid__side {
  opacity: var(--packaged, 0);
  position: absolute;
  background: var(--primary);
  height: calc(var(--height) * 0.15vmin);
  width: 100%;
  filter: brightness(var(--b, 1));
}
.gift-lid__side:after {
  content: '';
  height: 100%;
  background: var(--ribbon-bg);
  width: var(--ribbon-width);
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 50% 100%;
  transform: translate(-50%, -50%) scaleY(var(--packaged, 0));
}
.gift-lid__side--top {
  --b: 1.1;
  height: 100%;
}
.gift-lid__side--top:after {
  display: none;
}
.gift-lid__side--back {
  --b: 0.8;
  bottom: 100%;
  transform-origin: 50% 100%;
  transform: rotateX(90deg);
}
.gift-lid__side--front {
  --b: 0.85;
  top: 100%;
  transform-origin: 50% 0%;
  transform: rotateX(-90deg);
}
.gift-lid__side--right,
.gift-lid__side--left {
  --b: 0.8;
  height: 100%;
  width: calc(var(--height) * 0.15vmin);
  top: 50%;
  left: 50%;
  transform-origin: 50% 0%;
  transform: translate(-50%, -50%) rotateY(calc(var(--coefficient, 1) * 90deg)) translate3d(0, 0, calc(var(--width) * 0.5vmin)) translate(calc(var(--coefficient, 1) * 50%), 0);
}
.gift-lid__side--right:after,
.gift-lid__side--left:after {
  background: var(--ribbon-bg-rotated);
  width: 100%;
  height: var(--ribbon-width);
  transform-origin: 100% 50%;
  transform: translate(-50%, -50%) scaleX(var(--packaged, 0));
}
.gift-lid__side--left {
  --coefficient: -1;
}
.gift__gift {
  --step: 1;
}
.gift__side--right {
  --step: 2;
}
.gift__side--front {
  --step: 3;
}
.gift__side--left {
  --step: 4;
}
.gift__side--back {
  --step: 5;
}
.gift__lid {
  --step: 6;
}
.gift__side:after {
  --step: 7;
}
.gift-lid__side:after {
  --step: 8;
}
.gift__ribbon {
  --step: 9;
}
.gift__label {
  --step: 10;
}
.gift__label:before {
  --step: 11;
}
.gift__label:after {
  --step: 12;
}