.envelop{aspect-ratio:1/.82;perspective:1400px;position:relative;container-type:inline-size}.envelop__rig{--w:80cqi;--u:calc(var(--w) / 100);--open:1;--brief:0;--flip:0;--lift:0;--stempel:0;--weg:0;--papier:linear-gradient(160deg, #ffffff12, #fff0 45%, #00000038), linear-gradient(rgb(var(--world-light-rgb) / .1), rgb(var(--world-light-rgb) / .02)), #343432;--voering:repeating-linear-gradient(135deg, rgb(var(--world-light-rgb) / .09) 0 calc(var(--u) * 1.1), transparent 0 calc(var(--u) * 2.6)), linear-gradient(#00000059, #0000), #161616;width:var(--w);height:calc(var(--u) * 66);transform-style:preserve-3d;opacity:calc(1 - var(--weg));transform:translate(-50%, -50%) rotateX(calc(36deg + var(--px,0deg))) rotateY(var(--py,0deg)) rotateZ(-7deg) translate3d(calc(var(--weg) * var(--u) * 80), calc(var(--weg) * var(--u) * -60), calc(var(--weg) * var(--u) * 40)) rotateZ(calc(var(--weg) * -12deg));position:absolute;top:60%;left:50%}.envelop__rig[data-stand=verstuurd]{--open:0;--flip:1;--stempel:1}.envelop__rig :is(div,i){display:block;position:absolute}.envelop__schaduw{inset:calc(var(--u) * -3) calc(var(--u) * -4);transform:translateZ(calc(var(--u) * -1.5));opacity:calc(1 - var(--lift) * .6);background:radial-gradient(closest-side,#000000bf,#0000);border-radius:50%}.envelop__lijf{transform-style:preserve-3d;transform:translateZ(calc(var(--lift) * var(--u) * 14)) rotateY(calc(var(--flip) * 180deg));inset:0}.envelop__lijf>*,.envelop__klep>*{backface-visibility:hidden}.envelop__binnen{inset:calc(var(--u) * .6) calc(var(--u) * 1) calc(var(--u) * 2);border-radius:calc(var(--u) * 1);background:var(--voering)}.envelop__rig .envelop__brief{left:calc(var(--u) * 6);top:calc(var(--u) * 4);width:calc(var(--u) * 88);height:calc(var(--u) * 58);align-items:center;gap:calc(var(--u) * 2);padding:calc(var(--u) * 6) calc(var(--u) * 10) calc(var(--u) * 4);text-align:center;color:#1a1a1a;border-radius:calc(var(--u) * .6);transform:translateZ(calc(var(--u) * .6)) translateY(calc(var(--brief) * var(--u) * -64));background:linear-gradient(155deg, rgb(var(--world-light-rgb) / .1), transparent 55%), linear-gradient(170deg, #f4f3ef, #dedbd3);box-shadow:0 calc(var(--u) * .6) calc(var(--u) * 2) #0006;flex-direction:column;display:flex}.envelop__onderwerp{font-family:var(--font-mono);font-size:calc(var(--u) * 2.6);letter-spacing:.14em;text-transform:uppercase;color:#6b6964;font-weight:500}.envelop__regel{max-width:100%;font-family:var(--font-body);font-size:calc(var(--u) * 4);overflow-wrap:anywhere;text-wrap:balance;font-weight:500;line-height:1.3}.envelop__groet{font-family:var(--font-body);font-size:calc(var(--u) * 3.4);color:#4a4844;margin-top:auto}.envelop__zak{transform:translateZ(calc(var(--u) * 1.2));clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);background:linear-gradient(#ffffff0f, #fff0 30%), var(--papier);inset:0}.envelop__klep{transform-origin:50% 0;width:100%;height:56%;transform-style:preserve-3d;transform:translateZ(calc((.2 + (1 - var(--open)) * 1.6) * var(--u))) rotateX(calc(var(--open) * 180deg));top:0;left:0}.envelop__klep-buiten{clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(#ffffff1a, #fff0 40%), var(--papier);inset:0}.envelop__klep-binnen{clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--voering);inset:0;transform:rotateX(180deg)}.envelop__voor{transform:translateZ(calc(var(--u) * -.3)) rotateY(180deg);border-radius:calc(var(--u) * 1);background:var(--papier);inset:0;box-shadow:inset 0 0 0 1px #ffffff0f}.envelop__rig .envelop__adres{left:calc(var(--u) * 34);top:calc(var(--u) * 34);gap:calc(var(--u) * .8);font-family:var(--font-body);font-size:calc(var(--u) * 4);color:#e4e1da;flex-direction:column;line-height:1.2;display:flex}.envelop__adres span:nth-child(2){font-family:var(--font-display);letter-spacing:-.01em;font-weight:700}.envelop__rig .envelop__zegel{right:calc(var(--u) * 6);top:calc(var(--u) * 6);width:calc(var(--u) * 15);height:calc(var(--u) * 18);color:rgb(var(--world-rgb));--tand:calc(var(--u) * 2.4);background:linear-gradient(rgb(var(--world-light-rgb) / .14), rgb(var(--world-light-rgb) / .04)), #f1efe9;box-shadow:inset 0 0 0 calc(var(--u) * 1.4) #f1efe9, inset 0 0 0 calc(var(--u) * 1.6) #0000001f;-webkit-mask:radial-gradient(circle closest-side, transparent 92%, #000) calc(var(--tand) / -2) calc(var(--tand) / -2) / var(--tand) var(--tand) round, linear-gradient(#000, #000) center / calc(100% - var(--tand)) calc(100% - var(--tand)) no-repeat;mask:radial-gradient(circle closest-side, transparent 92%, #000) calc(var(--tand) / -2) calc(var(--tand) / -2) / var(--tand) var(--tand) round, linear-gradient(#000, #000) center / calc(100% - var(--tand)) calc(100% - var(--tand)) no-repeat;justify-content:center;align-items:center;display:flex}.envelop__icoon{width:calc(var(--u) * 9);display:flex}.envelop__icoon svg{width:100%;height:auto}.envelop__golven{right:calc(var(--u) * 26);top:calc(var(--u) * 11);width:calc(var(--u) * 24);height:calc(var(--u) * 9);opacity:calc(var(--stempel) * .7);background:repeating-linear-gradient(rgb(var(--world-rgb) / .85) 0 calc(var(--u) * .45), transparent 0 calc(var(--u) * 2.15));-webkit-mask:linear-gradient(90deg,#0000,#000 40%);mask:linear-gradient(90deg,#0000,#000 40%)}.envelop__rig .envelop__stempel{right:calc(var(--u) * 13);top:calc(var(--u) * 6);width:calc(var(--u) * 21);height:calc(var(--u) * 21);justify-content:center;align-items:center;gap:calc(var(--u) * .8);color:rgb(var(--world-rgb));border:calc(var(--u) * .5) solid rgb(var(--world-rgb) / .85);opacity:var(--stempel);transform:rotate(-14deg) scale(calc(1.5 - var(--stempel) * .5));border-radius:50%;flex-direction:column;display:flex}.envelop__stempel-woord{font-family:var(--font-mono);font-size:calc(var(--u) * 2.3);letter-spacing:.12em;text-transform:uppercase;font-weight:500}.envelop__stempel-datum{font-family:var(--font-mono);font-size:calc(var(--u) * 2.1);letter-spacing:.08em;text-transform:uppercase}.verstuurd-envelop{max-width:440px}.envelop__rig:is([data-intro=pending],[data-intro=running]){--open:1;--brief:1;--flip:0;--stempel:0}.envelop__rig[data-intro=pending] [data-el=brief]{opacity:0}.envelop__rig[data-intro=pending]{animation:0s linear 4s forwards envelop-failsafe}@keyframes envelop-failsafe{to{--open:0;--brief:0;--flip:1;--stempel:1}}@media (prefers-reduced-motion:reduce){.envelop__rig[data-intro=pending]{--open:0;--brief:0;--flip:1;--stempel:1;animation:none}}