:root{color-scheme:light;--ink:#416482;--blue:#e5f2fc;font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:var(--blue)}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 43%,#f5fbff 0,#e5f2fc 58%,#dceefa 100%);-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid #4c82b0;outline-offset:7px}button[hidden],[hidden]{display:none!important}
.gift{position:relative;text-align:center;width:min(100%,540px);padding:24px 20px 22px;isolation:isolate}.eyebrow{font-family:system-ui,sans-serif;font-size:10px;letter-spacing:3px;color:#7896af;text-transform:uppercase;margin-bottom:10px}.scene{position:relative;width:340px;max-width:100%;height:370px;margin:auto}.halo{position:absolute;width:300px;height:300px;border:1px solid #fff9;border-radius:50%;left:50%;top:31px;transform:translateX(-50%);box-shadow:0 0 0 23px #ffffff15,0 0 0 24px #ffffff35;opacity:.7}
.hearts{position:fixed;inset:0;overflow:hidden;pointer-events:none}.hearts i{position:absolute;left:var(--x);top:var(--y);font-style:normal;font-size:17px;color:#f4d6e2;opacity:.72;animation:dance 7s ease-in-out var(--d) infinite;transform:rotate(var(--r))}.hearts i:nth-child(even){color:#fff;font-size:22px}.hearts i:nth-child(3n){font-size:12px}@keyframes dance{0%,100%{transform:translate(0,0) rotate(var(--r))}50%{transform:translate(9px,-16px) rotate(calc(var(--r) + 12deg))}}
.envelope{position:absolute;width:180px;height:120px;left:50%;top:136px;transform:translateX(-50%) rotate(-5deg);transition:transform .9s cubic-bezier(.25,.7,.3,1),top .9s;filter:drop-shadow(0 12px 12px #4c80a31b)}.envelope-back{position:absolute;inset:0;background:#9dc8ec;border-radius:7px}.flap{position:absolute;inset:0;background:#c4e1f7;clip-path:polygon(0 0,100% 0,50% 63%);transform-origin:top;transition:transform .65s,filter .65s;z-index:3}.envelope-front{position:absolute;inset:0;border-radius:5px;background:linear-gradient(32deg,#b4d8f3 49.5%,transparent 50%) left/50.5% 100% no-repeat,linear-gradient(-32deg,#bddff7 49.5%,transparent 50%) right/50.5% 100% no-repeat;z-index:4}.envelope-front:after{content:'';position:absolute;inset:0;background:#c9e5f8;clip-path:polygon(0 100%,50% 42%,100% 100%);border-radius:5px}.seal{position:absolute;z-index:5;top:48px;left:76px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#7caad1;background:#e5f3ff;border:1px solid #fff9;font-size:15px;transition:opacity .25s}
.invitation{position:absolute;inset:95px 20px 45px;border:0;background:transparent;z-index:8;border-radius:25px}.invitation span{position:absolute;white-space:nowrap;top:184px;left:50%;transform:translateX(-50%);font-size:18px;transition:color .2s}.invitation:hover span{color:#224e78}.invitation:hover~*{opacity:1}.bouquet{position:absolute;inset:0 0 auto;top:0;z-index:2;opacity:0;transition:opacity .2s}.bouquet svg{width:100%;height:auto;overflow:visible}.stem{fill:none;stroke:#7ca68c;stroke-width:4;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300}.leaf{fill:#9abd9f;stroke:#7da78a;stroke-width:.8;transform-box:fill-box;transform-origin:bottom right;transform:scale(0)}.bloom{transform:scale(0);opacity:0}.sprig{transform-origin:170px 321px}.sparkles{opacity:0}.message{height:123px;position:relative;margin:0 auto;opacity:0;transform:translateY(8px);transition:opacity .8s,transform .8s}h1{font-weight:normal;font-size:clamp(25px,6.8vw,32px);letter-spacing:-.7px;line-height:1.2;margin:0 0 10px}p{font-size:18px;line-height:1.5;margin:0}.again{font-family:system-ui,sans-serif;font-size:12px;background:transparent;border:0;min-width:70px;min-height:44px;margin-top:13px;color:#6689a6;border-radius:20px}.again:hover{background:#ffffff70}.again span{display:inline-block;margin-left:4px;font-size:16px}.no-script{font-size:14px}
.opened .envelope{top:251px;transform:translateX(-50%) rotate(0) scale(.77)}.opened .flap{transform:rotateX(180deg);filter:brightness(.96);z-index:1}.opened .seal{opacity:0}.opened .invitation{visibility:hidden}.opened .bouquet{opacity:1;transition-delay:.4s}.opened .stem{animation:grow 1.5s cubic-bezier(.22,.61,.36,1) var(--delay) forwards}.opened .leaf{animation:leaf .9s ease calc(var(--delay) + .7s) forwards}.opened .bloom{animation:bloom 1.15s cubic-bezier(.2,.8,.2,1.2) calc(var(--delay) + 1s) forwards}.opened .sprig{animation:sway 5s ease-in-out 3s infinite}.opened .right{animation-delay:3.6s}.opened .left{animation-direction:reverse}.opened .sparkles{animation:twinkle 1.4s ease 2.1s forwards}.ready .message{opacity:1;transform:none}
@keyframes grow{to{stroke-dashoffset:0}}@keyframes leaf{to{transform:scale(1)}}@keyframes bloom{0%{transform:scale(.05) rotate(-16deg);opacity:0}30%{opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}@keyframes sway{0%,100%{transform:rotate(-1.3deg)}50%{transform:rotate(1.3deg)}}@keyframes twinkle{0%{opacity:0}60%{opacity:.9}100%{opacity:.6}}
.burst{position:absolute;left:50%;top:180px;z-index:6;pointer-events:none}.burst i{position:absolute;font-style:normal;color:#f0c5d7;font-size:17px;opacity:0;--dx:-70px;--dy:-150px}.burst i:nth-child(2){--dx:40px;--dy:-180px;color:white}.burst i:nth-child(3){--dx:85px;--dy:-120px;animation-delay:.2s!important}.burst i:nth-child(4){--dx:-20px;--dy:-210px;color:white;animation-delay:.15s!important}.burst i:nth-child(5){--dx:-100px;--dy:-90px;animation-delay:.3s!important}.opened .burst i{animation:float-up 1.8s ease-out .15s both}@keyframes float-up{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(20deg) scale(1.15)}}
.gift{min-width:0}.scene{width:min(340px,100%)}
@media(max-height:650px){.gift{padding-top:14px;padding-bottom:10px}.eyebrow{margin-bottom:0}.scene{height:320px;width:min(294px,100%)}.envelope{top:115px}.opened .envelope{top:217px}.invitation{inset:75px 10px 30px}.invitation span{top:169px}.halo{width:260px;height:260px;top:25px}.message{height:115px}h1{font-size:27px}.again{margin-top:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.opened .stem{stroke-dashoffset:0}.opened .leaf,.opened .bloom{transform:scale(1);opacity:1}.opened .sparkles{opacity:.6}.burst{display:none}.opened .bouquet{opacity:1}}