:root{color-scheme:dark;--ink:#fbefdb;--dim:#dcccb4;--gold:#efc98d;--frame:#d8a96755;--serif:Georgia,"Times New Roman",serif;--sans:system-ui,sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% -12%,#244e39 0%,transparent 57%),radial-gradient(ellipse at 84% 110%,#431825 0%,transparent 53%),#071914;color:var(--ink);font:16px/1.5 var(--sans);padding:max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.snow{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.snow span{position:absolute;inset:-210px 0 0;background-image:radial-gradient(2px 2px at 29px 32px,#fff8 50%,transparent 90%),radial-gradient(1px 1px at 74px 168px,#f7d9acb0 70%,transparent 100%),radial-gradient(2px 2px at 158px 106px,#fff7 60%,transparent 100%),radial-gradient(1px 1px at 134px 201px,#fff6 60%,transparent 100%);background-size:191px 210px;animation:snowfall 25s linear infinite}
.snow span:nth-child(2){opacity:.36;translate:52px 0;animation-duration:38s;animation-delay:-16s}
.snow span:nth-child(3){opacity:.24;translate:-43px 0;animation-duration:51s;animation-delay:-28s}
@keyframes snowfall{to{transform:translateY(210px)}}
.invitation{position:relative;width:min(100%,670px);text-align:center}
.masthead,footer{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gold);font-size:10px;font-weight:700;letter-spacing:.16em}
.masthead{margin-bottom:13px}
.masthead i{display:inline-block;vertical-align:middle;width:3px;height:3px;border-radius:50%;margin:0 3px;background:currentColor}
.seal{display:grid;place-items:center;width:31px;height:31px;border:1px solid var(--frame);border-radius:50%;font-size:18px;background:#153627;box-shadow:inset 0 0 0 2px #071914}
.card{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--frame);border-radius:26px;padding:29px 18px 20px;background:radial-gradient(ellipse at 50% 43%,#27563e80 0%,transparent 61%),linear-gradient(145deg,#153429,#0a211b 57%,#201b20 100%);box-shadow:0 26px 75px #0007,inset 0 1px #f7ce8b29}
.card::before{content:"";position:absolute;inset:6px;z-index:-1;border:1px solid #eac58c32;border-radius:20px;pointer-events:none}
.sprig{position:absolute;z-index:-1;top:9px;left:9px;width:clamp(59px,17vw,114px);color:#e7b977;opacity:.33}
.sprig-right{left:auto;right:9px;transform:scaleX(-1)}
.occasion,.result-label{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.21em;margin:0}
h1,h2{font:normal clamp(36px,8vw,69px)/1.04 var(--serif);letter-spacing:-.045em;text-wrap:balance;margin:9px 0 0}
h2{font-size:clamp(33px,7vw,52px);color:#ffe1ae;margin:2px 0 7px;overflow-wrap:anywhere}
.greeting{font-size:clamp(14px,3.5vw,19px);margin:10px 0 0;color:var(--dim)}
.scene{width:min(100%,370px);position:relative;margin:34px auto -7px;isolation:isolate}
.gift{display:block;width:100%;height:auto;filter:drop-shadow(0 13px 14px #02080578);overflow:visible}
.halo{position:absolute;z-index:-1;inset:8% 3%;border-radius:50%;background:radial-gradient(ellipse,#e8ae6452,transparent 70%);opacity:.75}
.spark{position:absolute;color:#ffe0a8;text-shadow:0 0 13px #f6b661;font-size:16px;animation:twinkle 3.5s ease-in-out infinite alternate}
.s1{top:23%;left:14%}.s2{top:17%;right:16%;animation-delay:-1s}.s3{top:39%;left:7%;animation-delay:-2s}.s4{top:51%;right:5%;animation-delay:-.8s}.s5{top:7%;left:33%;animation-delay:-2.3s}.s6{top:40%;right:23%;animation-delay:-1.5s}
@keyframes twinkle{from{opacity:.27}to{opacity:.9}}
.lid{transform-origin:50% 40%;transform-box:fill-box}
.light{opacity:0;transform-origin:center;transform-box:fill-box}
[data-state=opening] .lid{animation:unbox 950ms cubic-bezier(.24,.55,.32,1) both}
[data-state=opened] .lid{transform:translate(35px,-37px) rotate(10deg)}
[data-state=opening] .light,[data-state=opened] .light{opacity:1;animation:light-up 950ms ease-out both}
[data-state=opening] .spark,[data-state=opened] .spark{animation:burst 940ms cubic-bezier(.25,.65,.2,1) both}
@keyframes unbox{0%{transform:none}18%{transform:translateY(-5px) rotate(-5deg)}32%{transform:translateY(-2px) rotate(4deg)}100%{transform:translate(35px,-37px) rotate(10deg)}}
@keyframes light-up{0%,20%{opacity:0;transform:scale(.4)}65%{opacity:1;transform:scale(1.22)}100%{opacity:.83;transform:scale(1)}}
@keyframes burst{0%{opacity:.25;transform:translateY(18px) scale(.7)}65%{opacity:1;transform:translateY(-12px) scale(1.45)}100%{opacity:.86;transform:none}}
.action-area{display:grid;justify-items:center;min-height:65px;align-content:center}
.action-area p{max-width:360px;margin:0 auto;color:var(--dim);font-size:15px}
#reveal{border:1px solid #ffe5ae;border-radius:13px;padding:12px 27px;min-height:54px;max-width:100%;font:750 16px var(--sans);color:#352016;background:linear-gradient(145deg,#ffe4ab,#e4ad65);box-shadow:0 7px 27px #e7b77137,inset 0 0 0 3px #8d4b2722;cursor:pointer;transition:filter .2s,transform .2s}
#reveal span{margin-right:4px}
#reveal:hover:not(:disabled){filter:brightness(1.11);transform:translateY(-2px)}
#reveal:disabled{cursor:progress}
#reveal:focus-visible,#recipient:focus-visible{outline:2px solid #ffe2a9;outline-offset:5px}
#result{padding:10px 12px 12px;width:min(100%,420px);border:1px solid var(--frame);border-radius:16px;background:linear-gradient(140deg,#2c3625,#191e19);animation:appear 360ms ease-out both}
#result .result-label{font-size:10px;color:var(--gold)}
@keyframes appear{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.privacy,noscript p{color:#c9bda8;font-size:12px;max-width:385px;margin:14px auto 0}
footer{margin-top:14px;color:#d3b489;font-size:9px;letter-spacing:.21em}
footer span{width:29px;height:1px;background:var(--frame)}
@media(min-width:620px){.card{padding:37px 30px 25px}.masthead{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}[data-state=opened] .light{opacity:.83}#reveal:hover:not(:disabled){transform:none}}
