:root {
    --height: 50;
    --width: 50;
    --depth: 50;
    --no-of-steps: 10;
    --primary-hue: 194;
    --secondary-hue: 21;
    --bg: hsl(var(--primary-hue), 30%, 90%);
    --primary: hsl(194deg 9.96% 92.29%);
    --secondary: hsl(var(--secondary-hue), 100%, 50%);
    --ribbon-bg: linear-gradient(90deg, hsl(210.46deg 100% 50%) 0 10%, transparent 10% 25%, hsl(202.67deg 14.23% 69.88%) 25% 75%, transparent 75% 90%, hsl(208.21deg 54.81% 51.54%) 90%);
    --ribbon-bg-rotated: linear-gradient(0deg, hsl(0deg 18.47% 75.07%) 0 10%, transparent 10% 25%, hsl(213.75deg 45.96% 58.02%) 25% 75%, transparent 75% 90%, hsl(205.44deg 58.24% 60.76%) 90%);
    --ribbon-width: calc(var(--width) * 0.2vmin);
  }
  *,
  *:after,
  *:before {
    box-sizing: border-box;
    transform-style: preserve-3d;
  }
  body {
    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;
    background-image: url(https://jiayun-1255449413.cos.ap-guangzhou.myqcloud.com/pc/static/images/test_logo.png);
    top: 15%;
    left: -1%;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background-size: 100% 100%;
    width: 90px;
    height: 90px;
    transform: scaleX(-1);
  }
  /* .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;
  }