/* A tactile, self-contained prelude to the existing letter reader. */
#love-letter.envelope-mode{width:min(760px,calc(100% - 24px));height:min(740px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);border:1px solid #abc0a44d;background:radial-gradient(ellipse at 50% 40%,#41634d,#17382c 78%);color:#fff5db}
#letter-envelope{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:40px 20px 28px;position:relative;isolation:isolate;--seal-strain:0;--paper-pull:0}
#letter-envelope[hidden],#letter-scroll[hidden]{display:none!important}
#envelope-close{position:absolute;right:14px;top:12px;border:0;border-radius:50%;width:44px;height:44px;background:#ffffff0d;color:#e9ead8;font:28px/1 Georgia;z-index:12}
#love-letter #envelope-title{font:italic 400 clamp(25px,5vw,36px)/1.2 var(--serif);letter-spacing:-.02em;margin:15px 0 0;color:#f1e8cc;text-align:center;max-width:23ch}
.envelope-space{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;padding:100px 0 50px;min-height:0;perspective:1000px}
#envelope-shell{position:relative;width:min(440px,88%);aspect-ratio:1.55;flex-shrink:0;filter:drop-shadow(0 22px 20px #061d1770)}
.envelope-back{position:absolute;inset:0;border-radius:6px;background:linear-gradient(145deg,#c7bda1,#e9dec2);box-shadow:inset 0 0 0 1px #7c765c55}
.envelope-lining{position:absolute;inset:5px;border-radius:3px;background:repeating-linear-gradient(45deg,#7f927e 0 1px,#91a18b 1px 8px);opacity:.7}
#envelope-paper{position:absolute;inset:7% 6% 4%;width:88%;border:1px solid #d6ceb9;border-radius:3px;padding:20px 10px;background:linear-gradient(110deg,#fffdf3,#f4eddc);color:#35503d;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;box-shadow:0 -3px 10px #4e4a3020;transform:translateY(0);transition:transform .75s cubic-bezier(.22,1,.36,1);touch-action:none;user-select:none;cursor:grab}
#envelope-paper:active,#envelope-seal:active{cursor:grabbing}
.paper-monogram{font:italic 32px var(--serif);color:#7b896c;line-height:1}
.paper-greeting{font:italic 22px var(--serif)}
.paper-lines{width:72%;height:70px;background:repeating-linear-gradient(transparent 0 16px,#b1b59b55 16px 17px);opacity:.7}
.paper-grip{position:absolute;top:8px;width:28px;height:3px;border-radius:4px;background:#71836970}
.envelope-pocket{position:absolute;inset:0;border-radius:4px;z-index:4;pointer-events:none;background:linear-gradient(33deg,#ded1b3 49.6%,transparent 50%) left/50.1% 100% no-repeat,linear-gradient(-33deg,#e6dabe 49.6%,transparent 50%) right/50.1% 100% no-repeat}
.envelope-pocket:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#f0e5ca,#e9dbba);clip-path:polygon(0 100%,0 94%,50% 45%,100% 94%,100% 100%);border-radius:4px}
.envelope-flap{position:absolute;inset:0;z-index:6;transform-origin:50% 0;transform:rotateX(0);transition:transform .85s cubic-bezier(.22,1,.36,1),z-index 0s .3s;pointer-events:none;backface-visibility:visible}
.envelope-flap:before{content:"";position:absolute;inset:0;background:linear-gradient(170deg,#f7edd4,#dfcfa9);clip-path:polygon(0 0,100% 0,50% 57%);filter:drop-shadow(0 2px 1px #5d4b2c40)}
.envelope-address{position:absolute;z-index:5;top:70%;left:5%;right:5%;text-align:center;pointer-events:none;color:#3e5340}
.envelope-address small{display:block;font:italic 13px/1.2 var(--serif);letter-spacing:.02em}
.envelope-address strong{display:block;font:italic 400 clamp(25px,5vw,36px)/1.2 var(--serif)}
.envelope-from{position:absolute;left:6%;bottom:5%;z-index:5;color:#67715a;font:italic 13px var(--serif);pointer-events:none}
#envelope-seal{position:absolute;z-index:8;left:50%;top:50%;translate:-50% -50%;width:76px;height:76px;padding:0;border:0;background:none;border-radius:50%;touch-action:none;user-select:none;cursor:grab;transform:rotate(calc(var(--seal-strain)*-12deg)) scale(calc(1 + var(--seal-strain)*.08));transition:transform .3s,opacity .45s;filter:drop-shadow(0 5px 4px #44392360)}
.wax-half{position:absolute;inset:0;border-radius:45% 50% 46% 48%;background:radial-gradient(circle at 30% 25%,#b16656,#8a4035 55%,#6d2e28);box-shadow:inset 1px 2px 2px #f6c6a975,inset -2px -3px 3px #4b211a;transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .5s}
.wax-half:before{content:"";position:absolute;inset:8px;border:1px solid #e3a38570;border-radius:50%;box-shadow:inset 1px 1px 2px #4a231f90}
.wax-half:after{content:"W";position:absolute;inset:0;display:grid;place-items:center;font:italic 32px Georgia;color:#eac7a2;text-shadow:0 1px 1px #371511}
.wax-left{clip-path:polygon(0 0,53% 0,43% 29%,57% 46%,43% 65%,51% 100%,0 100%)}
.wax-right{clip-path:polygon(53% 0,100% 0,100% 100%,51% 100%,43% 65%,57% 46%,43% 29%)}
#letter-envelope[data-phase="open"] .envelope-flap{transform:rotateX(180deg);z-index:1}
#letter-envelope[data-phase="open"] #envelope-paper{transform:translateY(calc(-23% - var(--paper-pull)*65%));transition-delay:.15s}
#letter-envelope[data-phase="open"] #envelope-seal{pointer-events:none;opacity:0;transition-delay:.3s}
#letter-envelope[data-phase="open"] .wax-left{transform:translate(-24px,30px) rotate(-32deg);opacity:0}
#letter-envelope[data-phase="open"] .wax-right{transform:translate(26px,38px) rotate(28deg);opacity:0}
#letter-envelope.is-dragging #envelope-seal,#letter-envelope.is-dragging #envelope-paper{transition:none}
#love-letter #envelope-hint{font:italic 18px/1.45 var(--serif);text-align:center;color:#e5e3c9;margin:0;max-width:30ch;min-height:52px}
.envelope-keyboard{font:14px/1.4 var(--serif);color:#c3ceb8;position:absolute;bottom:8px;opacity:0}
#letter-envelope:has(:focus-visible) .envelope-keyboard{opacity:1}
#letter-scroll:not([hidden]){animation:letter-arrive .65s ease-out both}
@keyframes letter-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#envelope-seal:focus-visible,#envelope-paper:focus-visible,#envelope-close:focus-visible{outline:2px solid #f6e9b7;outline-offset:6px}
@media(max-width:500px){#letter-envelope{padding:40px 8px 30px}.envelope-space{padding-bottom:45px}#envelope-shell{width:94%}#envelope-seal{width:65px;height:65px}.envelope-address{top:70%}.envelope-from{font-size:11px;bottom:4%}#love-letter #envelope-hint{font-size:17px}.paper-greeting{font-size:18px}.paper-monogram{font-size:25px}#envelope-paper{gap:8px;padding-top:17px}}
@media(max-height:600px){#letter-envelope{padding-top:8px;padding-bottom:18px}#love-letter #envelope-title{font-size:23px;margin-top:6px}.envelope-space{padding-top:54px;padding-bottom:16px}#envelope-shell{width:min(340px,70%)}#love-letter #envelope-hint{min-height:40px;font-size:15px}.envelope-address strong{font-size:25px}#envelope-seal{width:56px;height:56px}.envelope-keyboard{font-size:12px;bottom:3px}}
@media(prefers-reduced-motion:reduce){#letter-envelope *,#letter-scroll:not([hidden]){animation:none!important;transition:none!important}}

#letter-envelope[data-phase="sealed"] #envelope-paper,#letter-envelope[data-phase="sealed"] .envelope-lining{visibility:hidden}
@media(max-width:500px){#love-letter.envelope-mode{height:min(650px,calc(100dvh - 24px))}}

/* Only the envelope is visible over the modal backdrop; retain accessible guidance. */
#love-letter.envelope-mode{border:0;background:transparent;box-shadow:none}
#letter-envelope{padding:90px 20px 20px}
#letter-envelope .envelope-space{padding:0;align-items:center}
#letter-envelope #envelope-title,#letter-envelope #envelope-hint,#letter-envelope .envelope-keyboard{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:500px){#letter-envelope{padding:90px 8px 20px}}
@media(max-height:600px){#letter-envelope{padding:72px 8px 8px}}