.canvas-editor-page .animated-envelope-component{position:relative}.canvas-editor-page .envelope-shadow{width:var(--env-w);height:var(--env-h);pointer-events:none;z-index:0;margin-left:auto;margin-right:auto;position:absolute;top:0}.canvas-editor-page .envelope-shadow:after{content:"";width:calc(var(--env-w) * 1.14);height:25px;top:calc(var(--env-h) + 50px);filter:blur(4px);background:#0003;border-radius:50%;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 0 20px #0003}.canvas-editor-page .envelope-container{width:var(--env-w);height:var(--env-h);background-color:var(--env-color);cursor:pointer;z-index:1;border-bottom-right-radius:6px;border-bottom-left-radius:6px;margin-left:auto;margin-right:auto;transition:transform .3s cubic-bezier(.25,.46,.45,.94);position:absolute;top:0;box-shadow:0 4px 20px #0003}.canvas-editor-page .envelope-container .front{z-index:3;width:0;height:0;position:absolute}.canvas-editor-page .envelope-container .flap{border-left:calc(var(--env-w) / 2) solid transparent;border-right:calc(var(--env-w) / 2) solid transparent;border-bottom:calc(var(--env-h) * .46) solid transparent;border-top:calc(var(--env-h) * .54) solid var(--env-flap);transform-origin:top}.canvas-editor-page .envelope-container.open .flap{z-index:1;transition:transform 1.2s cubic-bezier(.25,.46,.45,.94),z-index 0s linear .5s;transform:rotateX(180deg)}.canvas-editor-page .envelope-container.close .flap{z-index:5;transition:transform .8s cubic-bezier(.25,.46,.45,.94) .8s,z-index 0s linear .8s;transform:rotateX(0)}.canvas-editor-page .envelope-container .pocket{border-left:calc(var(--env-w) / 2) solid var(--env-pocket-side);border-right:calc(var(--env-w) / 2) solid var(--env-pocket-side);border-bottom:calc(var(--env-h) / 2) solid var(--env-pocket-bottom);border-top:calc(var(--env-h) / 2) solid transparent;border-bottom-right-radius:6px;border-bottom-left-radius:6px}.canvas-editor-page .envelope-container .envelope-texture{pointer-events:none;background-image:var(--env-texture);background-repeat:repeat;background-size:var(--env-texture-size);mix-blend-mode:var(--env-texture-blend,multiply);opacity:var(--env-texture-opacity,.55);position:absolute}.canvas-editor-page .envelope-container .envelope-texture-body{z-index:1;border-bottom-right-radius:6px;border-bottom-left-radius:6px;inset:0}.canvas-editor-page .envelope-container .envelope-texture-pocket{clip-path:polygon(0 0,0 100%,100% 100%,100% 0,50% 50%);z-index:4;inset:0}.canvas-editor-page .envelope-container .envelope-texture-flap{width:100%;height:calc(var(--env-h) * .54);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;z-index:6;top:0;left:0}.canvas-editor-page .envelope-container.open .envelope-texture-flap{z-index:1;transition:transform 1.2s cubic-bezier(.25,.46,.45,.94),z-index 0s linear .5s;transform:rotateX(180deg)}.canvas-editor-page .envelope-container.close .envelope-texture-flap{z-index:6;transition:transform .8s cubic-bezier(.25,.46,.45,.94) .8s,z-index 0s linear .8s;transform:rotateX(0)}.canvas-editor-page .envelope-container .wax-seal{top:calc(var(--env-h) * .4);width:calc(var(--env-w) * .13);height:calc(var(--env-w) * .13);z-index:10;background-position:50%;background-repeat:no-repeat;background-size:contain;position:absolute;left:50%;transform:translate(-50%)}.canvas-editor-page .envelope-container .letter{background-color:#fff;border-radius:6px;width:90%;height:90%;margin-left:auto;margin-right:auto;transition:box-shadow .3s;position:relative;top:5%;overflow:hidden;box-shadow:0 2px 26px #0000001f}.canvas-editor-page .envelope-container .letter:after{content:"";pointer-events:none;background-image:linear-gradient(#fff0 25%,#ffe3ef33 75%,#d7e3ef4d 100%);position:absolute;inset:0}.canvas-editor-page .envelope-container.open .letter{transform:translateY(calc(var(--env-h) * -.475));z-index:2;transition:transform 1s cubic-bezier(.25,.46,.45,.94) .5s,z-index .5s;box-shadow:0 4px 30px #0003}.canvas-editor-page .envelope-container.close .letter{z-index:1;transition:transform .6s cubic-bezier(.25,.46,.45,.94) .2s,z-index .2s;transform:translateY(0)}.canvas-editor-page .envelope-container .letter-image{object-fit:cover;border-radius:6px;width:100%;height:100%}.canvas-editor-page .envelope-container .words{background-color:#eeeff0;width:80%;height:14%;position:absolute;left:10%}.canvas-editor-page .envelope-container .words.line1{width:20%;height:7%;top:15%}.canvas-editor-page .envelope-container .words.line2{top:30%}.canvas-editor-page .envelope-container .words.line3{top:50%}.canvas-editor-page .envelope-container .words.line4{top:70%}.canvas-editor-page .envelope-container .hearts{top:calc(var(--env-h) * .55);z-index:2;position:absolute;left:0;right:0}.canvas-editor-page .envelope-container .heart{position:absolute;bottom:0;right:10%}.canvas-editor-page .envelope-container .heart:before,.canvas-editor-page .envelope-container .heart:after{content:"";left:calc(var(--env-w) * .055);width:calc(var(--env-w) * .055);height:calc(var(--env-w) * .088);border-radius:calc(var(--env-w) * .055) calc(var(--env-w) * .055) 0 0;transform-origin:0 100%;background-color:#d00000;position:absolute;top:0;transform:rotate(-45deg)}.canvas-editor-page .envelope-container .heart:after{transform-origin:100% 100%;left:0;transform:rotate(45deg)}.canvas-editor-page .envelope-container.close .heart{opacity:0;animation:none;transform:scale(0)}.canvas-editor-page .envelope-container .heart.a1{--heart-scale:.6;opacity:1;left:12%;transform:scale(.6)}.canvas-editor-page .envelope-container .heart.a2{--heart-scale:1;opacity:1;left:55%;transform:scale(1)}.canvas-editor-page .envelope-container .heart.a3{--heart-scale:.8;opacity:1;left:30%;transform:scale(.8)}.canvas-editor-page .envelope-container .heart.a4{--heart-scale:.7;opacity:1;left:72%;transform:scale(.7)}.canvas-editor-page .envelope-container .heart.a5{--heart-scale:.55;opacity:1;left:42%;transform:scale(.55)}.canvas-editor-page .envelope-container .heart.a6{--heart-scale:.9;opacity:1;left:4%;transform:scale(.9)}.canvas-editor-page .envelope-container.open .heart{animation-name:heartFloat,sideSway,heartScale;animation-timing-function:cubic-bezier(.25,.46,.45,.94),ease-in-out,cubic-bezier(.68,-.55,.265,1.55);animation-direction:normal,alternate,normal;animation-fill-mode:forwards}.canvas-editor-page .envelope-container.open .heart.a1{animation-duration:3.4s,1.7s,.5s;animation-iteration-count:1,2,1;animation-delay:1s}.canvas-editor-page .envelope-container.open .heart.a2{animation-duration:3.7s,1.85s,.5s;animation-iteration-count:1,2,1;animation-delay:1.1s}.canvas-editor-page .envelope-container.open .heart.a3{animation-duration:3.6s,1.2s,.5s;animation-iteration-count:1,3,1;animation-delay:1.4s}.canvas-editor-page .envelope-container.open .heart.a4{animation-duration:3.2s,1.6s,.5s;animation-iteration-count:1,2,1;animation-delay:1.05s}.canvas-editor-page .envelope-container.open .heart.a5{animation-duration:3.2s,1.07s,.5s;animation-iteration-count:1,3,1;animation-delay:1.8s}.canvas-editor-page .envelope-container.open .heart.a6{animation-duration:3.4s,1.7s,.5s;animation-iteration-count:1,2,1;animation-delay:1.6s}@keyframes heartFloat{0%{opacity:1;top:0}50%{opacity:.8}80%{opacity:.3}to{opacity:0;visibility:hidden;top:-600px}}@keyframes sideSway{0%{margin-left:0}50%{margin-left:25px}to{margin-left:50px}}@keyframes heartScale{0%{opacity:0;transform:scale(0)}50%{opacity:.8;transform:scale(1.2)}to{transform:scale(var(--heart-scale,1));opacity:1}}