:root{--color-env:#ebd851;--color-env2:#e4d03c;--color-flap:#d3bc11;--env-border-radius:.375rem;--env-width:14rem;--env-height:8rem}.invite{border:1px solid #d3bc11;border-radius:3rem;margin:3rem;padding:3rem}.envelope{width:var(--env-width);height:var(--env-height);border-bottom-left-radius:var(--env-border-radius);border-bottom-right-radius:var(--env-border-radius);background-color:var(--color-flap);cursor:pointer;margin-left:auto;margin-right:auto;position:relative;top:5rem;box-shadow:0 4px 20px #0003}.envelope.open .flap{z-index:1;transition:transform .4s,z-index .6s;transform:rotateX(180deg)}.envelope.close .flap{z-index:5;transition:transform .4s .6s,z-index 1s;transform:rotateX(0)}.envelope.close .letter{z-index:1;transition:transform .4s,z-index 1s;transform:translateY(0)}.envelope.open .letter{transform:translateY(calc(var(--env-height) / -3));z-index:2;transition:transform .4s .6s,z-index .6s}.envelope .front{z-index:3;width:0;height:0;position:absolute}.envelope .front.flap{border-left:calc(var(--env-width) / 2) solid transparent;border-right:calc(var(--env-width) / 2) solid transparent;border-bottom:calc(var(--env-height) / 2 - 8px) solid transparent;border-top:calc(var(--env-height) / 2 + 8px) solid var(--color-flap);transform-origin:top;pointer-events:none}.envelope .front.pocket{border-left:calc(var(--env-width) / 2) solid var(--color-env);border-right:calc(var(--env-width) / 2) solid var(--color-env);border-bottom:calc(var(--env-height) / 2) solid var(--color-env2);border-top:calc(var(--env-height) / 2) solid transparent;border-bottom-left-radius:var(--env-border-radius);border-bottom-right-radius:var(--env-border-radius)}.envelope .letter{border-radius:var(--env-border-radius);background-color:#fff;width:90%;height:90%;margin-left:auto;margin-right:auto;position:relative;top:5%;box-shadow:0 2px 26px #0000001f}.envelope .letter:after{content:"";background-image:linear-gradient(#fff0 25%,#d7e3efb3 55%,#d7e3ef 100%);position:absolute;inset:0}.envelope .letter .words{background-color:#eeeff0;width:80%;height:14%;position:absolute;left:10%}.envelope .letter .words.line1{width:20%;height:7%;top:15%}.envelope .letter .words.line2{top:30%}.envelope .letter .words.line3{top:50%}.envelope .letter .words.line4{top:70%}.a1{opacity:1;animation-name:slideUp,sideSway;animation-duration:4s,2s;animation-timing-function:linear,ease-in-out;animation-iteration-count:1,4;animation-direction:normal,alternate;animation-play-state:running,running;animation-delay:.7s;animation-fill-mode:forwards,forwards;animation-timeline:auto,auto;left:20%;transform:scale(.6)}.a2{opacity:1;animation-name:slideUp,sideSway;animation-duration:5s,4s;animation-timing-function:linear,ease-in-out;animation-iteration-count:1,2;animation-direction:normal,alternate;animation-play-state:running,running;animation-delay:.7s;animation-fill-mode:forwards,forwards;animation-timeline:auto,auto;left:55%;transform:scale(1)}.a3{opacity:1;animation-name:slideUp,sideSway;animation-duration:7s,2s;animation-timing-function:linear,ease-in-out;animation-iteration-count:1,6;animation-direction:normal,alternate;animation-play-state:running,running;animation-delay:.7s;animation-fill-mode:forwards,forwards;animation-timeline:auto,auto;left:10%;transform:scale(.8)}@keyframes slideUp{0%{top:0}to{top:-600px}}@keyframes sideSway{0%{margin-left:0}to{margin-left:50px}}