.envelope-intro[hidden]{display:none}
.envelope-intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--paper);overflow:hidden;transition:opacity .65s ease}
.envelope-scene{position:relative;width:min(78vw,570px);aspect-ratio:3/2;perspective:1200px;transform:translateY(12%);filter:drop-shadow(0 18px 24px #28374725)}
.envelope-back{position:absolute;inset:0;background:#e6dcca}
.envelope-pocket,.envelope-flap{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.envelope-pocket{z-index:3;clip-path:polygon(0 0,2% 6%,42% 55%,42% 66%,50% 68%,58% 66%,58% 55%,98% 6%,100% 0,100% 100%,0 100%)}
.envelope-flap{z-index:4;clip-path:polygon(0 0,100% 0,98% 6%,58% 55%,58% 66%,50% 68%,42% 66%,42% 55%,2% 6%);transform-origin:top center;backface-visibility:hidden;transition:transform 1.1s ease-in-out}
.envelope-letter{position:absolute;inset:8% 9% 5%;z-index:2;background:#fffbf2;border:1px solid var(--line);text-align:center;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:20px;color:var(--ink);transition:transform 1.3s cubic-bezier(.22,.61,.36,1) 1s;box-shadow:0 0 12px #28374712}
.envelope-letter p{font-size:14px;letter-spacing:2px;margin:0}.envelope-letter strong{font-size:clamp(25px,5vw,44px);font-weight:400;font-style:italic;line-height:1.05}.envelope-letter em{font-size:.6em;color:var(--gold)}.envelope-letter span{font-size:18px;color:var(--gold)}
.envelope-intro.is-opening .envelope-flap{transform:rotateX(180deg)}
.envelope-intro.is-opening .envelope-letter{transform:translateY(-68%)}
.envelope-intro.is-finished{opacity:0;pointer-events:none}
.envelope-skip{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);border:0;border-bottom:1px solid var(--gold);background:transparent;color:var(--ink);font:16px Georgia,serif;padding:12px;cursor:pointer;white-space:nowrap}
.envelope-skip:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
body.envelope-active{overflow:hidden}
@media(max-height:500px){.envelope-scene{width:min(52vw,340px);transform:translateY(20%)}}
@media(prefers-reduced-motion:reduce){.envelope-intro{display:none}}