@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=La+Belle+Aurore&family=Montserrat:wght@400;500&display=swap');
:root{--ink:#565444;--gold:#a18343;--serif:'Cormorant Garamond',Georgia,serif;--sans:Montserrat,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#eeeae1;font-family:var(--serif)}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid #876626;outline-offset:7px}.scene{min-height:100svh;position:relative;isolation:isolate;display:flex;align-items:center;flex-direction:column;padding:46px 22px 25px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#fbf9f2 0%,#eeeadf 65%,#e3dfd4 100%)}.scene:before{content:'';position:absolute;inset:0;z-index:-1;opacity:.21;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%236c6556' opacity='.25' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.heading{text-align:center}.eyebrow{font:500 10px/1.6 var(--sans);letter-spacing:.28em}.heading .eyebrow{font-size:12px;letter-spacing:.35em}.fine-line{display:block;width:37px;height:1px;background:#b8a77e;margin:19px auto}.intro{font-size:20px;font-style:italic;margin:0}.invitation{position:relative;width:min(590px,90vw);height:365px;margin:auto 0;perspective:1400px;flex-shrink:0;transition:height .8s,margin .8s}.envelope{position:absolute;inset:0;filter:drop-shadow(0 24px 21px #73634630);transition:opacity .7s .6s,transform 1s}.lining{position:absolute;inset:0;background:#cfc5ac;border-radius:4px}.pocket{position:absolute;inset:0;border-radius:3px;background:conic-gradient(from 59deg at 50% 52%,#e8e0ce 0deg 62deg,#f4eddf 62deg 180deg,#eee6d5 180deg 242deg,#e8e0ce 242deg);box-shadow:inset 0 0 2px #97876a88}.pocket:after{content:'';position:absolute;inset:0;background:linear-gradient(32deg,transparent 49.85%,#b7a98d4d 50%,transparent 50.25%),linear-gradient(-32deg,transparent 49.85%,#b7a98d4d 50%,transparent 50.25%);clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%)}.flap{position:absolute;inset:0;z-index:2;clip-path:polygon(0 0,100% 0,50% 57%);background:linear-gradient(165deg,#f7f1e5,#ded3bb);transform-origin:top;transition:transform 1s .15s;backface-visibility:hidden;filter:drop-shadow(0 2px 1px #9a8967)}.open-letter{position:absolute;inset:0;z-index:4;background:none;border:0;cursor:pointer;display:grid;place-items:center;transition:opacity .35s,visibility .35s}.seal{position:relative;display:grid;place-items:center;width:102px;height:104px;margin-top:19px;border-radius:47% 53% 48% 51%/52% 46% 55% 48%;background:radial-gradient(circle at 36% 27%,#e6c877,#b68b3c 48%,#8f652b 75%,#d7b15a 95%);box-shadow:2px 7px 8px #70501f45,inset 2px 3px 4px #f8d68f,inset -2px -3px 5px #6c491e;transition:transform .35s}.open-letter:hover .seal{transform:scale(1.06) rotate(-4deg)}.seal-rim{position:absolute;inset:9px;border-radius:50%;border:1px solid #7b572c88;box-shadow:inset 1px 1px 3px #68492399,1px 1px 1px #efd394aa}.monogram,.small-mark{display:block;width:61px;height:71px;background:linear-gradient(135deg,#ffe4a0,#e9c46c 45%,#9d702e 65%,#f0d187);mask:url('logo.png') center/contain no-repeat;-webkit-mask:url('logo.png') center/contain no-repeat;filter:drop-shadow(1px 1px 0 #75501f)}.hint{text-align:center;margin-top:20px;position:relative;transition:opacity .3s}.hint p{font:29px 'La Belle Aurore','Segoe Script',cursive;margin:0 0 11px;transform:rotate(-5deg)}.hint span{font:8px var(--sans);letter-spacing:.24em;color:#8b8069}.hint svg{position:absolute;left:calc(50% + 132px);top:-33px;width:29px;height:41px;stroke:#a18b61;fill:none;stroke-width:1.2;transform:rotate(-30deg)}footer{font:8px var(--sans);letter-spacing:.3em;color:#9a907c;margin-top:43px}.letter{position:absolute;inset:0;background:#fffdf6;padding:18px;opacity:0;visibility:hidden;transform:translateY(45px) scale(.85);box-shadow:0 20px 65px #76634624;transition:opacity .7s .65s,transform 1s .5s,visibility 0s 1s}.paper-border{height:100%;border:1px solid #ba9b5e66;outline:1px solid #ba9b5e22;outline-offset:5px;text-align:center;padding:21px 20px}.small-mark{width:48px;height:55px;margin:0 auto 12px;background:#a18343;filter:none}.letter .eyebrow{font-size:8px;letter-spacing:.23em}h1{font-size:58px;font-weight:400;line-height:1.05;margin:18px 0 10px;color:#7c693f}h1 em{font-size:.7em;font-weight:400}.names{font-size:30px;margin:0 0 18px}.names span{font-style:italic;color:#a18343;font-size:25px}.date{padding:15px 0;border-top:1px solid #baa77d55;border-bottom:1px solid #baa77d55;max-width:270px;margin:auto}.date span{display:block;font:8px var(--sans);letter-spacing:.3em}.date strong{display:block;font-size:33px;font-weight:400;letter-spacing:.09em;margin-top:6px}.date i{font-style:normal;color:#b89b60}.message{font-size:17px;line-height:1.6;margin:20px 0}.calendar{display:inline-block;text-decoration:none;color:#79643a;font:9px var(--sans);letter-spacing:.11em;border-bottom:1px solid #bba36e;padding:10px 6px}.closing{font-style:italic;font-size:15px;color:#9a907d;margin:18px 0 0}.reset{font:10px var(--sans);letter-spacing:.12em;background:none;border:0;padding:18px;cursor:pointer;margin-top:14px}.reset span{margin-left:9px;font-size:17px}.scene.opened .invitation{height:550px;margin:28px 0 0}.opened .flap{transform:rotateX(180deg)}.opened .envelope{transform:translateY(100px);opacity:0}.opened .open-letter{opacity:0;visibility:hidden;pointer-events:none}.opened .letter{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.opened .hint{display:none}.opened footer{margin-top:12px}.no-script{text-align:center}h1:focus{outline:none}@media(min-height:900px){.scene{padding-top:65px;padding-bottom:35px}}@media(max-width:600px){.scene{padding:30px 18px 22px}.heading .eyebrow{font-size:10px}.intro{font-size:18px}.invitation{height:240px;width:min(400px,90vw)}.seal{width:84px;height:86px;margin-top:12px}.monogram{width:50px;height:58px}.hint p{font-size:26px}.hint svg{left:calc(50% + 115px)}.letter{padding:14px}.paper-border{padding:20px 12px}.scene.opened .invitation{height:540px;margin-top:25px}h1{font-size:46px}.names{font-size:28px}.message{font-size:16px}.small-mark{height:50px}.date strong{font-size:29px}footer{margin-top:33px}}@media(max-height:740px){.scene:not(.opened) .invitation{margin:45px 0 20px}.scene.opened{padding-top:20px}.opened .heading .intro,.opened .fine-line{display:none}.opened .heading .eyebrow{margin:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}


/* The paper stays behind the envelope front throughout the opening. */
.scene{--envelope-height:365px;--paper-height:470px;--travel:310px;justify-content:center;overflow:clip;overflow-clip-margin:0;padding-top:38px}
.invitation,.scene.opened .invitation{height:var(--envelope-height);margin:40px 0 0;transition:height 1.7s cubic-bezier(.45,0,.2,1) .35s;perspective:1600px}
.scene.opened .invitation{height:calc(var(--envelope-height) + var(--travel))}
.envelope,.opened .envelope{display:contents;filter:none;opacity:1;transform:none}
.lining,.pocket,.flap{inset:0 0 auto;height:var(--envelope-height);transform:translateY(0);transition:transform 1.7s cubic-bezier(.45,0,.2,1) .35s}
.lining{z-index:0;box-shadow:0 22px 30px #73634625}
.pocket{z-index:3;clip-path:polygon(0 0,50% 57%,100% 0,100% 100%,0 100%)}
.flap{z-index:4;backface-visibility:visible;filter:none;transition:transform 1s cubic-bezier(.4,0,.2,1),top 1.7s cubic-bezier(.45,0,.2,1) .35s;top:0}
.opened .lining,.opened .pocket{transform:translateY(var(--travel))}
.opened .flap{top:var(--travel);transform:rotateX(-180deg);z-index:0}
.letter,.opened .letter{inset:0 5% auto;height:var(--paper-height);padding:18px;z-index:2;opacity:1;visibility:visible;transform-origin:top center;transform:translateY(75px);transition:transform 1.7s cubic-bezier(.45,0,.2,1) .35s;box-shadow:0 8px 24px #76634624;background:linear-gradient(115deg,#fffdf7,#f9f5e9)}
.opened .letter{transform:translateY(0)}
.letter .paper-border{padding:20px 12px}
.open-letter{z-index:5;inset:0 0 auto;height:var(--envelope-height);transition:opacity .3s,visibility .3s}
.controls{display:grid;place-items:center;min-height:100px;width:100%;margin-top:18px}
.controls>*{grid-area:1/1}
.hint,.opened .hint{display:block;margin:0;transition:opacity .25s,visibility .25s}
.opened .hint{opacity:0;visibility:hidden;pointer-events:none}
.reset{margin:0;align-self:center}
footer,.opened footer{margin-top:12px}
@media(max-width:600px){.scene{--envelope-height:240px;--paper-height:450px;--travel:345px;padding:28px 18px 22px}.letter{padding:14px;transform:translateY(28px)}.invitation,.scene.opened .invitation{margin-top:32px}.paper-border{padding:20px 10px}.letter .eyebrow{font-size:7px;letter-spacing:.18em}.small-mark{margin-bottom:10px}.letter h1{font-size:43px}.letter .closing{font-size:14px}.date strong{font-size:28px}}
@media(max-height:740px){.scene{justify-content:flex-start}.scene:not(.opened) .invitation,.scene.opened .invitation{margin-top:36px}.scene.opened{padding-top:28px}.opened .heading .intro,.opened .fine-line{display:block}.opened .heading .eyebrow{margin:1em 0}}
@media(prefers-reduced-motion:reduce){.invitation,.lining,.pocket,.flap,.letter{transition:none!important}}


/* The envelope conceals the full-sized sheet; only its position animates. */
.paper-slot{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.paper-slot .letter{pointer-events:auto}

/* Keep the animation anchored instead of re-centering on every frame. */
html{scrollbar-gutter:stable}
.scene,.scene.opened{justify-content:flex-start;padding-top:max(28px,calc((100svh - 650px)/2))}
.paper-slot{bottom:auto;height:calc(var(--envelope-height) + var(--travel));clip-path:inset(0 0 var(--travel) 0);transition:clip-path 1.7s cubic-bezier(.45,0,.2,1) .35s;will-change:clip-path}
.opened .paper-slot{clip-path:inset(0)}
.letter{will-change:transform;backface-visibility:hidden;transform:translate3d(0,75px,0)}
.opened .letter{transform:translate3d(0,0,0)}
.lining,.pocket{will-change:transform;transform:translate3d(0,0,0)}
.opened .lining,.opened .pocket{transform:translate3d(0,var(--travel),0)}
.flap{will-change:transform;transition:transform 1.7s cubic-bezier(.45,0,.2,1) .15s;transform:translate3d(0,0,0) rotateX(0)}
.opened .flap{top:0;transform:translate3d(0,var(--travel),0) rotateX(-180deg)}
@media(max-width:600px){.letter{transform:translate3d(0,28px,0)}}
@media(prefers-reduced-motion:reduce){.paper-slot{transition:none!important}}