:root{--envelope-color: #f5f5f5;--envelope-shadow: rgba(0, 0, 0, .2);--bg-color: #f0ffcc;--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;transform-style:preserve-3d;margin:auto;-webkit-tap-highlight-color:transparent}#envelope-wrapper:not(.is-open){cursor:pointer}#envelope-back,#envelope-top-flap,#envelope-other-flaps{position:absolute;top:0;left:0;width:100%;height:100%;transform:var(--original-position);backface-visibility:hidden}#envelope-front{z-index:4;position:absolute;width:calc(182 / 132 * 100%);height:calc(132 / 182 * 100%);will-change:transform;backface-visibility:hidden;filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2))}#addressee{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;color:#000;font-size:21pt;font-style:italic;pointer-events:none}#envelope-back{z-index:3;filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2))}#envelope-top-flap,#envelope-other-flaps{z-index:1;pointer-events:none}#card{position:absolute;width:calc(178 / 182 * 100%);aspect-ratio:128 / 178;z-index:2;visibility:hidden;transform:var(--original-position);will-change:transform;backface-visibility:hidden}@keyframes envelopeFlip{0%{transform:var(--original-position)}to{transform:rotate3d(1,1,0,0)}}@keyframes envelopeFrontFlip{0%{transform:rotate3d(1,1,0,0)}50%{visibility:hidden;display:none}to{transform:rotate3d(1,1,0,180deg);visibility:hidden;display:none}}@keyframes sendToBack{0%,49.9%{z-index:3}50%,to{z-index:1}}@keyframes bringToFront{0%,49.9%{z-index:1}50%,to{z-index:3}}@keyframes darkenEnvelopeFlapsDuringFlip{0%{filter:brightness(1)}50%{filter:brightness(.9)}to{filter:brightness(1)}}#card svg,#envelope-front svg,#envelope-back svg,#envelope-top-flap svg,#envelope-other-flaps svg{width:100%;height:100%;display:block;overflow:visible}@keyframes openFlap{0%,49.9%{filter:brightness(1);backface-visibility:hidden}50%{filter:brightness(.8);backface-visibility:visible}to{transform:rotateY(180deg);filter:brightness(.98);backface-visibility:visible}}#top-flap{transform-origin:left;transform-box:fill-box}#envelope-wrapper.is-open #top-flap{animation:openFlap var(--flap-open-time) cubic-bezier(.445,.05,.55,.95) var(--flap-open-delay) forwards}@keyframes layerBehind{0%,49.9%{z-index:3}50%,to{z-index:1}}@keyframes slideRight{0%{transform:translate(0)}50%{opacity:1}to{transform:translate(max(200%,200vw));opacity:0;visibility:hidden}}#envelope-wrapper.is-open #envelope-top-flap{animation:envelopeFlip var(--envelope-flip-time) ease-in-out forwards,bringToFront var(--envelope-flip-time) ease-in-out forwards,darkenEnvelopeFlapsDuringFlip var(--envelope-flip-time) cubic-bezier(.445,.05,.55,.95) forwards,layerBehind var(--flap-open-time) cubic-bezier(.445,.05,.55,.95) var(--flap-open-delay) forwards,slideRight var(--envelope-remove-time) ease-in var(--envelope-remove-delay) forwards}#envelope-wrapper.is-open #envelope-other-flaps{animation:envelopeFlip var(--envelope-flip-time) ease-in-out forwards,bringToFront var(--envelope-flip-time) ease-in-out forwards,darkenEnvelopeFlapsDuringFlip var(--envelope-flip-time) cubic-bezier(.445,.05,.55,.95) forwards,slideRight var(--envelope-remove-time) ease-in var(--envelope-remove-delay) forwards}#envelope-wrapper.is-open #envelope-back{animation:envelopeFlip var(--envelope-flip-time) ease-in-out forwards,sendToBack var(--envelope-flip-time) ease-in-out forwards,slideRight var(--envelope-remove-time) ease-in var(--envelope-remove-delay) forwards}#envelope-wrapper.is-open #envelope-front{animation:envelopeFrontFlip var(--envelope-flip-time) ease-in-out forwards}@keyframes makeCardVisible{0%,99.9%{visibility:hidden}to{visibility:visible}}@keyframes slideOut{0%{transform:translate(0);filter:drop-shadow(2px 2px 2px rgba(0,0,0,.2))}30%{transform:translate3d(-15%,0,0);filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2))}60%{transform:translate3d(-7.5%,0,30mm);filter:drop-shadow(11px 11px 15px rgba(0,0,0,.1))}to{transform:translateZ(0);filter:drop-shadow(5px 5px 10px rgba(0,0,0,.2))}}#envelope-wrapper.is-open #card{transform-style:flat;animation:envelopeFlip var(--envelope-flip-time) ease-in-out forwards,makeCardVisible var(--envelope-flip-time) ease-in-out forwards,slideOut var(--card-slide-out-time) ease-in-out var(--card-slide-out-delay) forwards}