/* A finite unwrapping sequence: seal, flap, paper, then the personal message. */
.recipient-view{isolation:isolate;perspective:1400px}
.recipient-boutique,.recipient-stage,.recipient-settings,.recipient-footer{position:relative;z-index:1}
.recipient-atmosphere{position:absolute;inset:-20px -10px 0;z-index:-1;overflow:hidden;pointer-events:none;opacity:.7}
.recipient-atmosphere>span{position:absolute;width:450px;height:600px;left:calc(50% - 360px);top:40px;background:radial-gradient(ellipse,#dfc69724,transparent 70%);transform:rotate(-25deg);animation:ambient-arrival 2.4s var(--ease) both}
.recipient-atmosphere>span+span{left:auto;right:calc(50% - 350px);top:240px;width:400px;height:450px;background:radial-gradient(ellipse,#e8d8ce22,transparent 70%);animation-delay:.15s}
.recipient-view[data-template=floral] .recipient-atmosphere>span,.recipient-view[data-template=sage] .recipient-atmosphere>span{background:radial-gradient(ellipse,#8a9a8624,transparent 70%)}
.recipient-view[data-template=scarlet] .recipient-atmosphere>span,.recipient-view[data-template=festive] .recipient-atmosphere>span{background:radial-gradient(ellipse,#c58d7b20,transparent 70%)}
.recipient-stage{min-height:590px}
.recipient-cover{animation:cover-arrival .9s var(--ease) both;padding-top:28px;padding-bottom:18px}
.recipient-cover .overline{animation:cover-copy .8s var(--ease) .2s both}
.recipient-cover h1{animation:cover-copy .9s var(--ease) .3s both}
.recipient-cover .cover-sender{animation:cover-copy .9s var(--ease) .4s both}
.recipient-cover>.button{animation:cover-copy .9s var(--ease) .5s both;min-height:48px;padding:13px 24px;box-shadow:0 7px 22px #b28b4612}
.recipient-cover .cover-whisper{font:italic 400 1rem/1.5 var(--serif);color:var(--muted);margin-top:15px;animation:cover-copy .9s var(--ease) .58s both}
.envelope{--env-base:#eadfc9;--env-front:#f3e9d7;--env-fold:#fbf3e4;--env-border:#cbb894;--env-flap-light:#faf1df;--env-flap-dark:#e4d2af;--seal:#cfab66;--seal-ink:#664615;width:min(100%,370px);margin-bottom:38px;aspect-ratio:1.6;transform-style:preserve-3d;filter:none;animation:envelope-arrival 1.1s var(--ease) both}
.envelope-back{background:var(--env-base);border-color:var(--env-border);box-shadow:inset 0 0 35px #ad8b4920}
.envelope-fold{background:var(--env-front);border-radius:2px;box-shadow:inset 0 -10px 30px #a48b5e0a}
.envelope-fold:after{background:var(--env-fold)}
.envelope-flap{background:linear-gradient(165deg,var(--env-flap-light),var(--env-flap-dark));backface-visibility:visible;transform-origin:50% 0;transform:rotateX(0);transition:none;filter:drop-shadow(0 2px 1px #8c6b3420)}
.envelope-letter{inset:9% 9% 8%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;background:repeating-linear-gradient(90deg,#f4e9d710 0 1px,transparent 1px 3px),#fffcf5;border-color:#d3c19e;box-shadow:0 2px 10px #4f3b2110;z-index:2}
.envelope-letter>span{font:italic 500 2.8rem/1 var(--serif);color:#8c6c36}
.envelope-letter>small{font:400 .7rem/1 var(--serif);color:#796a54;letter-spacing:.02em}
.envelope-shadow{position:absolute;inset:86% 6% -12%;background:radial-gradient(ellipse,#6f512b24,transparent 68%);filter:blur(8px);transform:translateZ(-2px);opacity:.8;transition:transform 1s var(--ease),opacity 1s}
.envelope-seal{top:42%;left:42.5%;width:15%;color:var(--seal-ink);background:var(--seal);border-color:#8b672f70;font-style:italic;font-size:1.5rem;box-shadow:0 3px 8px #543a1b18,inset 0 0 0 3px var(--seal),inset 0 0 0 4px #805d2840;display:block;text-align:center;line-height:1;align-content:center;transform:rotate(-5deg)}
.envelope-seal:after{content:'';position:absolute;inset:7px;border:1px solid #82602725;border-radius:50%;pointer-events:none}
.envelope-light{position:absolute;inset:0;overflow:hidden;z-index:7;pointer-events:none;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.envelope-light:after{content:'';position:absolute;inset:-40% -60%;background:linear-gradient(110deg,transparent 35%,#fff7dd35 49%,transparent 63%);transform:translateX(-100%);animation:envelope-lustre 1.6s var(--ease) .35s both}
.envelope.opening{animation:none}
.envelope.opening .envelope-seal{animation:seal-release .38s cubic-bezier(.2,.7,.3,1) both}
.envelope.opening .envelope-flap{animation:flap-unfold .95s cubic-bezier(.25,.8,.2,1) .13s both}
.envelope.opening .envelope-letter{animation:letter-peek 1.05s var(--ease) .38s both;transition:none}
.envelope.opening .envelope-shadow{transform:scaleX(.85) translateY(8px);opacity:.35}
.envelope.opening .envelope-light:after{animation:envelope-lustre 1.25s var(--ease) .1s both}
.recipient-cover.is-opening{animation:cover-departure .38s var(--ease) 1.27s both;pointer-events:none}
.recipient-cover.is-opening>.overline,.recipient-cover.is-opening>h1,.recipient-cover.is-opening>.cover-sender,.recipient-cover.is-opening>.button,.recipient-cover.is-opening>.cover-whisper{animation:cover-quiet .45s ease .32s both}
.recipient-view[data-template=nocturne] .envelope{--env-base:#343c35;--env-front:#354037;--env-fold:#414a3e;--env-border:#9c8755;--env-flap-light:#4b5547;--env-flap-dark:#29352d;--seal:#d2b675;--seal-ink:#4e3d1e}
.recipient-view[data-template=floral] .envelope,.recipient-view[data-template=sage] .envelope{--env-base:#d3dbc9;--env-front:#e0e6d5;--env-fold:#ebefdf;--env-border:#aab69b;--env-flap-light:#eef1e1;--env-flap-dark:#c2cfb7;--seal:#a6b58b;--seal-ink:#3c4f32}
.recipient-view[data-template=scarlet] .envelope{--env-base:#e3cfc0;--env-front:#f0dfcf;--env-fold:#f8ebdc;--env-border:#c6a492;--env-flap-light:#fae9d8;--env-flap-dark:#dfc3af;--seal:#963f45;--seal-ink:#ffe7cd}
.recipient-view[data-template=festive] .envelope{--env-base:#e8cbbd;--env-front:#f0d7c9;--env-fold:#f6e4d6;--env-border:#c89e8b;--env-flap-light:#fae4d4;--env-flap-dark:#dfb5a4;--seal:#a76468;--seal-ink:#fff0df}
.recipient-view[data-template=raya] .envelope{--env-base:#dddec5;--env-front:#e9e9d4;--env-fold:#f3f0dc;--env-border:#b6ae80;--env-flap-light:#f5f2de;--env-flap-dark:#cfcda6;--seal:#c6aa64;--seal-ink:#4b4e2e}
.recipient-settings{display:flex;justify-content:center;margin:18px 0 -13px}
.motion-button,.replay-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.6875rem;color:var(--muted);padding:10px 14px;border-radius:6px;transition:color .2s,background .2s}
.motion-button .icon,.replay-button .icon{width:14px;height:14px}
.motion-button:hover,.replay-button:hover{background:var(--surface-soft);color:var(--gold-dark)}
.motion-button[aria-pressed=true]{color:var(--gold-dark)}
.recipient-letter-actions{display:flex;justify-content:center;margin-top:13px}
.recipient-letter-wrap{position:relative;animation:none;perspective:1200px}
.recipient-letter-wrap .letter-card{transform-origin:50% 80%;backface-visibility:hidden}
.recipient-letter-wrap.reveal-once>.letter-card{animation:paper-arrival 1.05s var(--ease) both}
.reveal-once .letter-card>.letter-kicker{animation:letter-line .85s var(--ease) .18s both}
.reveal-once .letter-card>.letter-mark,.reveal-once .letter-card>.letter-crescent{animation:letter-line .85s var(--ease) .26s both}
.reveal-once .letter-card>h2{animation:letter-line 1s var(--ease) .36s both}
.reveal-once .letter-card>.greeting-media{animation:letter-line .95s var(--ease) .46s both}
.reveal-once .letter-card>.letter-message{animation:letter-line 1.05s var(--ease) .56s both}
.reveal-once .letter-card>.letter-divider{animation:rule-arrival .9s var(--ease) .68s both}
.reveal-once .letter-card>.letter-signature{animation:letter-line .95s var(--ease) .78s both}
.reveal-once .letter-card>.letter-brand{animation:letter-line .9s var(--ease) .9s both}
.reveal-once .letter-foil:after{animation:foil-pass 1.8s var(--ease) .24s both}
.reveal-once>.recipient-access,.reveal-once>.recipient-letter-actions{animation:letter-line .8s var(--ease) 1.1s both}
.recipient-letter-wrap .greeting-media img{animation:photo-arrival .45s var(--ease)}
.recipient-letter-wrap .letter-card.nocturne{padding:60px 58px 44px}
.recipient-letter-wrap .letter-card.scarlet h2{font-size:4rem;max-width:420px;margin-left:0}
.recipient-letter-wrap .letter-card.scarlet .letter-postage{top:63px;right:60px;width:57px;height:70px;font-size:1.8rem}
.recipient-letter-wrap .letter-card.festive h2{font-size:4.1rem;max-width:420px;margin-left:0}
.recipient-letter-wrap .letter-card.floral .letter-wreath{top:54px;inset-inline:42px;height:205px}
.recipient-letter-wrap .letter-card.floral .letter-wreath .floral-branch{width:140px;height:210px}
.recipient-letter-wrap .letter-card.raya{padding-top:100px;border-radius:200px 200px 4px 4px}
.recipient-letter-wrap .letter-card.raya:before{border-radius:187px 187px 0 0}
.recipient-letter-wrap .letter-card.raya:after{border-radius:181px 181px 0 0}
.recipient-letter-wrap .letter-card.minimal h2{max-width:420px;font-size:4rem;margin-left:0}
.recipient-letter-wrap .letter-card.minimal .letter-message{font-size:1rem;line-height:2}
.recipient-letter-wrap .letter-card.sage .letter-garden{width:145px;height:215px;right:22px;top:50px}
.recipient-letter-wrap .letter-card.sage .letter-garden .floral-branch{width:140px;height:230px}
.recipient-letter-wrap .letter-card.sage h2{max-width:430px;margin-left:0}
.reveal-petals{position:absolute;inset:0;pointer-events:none;z-index:8}
.reveal-petals>span{position:absolute;width:5px;height:11px;background:#c5a05990;top:0;left:calc(10% + var(--petal)*11%);border-radius:1px;animation:petal-drift 2.6s var(--ease) calc(.06s * var(--petal)) both}
.reveal-petals>span:nth-child(2n){width:7px;height:7px;background:#c5a05955;--petal-turn:-140deg}
.reveal-petals.floral>span{width:7px;height:12px;background:#cda69b90;border-radius:70% 0 70% 0}
.reveal-petals.raya>span{background:#a3915790;width:3px;height:13px}
@keyframes ambient-arrival{from{opacity:0;transform:translateY(30px) rotate(-25deg)}to{opacity:1;transform:translateY(0) rotate(-25deg)}}
@keyframes cover-arrival{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes cover-copy{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}
@keyframes envelope-arrival{from{opacity:0;transform:translateY(24px) rotateX(12deg) rotateZ(-2deg)}to{opacity:1;transform:translateY(0) rotateX(0) rotateZ(0)}}
@keyframes envelope-lustre{0%{transform:translateX(-100%);opacity:0}20%{opacity:.8}80%{opacity:.8}100%{transform:translateX(100%);opacity:0}}
@keyframes seal-release{0%{opacity:1;transform:rotate(-5deg) scale(1)}70%{opacity:.6;transform:translateY(-4px) rotate(-15deg) scale(.9)}100%{opacity:0;transform:translateY(-7px) rotate(-19deg) scale(.75)}}
@keyframes flap-unfold{0%{transform:rotateX(0deg);z-index:6}49%{z-index:6}50%{z-index:1}100%{transform:rotateX(180deg);z-index:1}}
@keyframes letter-peek{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(-43%) rotate(-1deg)}}
@keyframes cover-quiet{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(7px)}}
@keyframes cover-departure{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(14px) scale(.965)}}
@keyframes paper-arrival{from{opacity:0;transform:translateY(42px) rotateX(7deg) scale(.97)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}
@keyframes letter-line{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@keyframes rule-arrival{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes foil-pass{0%{opacity:0;transform:translateX(-110%)}20%{opacity:.75}85%{opacity:.75}100%{opacity:0;transform:translateX(110%)}}
@keyframes photo-arrival{from{opacity:.35;transform:scale(.99)}to{opacity:1;transform:scale(1)}}
@keyframes petal-drift{0%{opacity:0;transform:translateY(-12px) rotate(0)}12%{opacity:.8}100%{opacity:0;transform:translateY(260px) translateX(18px) rotate(var(--petal-turn,170deg))}}
.recipient-view[data-motion=off],.recipient-view[data-motion=off] *,.recipient-view[data-motion=off] *:before,.recipient-view[data-motion=off] *:after{animation:none!important;transition:none!important}
.recipient-view[data-motion=off] .reveal-petals,.recipient-view[data-motion=off] .envelope-light,.recipient-view[data-motion=off] .letter-foil{display:none}
@media(max-width:650px){.recipient-stage{min-height:560px}.recipient-cover{padding-top:24px}.envelope{width:min(100%,300px);margin-bottom:31px}.envelope-letter>span{font-size:2.3rem}.envelope-letter>small{font-size:.65rem}.envelope-seal{font-size:1.35rem}.recipient-cover h1{font-size:2.9rem}.recipient-cover .cover-whisper{font-size:.95rem}.recipient-boutique{font-size:.56rem;letter-spacing:.12em;line-height:1.5}.recipient-atmosphere{inset:0 -8px}.recipient-atmosphere>span{width:320px;left:calc(50% - 190px);height:500px}.recipient-atmosphere>span+span{right:calc(50% - 190px);width:320px}.recipient-letter-wrap .letter-card.nocturne{padding:49px 30px 34px}.recipient-letter-wrap .letter-card.scarlet h2,.recipient-letter-wrap .letter-card.festive h2,.recipient-letter-wrap .letter-card.minimal h2{font-size:3.15rem}.recipient-letter-wrap .letter-card.scarlet .letter-postage{right:31px;top:46px;width:44px;height:55px;font-size:1.5rem}.recipient-letter-wrap .letter-card.raya{padding-top:85px;border-radius:140px 140px 4px 4px}.recipient-letter-wrap .letter-card.raya:before{border-radius:127px 127px 0 0}.recipient-letter-wrap .letter-card.raya:after{border-radius:121px 121px 0 0}.recipient-letter-wrap .letter-card.floral .letter-wreath{inset-inline:25px;height:170px}.recipient-letter-wrap .letter-card.floral .letter-wreath .floral-branch{width:95px;height:160px}.recipient-letter-wrap .letter-card.sage .letter-garden{width:95px;height:160px;right:10px;top:43px}.recipient-letter-wrap .letter-card.sage .letter-garden .floral-branch{width:90px;height:165px}.recipient-letter-wrap .letter-card.minimal .letter-message{font-size:.9rem}.recipient-settings{margin-top:15px}.motion-button,.replay-button{font-size:.6875rem}.recipient-footer{margin-top:27px}.footer-wordmark{font-size:1.8rem}}
@media(max-width:370px){.recipient-cover h1{font-size:2.6rem}.envelope{max-width:270px}.envelope-seal{font-size:1.2rem}.recipient-letter-wrap .letter-card.scarlet h2,.recipient-letter-wrap .letter-card.festive h2,.recipient-letter-wrap .letter-card.minimal h2{font-size:2.8rem}.recipient-letter-wrap .letter-card.nocturne{padding-inline:27px}.recipient-boutique{font-size:.5rem;gap:8px;letter-spacing:.08em}}
@media(prefers-reduced-motion:reduce){.recipient-view,.recipient-view *,.recipient-view *:before,.recipient-view *:after{animation:none!important;transition:none!important}.reveal-petals,.envelope-light,.letter-foil{display:none}.recipient-cover,.recipient-letter-wrap,.recipient-letter-wrap>.letter-card{transform:none}}