:root{--ink:#111;--env-back:#8f7350;--env-side:#e2d3b4;--env-bottom:#e9dcc0;--env-flap:#efe4cb;--wax:#7d1622;--cream:#f1e6cf}*{box-sizing:border-box;margin:0}html,body,#root{height:100%}body{background:#1c120c;font-family:Cormorant Garamond,Georgia,serif;overflow:hidden}.scene{flex-direction:column;justify-content:center;align-items:center;gap:44px;height:100dvh;display:flex;position:relative;overflow:hidden}.scene:before,.scene:after{content:"";pointer-events:none;position:absolute;inset:0}.scene:before{filter:sepia(.35)saturate(.85)brightness(.62)contrast(1.05);background:radial-gradient(#0000 30%,#0f0804d9 100%),url(./persephone-eCa7hYAF.jpg) 50% 30%/cover}.scene:after{z-index:2;opacity:.22;mix-blend-mode:overlay;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.caption{z-index:1;color:var(--cream);opacity:.6;text-align:right;font-size:.95rem;font-style:italic;position:absolute;bottom:14px;left:16px;right:16px}.envelope{aspect-ratio:3/2;cursor:pointer;perspective:1000px;-webkit-tap-highlight-color:transparent;background:0 0;border:0;width:min(420px,84vw);margin-top:16vh;padding:0;animation:3.4s ease-in-out infinite bob;position:relative}.envelope:focus-visible{outline:2px dashed var(--cream);outline-offset:14px;border-radius:8px}.envelope:disabled{cursor:default}@keyframes bob{50%{transform:translateY(-8px)rotate(-1deg)}}.env-back,.peek,.pocket,.pocket i,.flap,.flap i,.seal{position:absolute}.env-back{background:linear-gradient(#6f5638, var(--env-back) 65%);border-radius:5px;inset:0;box-shadow:0 30px 50px -14px #0a0500b3,0 4px 10px #0a05004d}.peek{z-index:2;height:86%;color:var(--ink);text-align:center;background:url(./paper-B8rA-gnK.jpg) 50%/cover;border-radius:3px;padding-top:9%;font:clamp(.95rem,4vw,1.15rem)/1 Special Elite,Courier New,monospace;transition:transform 1.2s cubic-bezier(.25,.8,.25,1);top:7%;left:6%;right:6%;box-shadow:0 1px 3px #0003}.out .peek{transform:translateY(-54%)}.pocket{z-index:3;filter:drop-shadow(0 -1px 2px #3c281459);inset:0}.pocket i{background-blend-mode:multiply;background:url(./paper-B8rA-gnK.jpg) 50%/cover;inset:0}.pocket .left{background-color:var(--env-side);clip-path:polygon(0 0,52% 54%,0 100%)}.pocket .right{background-color:var(--env-side);clip-path:polygon(100% 0,48% 54%,100% 100%)}.pocket .bottom{background-color:var(--env-bottom);clip-path:polygon(0 100%,50% 46%,100% 100%)}.flap{z-index:4;transform-origin:top;filter:drop-shadow(0 3px 3px #3c281466);height:57%;transition:transform .75s cubic-bezier(.45,.05,.3,1),z-index 0s .37s;inset:0 0 auto}.flap i{background:var(--env-flap) url(./paper-B8rA-gnK.jpg) center / cover;background-blend-mode:multiply;clip-path:polygon(0 0,100% 0,50% 100%);transition:filter .75s;inset:0}.open .flap{z-index:1;transform:rotateX(180deg)}.open .flap i{filter:brightness(.88)}.seal{z-index:5;background:radial-gradient(circle at 35% 30%, #b8323f, var(--wax) 55%, #4a0a12);color:#4f0b14;text-shadow:0 1px #ffffff4d,0 -1px #00000059;border-radius:48% 52% 45% 55%/55% 45% 52% 48%;place-items:center;width:54px;height:54px;font:italic 600 28px/1 Cormorant Garamond,Georgia,serif;transition:transform .4s,opacity .4s;display:grid;top:57%;left:50%;transform:translate(-50%,-50%);box-shadow:0 3px 6px #1e000580,inset 0 -3px 5px #00000040,inset 0 2px 3px #ffffff40}.seal:after{content:"";border:1.5px solid #0000002e;border-radius:50%;position:absolute;inset:7px;box-shadow:0 1px #ffffff26}.open .seal{opacity:0;transform:translate(-50%,-50%)scale(1.35)}.hint{color:var(--cream);letter-spacing:.03em;text-shadow:0 1px 10px #000c;font-size:1.35rem;font-style:italic;transition:opacity .4s;animation:2.4s ease-in-out infinite pulse;position:relative}.open .hint{opacity:0}@keyframes pulse{50%{transform:scale(1.05)}}.reading .envelope{pointer-events:none;animation:.9s cubic-bezier(.5,0,.75,0) forwards sink}@keyframes sink{to{opacity:0;transform:translateY(45vh)rotate(-8deg)scale(.8)}}.overlay{z-index:10;background:#0f080480;padding:40px 16px;animation:1.4s both dim;display:flex;position:fixed;inset:0;overflow-y:auto}@keyframes dim{0%{background-color:#0000}}.letter{width:min(680px,100%);color:var(--ink);text-shadow:0 0 1px #0000004d;background:linear-gradient(#0000 32.8%,#785a3c1a 33.2%,#ffffff59 33.5%,#0000 34.2% 65.8%,#785a3c1a 66.2%,#ffffff59 66.5%,#0000 67.2%),url(./paper-B8rA-gnK.jpg) 50%/cover;border-radius:3px;margin:auto;padding:clamp(32px,7vw,68px) clamp(26px,7vw,76px) clamp(36px,7vw,64px);font:clamp(1rem,.85rem + .5vw,1.2rem)/1.75 Special Elite,Courier New,monospace;animation:1.2s cubic-bezier(.2,.8,.2,1) .25s both rise;position:relative;box-shadow:0 1px 2px #0000004d,0 40px 80px -20px #000c}@keyframes rise{0%{opacity:0;transform:translateY(12vh)scale(.55)rotate(-2deg)}40%{opacity:1}to{opacity:1;transform:none}}.letter h1{font:inherit;margin-bottom:1em;font-size:1.15em}.letter p{margin-bottom:.9em}.letter .sign{text-align:right;margin:1.6em 0 0}.letter .name{font-size:1.15em}.word{opacity:0;animation:.15s ease-out forwards ink;display:inline-block}@keyframes ink{0%{opacity:0;transform:translateY(-1px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;transition-delay:0s!important;animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}