:root{--envelope-color: #f5f5f5;--envelope-shadow: rgba(0, 0, 0, .2);--bg-color: #ffed93;--envelope-flip-time: .8s;--flap-open-delay: calc(var(--envelope-flip-time) - .2s);--flap-open-time: .6s;--envelope-remove-delay: calc(var(--flap-open-delay) + var(--flap-open-time) + .4s);--envelope-remove-time: 1.4s;--card-slide-out-delay: calc(var(--envelope-remove-delay) + .2s);--card-slide-out-time: 3.2s;--original-position: rotate3d(1, 1, 0, 180deg)}::selection{background-color:#fff2b3;color:#000}body,html{margin:0;padding:0;width:100%;min-height:100%;overflow-x:hidden;overflow-y:auto;font-family:EB Garamond,serif;background-color:var(--bg-color)}#container{width:100%;min-height:100vh;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box}#envelope-wrapper{position:relative;width:85vw;max-width:500px;aspect-ratio:132 / 182;display:flex;justify-content:center;align-items:center;perspective:500mm;margin:auto;-webkit-tap-highlight-color:transparent;overflow:visible}#envelope-wrapper.idle{cursor:pointer}#envelope-back,#envelope-top-flap,#envelope-other-flaps{position:absolute;width:100%;aspect-ratio:132 / 182;pointer-events:none;will-change:transform}#envelope-top-flap{backface-visibility:visible}#envelope-back,#envelope-other-flaps{backface-visibility:hidden}#envelope-front{position:absolute;width:100%;height:100%;will-change:transform;backface-visibility:hidden;filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2));display:flex;justify-content:center;align-items:center}#addressee{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;color:#000;font-size:18pt;font-style:italic;pointer-events:none}#envelope-back{filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2))}#card{position:absolute;width:calc(178 / 182 * 100%);aspect-ratio:128 / 178;will-change:transform;backface-visibility:hidden;margin:auto}#envelope-back svg,#envelope-top-flap svg,#envelope-other-flaps svg,#envelope-front svg,#card svg{width:100%;height:100%}#envelope-back,#envelope-top-flap,#envelope-other-flaps,#envelope-front,#card{visibility:hidden}.idle #envelope-back,.idle #envelope-top-flap,.idle #envelope-other-flaps,.idle #card{transform:rotate3d(1,1,0,-180deg)}.idle #envelope-front{visibility:visible}@keyframes jiggle{0%,60%,78%,to{transform:rotate(0)}63%{transform:rotate(3deg)}66%{transform:rotate(-1.5deg)}69%{transform:rotate(.75deg)}72%{transform:rotate(-.375deg)}73.5%{transform:rotate(.1875)}}.idle #envelope-front{animation:jiggle 4s ease-in-out infinite}@keyframes makeVisible50{0%,49.9%{visibility:hidden}50%,to{visibility:visible}}@keyframes makeHidden50{0%,49.9%{visibility:visible}50%,to{visibility:hidden}}@keyframes envelopeFlip{0%{transform:rotate3d(1,1,0,-180deg)}to{transform:rotate3d(1,1,0,0)}}@keyframes envelopeFrontFlip{0%{transform:rotate3d(1,1,0,0) scale(1)}to{transform:rotate3d(1,1,0,180deg) scale(calc(182/132))}}.state-flipping #envelope-back,.state-flipping #envelope-top-flap,.state-flipping #envelope-other-flaps,.state-flipping #card{animation:envelopeFlip var(--envelope-flip-time) ease-in-out forwards,makeVisible50 var(--envelope-flip-time) ease-in-out forwards}.state-flipping #card{animation:envelopeFlip var(--envelope-flip-time) ease-in-out forwards,}.state-flipping #envelope-front{animation:envelopeFrontFlip var(--envelope-flip-time) ease-in-out forwards,makeHidden50 var(--envelope-flip-time) ease-in-out forwards}.state-flipped #envelope-front,.state-flipped #card{visibility:hidden}.state-flipped #envelope-back,.state-flipped #envelope-top-flap,.state-flipped #envelope-other-flaps{visibility:visible}.state-flipped #envelope-back,.state-flipped #envelope-top-flap,.state-flipped #envelope-other-flaps,.state-flipped #envelope-front,.state-flipped #card{transform:rotate3d(1,1,0,0)}.state-flipped #envelope-front{visibility:hidden;pointer-events:none}.state-opening #envelope-back,.state-opening #envelope-top-flap,.state-opening #envelope-other-flaps,.state-opening #card{visibility:visible}.state-opening #envelope-back{z-index:1}.state-opening #card{z-index:2}.state-opening #envelope-other-flaps{z-index:3}.state-opening #envelope-top-flap{z-index:4}@keyframes openFlap{0%{transform:rotateY(0)}to{transform:rotateY(180deg)}}.state-opening #envelope-top-flap{transform-origin:left center;animation:openFlap var(--flap-open-time) cubic-bezier(.445,.05,.55,.95) forwards}.state-extracting #envelope-back,.state-extracting #envelope-top-flap,.state-extracting #envelope-other-flaps,.state-extracting #card{visibility:visible}.state-extracting #envelope-back{z-index:1}.state-extracting #card{z-index:2}.state-extracting #envelope-other-flaps{z-index:3}.state-extracting #envelope-top-flap{z-index:1}.state-extracting #top-flap{transform:rotateY(180deg)}@keyframes slideRight{0%{transform:translate(0);opacity:1}50%{opacity:1}99.9%{transform:translate(200vw) scale(1)}to{transform:translate(200vw) scale(0);opacity:0;visibility:hidden}}@keyframes slideOut{0%{transform:rotate3d(1,1,0,0);filter:drop-shadow(2px 2px 2px rgba(0,0,0,.2))}30%{transform:rotate3d(1,1,0,0) translate3d(-15%,0,0);filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2))}60%{transform:rotate3d(1,1,0,0) translate3d(-7.5%,0,30mm);filter:drop-shadow(11px 11px 15px rgba(0,0,0,.1))}to{transform:rotate3d(1,1,0,0) translateZ(0);filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2))}}.state-extracting #envelope-back,.state-extracting #envelope-top-flap,.state-extracting #envelope-other-flaps,.state-extracting #envelope-front{animation:slideRight var(--envelope-remove-time) ease-in forwards}.state-extracting #card{animation:slideOut var(--card-slide-out-time) ease-in-out forwards}