.envelope{perspective:800px}.envelope .top{animation-delay:.8s;animation-duration:1s;animation-fill-mode:forwards;perspective:800;transform-origin:top;transform-style:preserve-3d}.envelope.open .top{animation-name:flip}.envelope .letter{animation-delay:1s;animation-duration:5s;animation-fill-mode:forwards;height:0;left:50%;position:absolute;top:50%;width:0;z-index:2}.envelope.open .letter{animation-name:takeOff}.envelope .letter #designer-canvas{animation-delay:1.5s;animation-duration:5s;animation-fill-mode:forwards;transform:scale(.3) rotate(90deg);translate:50% -50%;width:320px}.envelope.open .letter #designer-canvas{animation-name:scaleLetter}@keyframes takeOff{0%{top:50%;z-index:1}25%{top:-50%}50%{z-index:3}to{top:50%;z-index:3}}@keyframes scaleLetter{0%{transform:scale(.3) rotate(90deg)}50%{transform:scale(.3) rotate(0)}to{transform:scale(1) rotate(0)}}@keyframes flip{to{transform:rotateX(180deg);z-index:1}}@keyframes fold-up{to{transform:rotateX(140deg)}}@keyframes fold-down{to{transform:rotateX(-140deg)}}.box-back{z-index:3}.box-back,.box-front{backface-visibility:hidden;position:absolute;transition:all .8s;translate:50% -50%}.box-front{z-index:2}.box-front,.box.open .box-back{transform:rotateY(180deg)}.box.open .box-front{transform:rotateY(0);z-index:3}