/* Tactile, deliberately opened stationery. Native content remains visible without JS. */
.greet{--envelope:#eee8dc;--envelope-edge:#d7cfc0;--envelope-ink:#302b25;--envelope-texture:url(assets/paper.webp);--object-ease:cubic-bezier(.22,.75,.2,1)}
.greet-cool,.greet-classic{--envelope:#262d34;--envelope-edge:#111920;--envelope-ink:#eef3f6;--envelope-texture:url(assets/metal-silver.webp)}
.greet-hearts{--envelope:#f1e4dd;--envelope-edge:#d8bfb4;--envelope-ink:#493039}
.greet .greet-intro-letter{position:relative;inset:auto;width:100%;height:auto;min-height:100svh;max-height:none;max-width:none;padding:110px 24px 90px;margin:0;z-index:5;background:var(--paper);display:none;overflow:visible;pointer-events:auto}
.greet .greet-hero:has(.greet-envelope-trigger){isolation:isolate}
.greet[data-phase=sealed] .greet-hero,.greet[data-phase=opening] .greet-hero,.greeting-intro .greet-hero{padding:0}
.greet[data-phase=sealed]>.greet-hero:before,.greet[data-phase=opening]>.greet-hero:before{display:none}
.greet[data-phase=sealed]>:not(.greet-hero),.greet[data-phase=opening]>:not(.greet-hero),.greeting-intro .greet>:not(.greet-hero){display:none}
.greet[data-phase=sealed] .greet-final,.greet[data-phase=opening] .greet-final,.greeting-intro .greet-final{display:none}
.greet[data-phase=sealed] .greet-intro-letter,.greet[data-phase=opening] .greet-intro-letter,.greeting-intro .greet-intro-letter{display:grid!important;place-items:center}
.greet .greet-envelope-trigger{width:min(100%,328px);display:grid;justify-items:center;gap:42px;padding:0;border:0;background:none;color:var(--ink);touch-action:manipulation;perspective:1200px;border-radius:12px;outline-offset:12px;-webkit-tap-highlight-color:transparent}
.greet .greet-envelope-trigger:disabled{cursor:default}
.greet-envelope-object{display:block;position:relative;width:100%;aspect-ratio:1.12;isolation:isolate;transition:translate .55s var(--object-ease);filter:drop-shadow(0 22px 16px #00000018)}
.greet-envelope-back{position:absolute;inset:0;border-radius:9px;background:var(--envelope-edge);box-shadow:0 1px 1px #fff6 inset,0 2px 4px #0002}
.greet-envelope-pocket{position:absolute;inset:0;z-index:4;border-radius:8px;background:var(--envelope);clip-path:polygon(0 0,50% 51%,100% 0,100% 100%,0 100%)}
.greet-envelope-pocket:before{content:'';position:absolute;inset:0;background:var(--envelope-texture) center/cover;opacity:.08;pointer-events:none}
.greet-envelope-pocket:after{content:'';position:absolute;inset:0;background:linear-gradient(140deg,transparent 49.6%,#00000010 49.9%,#ffffff60 50.2%,transparent 50.6%) left/50% 100% no-repeat,linear-gradient(220deg,transparent 49.6%,#00000010 49.9%,#ffffff60 50.2%,transparent 50.6%) right/50% 100% no-repeat;pointer-events:none}
.greet-envelope-flap{position:absolute;inset:0 0 auto;height:53%;z-index:5;transform-origin:50% 0;transform-style:preserve-3d;filter:drop-shadow(0 2px 1px #0003)}
.greet-envelope-flap>span{position:absolute;inset:0;background:linear-gradient(170deg,#ffffff30,transparent 65%),var(--envelope);clip-path:polygon(0 0,100% 0,51% 100%,49% 100%);border-radius:8px 8px 0 0}
.greet-envelope-flap>span:after{content:'';position:absolute;inset:0;background:var(--envelope-texture) center/cover;opacity:.1}
.flap-released .greet-envelope-flap{z-index:1}
.greet .greet-envelope-object .greet-letter-paper{position:absolute;inset:6% 7% auto;width:86%;height:87%;max-height:none;padding:30px 18px;border:1px solid #e5dfd4;border-radius:5px;background:#fcf9f1 url(assets/paper.webp) center/cover;color:#302b25;font:30px/1.18 Caveat,serif;display:grid;place-items:start center;box-shadow:0 3px 9px #0002;z-index:2;overflow:hidden}
.greet-letter-paper>span{white-space:pre-wrap;overflow-wrap:anywhere}
.greet .greet-envelope-object .greet-letter-label{position:absolute;inset:auto 14% 10%;z-index:6;max-width:none;padding:0;margin:0;background:none;border:0;color:var(--envelope-ink);font:clamp(23px,7vw,31px)/1.12 Caveat,serif;text-align:center;pointer-events:none}
.greet-letter-label>span{display:block;overflow-wrap:anywhere;white-space:pre-wrap}
.greet-letter-label>span+span{font-size:21px;margin-top:7px}
.greet-envelope-object.has-long-label{aspect-ratio:.74}
.greet .greet-intro-letter:has(.has-long-label){padding-top:250px}
.greet .greet-envelope-object.has-long-label .greet-letter-label{inset:auto 10% 7%;font-size:15px;line-height:1.18}
.greet-envelope-object.has-long-label .greet-letter-label>span+span{font-size:14px;margin-top:7px}
.greet-envelope-seal{position:absolute;left:50%;top:51%;width:52px;height:52px;z-index:7;transform:translate(-50%,-50%);border-radius:48% 51% 47% 50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 7px #0003,inset 0 2px 2px #fff7,inset 0 -3px 4px #0004;isolation:isolate}
.greet-envelope-seal:before{content:'';position:absolute;inset:5px;border:1px solid currentColor;border-radius:50%;opacity:.5}
.greet-envelope-seal:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 15%,#fff6 45%,transparent 65%);opacity:0}
.greet-envelope-seal svg{width:22px;height:22px;stroke-width:1.2;filter:drop-shadow(0 1px 0 #0003)}
.greet[data-phase=sealed] .greet-envelope-seal:after{animation:envelope-invite 6s ease-in-out 1s infinite}
.greet-open-hint{display:grid;justify-items:center;gap:7px;max-width:100%;font:16px/1.45 Outfit,sans-serif;letter-spacing:.015em;overflow-wrap:anywhere}
.greet-open-hint>span{font-size:25px;transition:transform .45s var(--object-ease)}
.greet-final:focus{outline:none}
@keyframes envelope-invite{0%,60%,100%{opacity:0}72%{opacity:.7}86%{opacity:0}}
@media(hover:hover) and (pointer:fine){.greet-envelope-trigger:not(:disabled):hover .greet-envelope-object{translate:0 -7px}.greet-envelope-trigger:not(:disabled):hover .greet-open-hint>span{transform:translate(3px,-3px)}}
.greet-envelope-trigger:not(:disabled):active .greet-envelope-object{translate:0 2px}
@media(max-height:640px){.greet .greet-intro-letter{padding:92px 24px 42px}.greet .greet-envelope-trigger{width:min(62vh,290px);gap:24px}}

/* Each envelope retains the same physical layering, with its own material. */
.greet-modern .greet-envelope-back{background:#173c9e}
.greet-modern .greet-envelope-object .greet-letter-paper{border-top:4px solid #294bbe}
.greet-cool .greet-envelope-object .greet-letter-paper{background:#d6dce1 url(assets/metal-silver.webp) center/cover;color:#111820;border-color:#aab4bd}
.greet-hearts .greet-envelope-object .greet-letter-paper{border-color:#e5c6c9}
.greet[data-phase=sealed] .greet-envelope-object{animation:envelope-breathe 7s ease-in-out 2s infinite}
@keyframes envelope-breathe{0%,65%,100%{rotate:0deg}73%{rotate:-.7deg}81%{rotate:.5deg}89%{rotate:0deg}}
@media(prefers-reduced-motion:reduce){.greet[data-phase=sealed] .greet-intro-letter{display:grid!important}.greet-envelope-object,.greet-reason,.greet-open-hint>span{animation:none!important;transition:none!important;translate:none!important}.greet-envelope-seal:after{animation:none!important}}