body{background:radial-gradient(ellipse at 50% 15%,#3c191b 0,#170f16 46%,#0d1518 100%);overflow-x:hidden}header{color:#f7e8cd;text-align:center}header span{color:#d3b680}.christmas{position:relative;text-align:center;padding:38px 0 12px;isolation:isolate}.christmas h1{font-size:clamp(38px,8vw,58px);margin:12px 0}.christmas .intro{max-width:360px;margin:12px auto;color:#dfc8bd}.gift-scene{height:245px;position:relative;display:grid;place-items:center;perspective:900px}.halo{position:absolute;width:260px;height:220px;border-radius:50%;background:radial-gradient(ellipse,#efc37642,transparent 68%);transform:translateY(30px);transition:transform 1s,opacity 1s}.gift{position:relative;width:176px;height:148px;transform:rotate(-5deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}.gift-body{position:absolute;inset:32px 0 0;background:linear-gradient(115deg,#b5343f,#811423 75%);border:1px solid #d8535d;border-radius:3px;box-shadow:inset 0 0 28px #43091155,0 24px 30px #0006}.gift-body:before{content:'';position:absolute;left:72px;width:30px;top:0;bottom:0;background:linear-gradient(90deg,#b5904c,#f3df9c,#c39e59)}.gift-mark{position:absolute;left:0;right:0;bottom:20px;font:12px Georgia,serif;letter-spacing:.16em;color:#fbe8b8}.gift-lid{position:absolute;left:-8px;right:-8px;top:16px;height:37px;background:linear-gradient(115deg,#ce4853,#8e1e2d);border:1px solid #e26971;border-radius:3px;box-shadow:0 7px 6px #41070c66;transform-origin:15% 100%;transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity .8s .35s}.gift-lid:before{content:'';position:absolute;left:80px;top:0;width:30px;height:100%;background:linear-gradient(90deg,#b5904c,#f3df9c,#c39e59)}.bow{position:absolute;left:72px;top:-23px;width:34px;height:25px;background:#e7ce87;border-radius:45% 45% 20% 20%}.bow:before,.bow:after{content:'';position:absolute;width:46px;height:28px;top:-5px;border:7px solid #e9cf8c;border-radius:65% 65% 30% 50%;box-shadow:inset 0 0 6px #9c692f}.bow:before{right:21px;transform:rotate(-24deg)}.bow:after{left:21px;transform:rotate(24deg)}.glow-card{position:absolute;left:21px;right:21px;top:38px;height:80px;border-radius:4px;background:linear-gradient(135deg,#fff4d4,#d9bb78);box-shadow:0 0 35px #f6c764;opacity:0;transition:transform .9s .1s,opacity .4s .1s;display:grid;place-items:center;font:24px Georgia,serif;color:#60212a}.opened .gift-lid{transform:translate3d(15px,-105px,45px) rotate(-25deg);opacity:0}.opened .gift{transform:rotate(0)}.opened .glow-card{opacity:1;transform:translateY(-55px)}.opened .halo{transform:scale(1.6);opacity:.65}#unwrap{max-width:380px;width:100%;position:relative;z-index:2;background:linear-gradient(100deg,#c9a767,#f0d9a0,#c9a767);border-color:#edcf8c;color:#382016;box-shadow:0 8px 30px #caa45720}#unwrap:focus-visible{outline:3px solid white;outline-offset:5px}.greeting{padding:24px 0 20px;transition:background 1s}.greeting h1{font-size:32px}.opened+.greeting{animation:messageReveal .9s both}.opened+.greeting #message{color:#f2ded2}.snow{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}.snow i{position:absolute;top:-15px;left:var(--left);width:var(--size);height:var(--size);border-radius:50%;background:#fff5dd;opacity:.35;animation:snowfall var(--duration) linear infinite;animation-delay:var(--delay)}.burst{position:absolute;left:50%;top:55%;width:0;height:0;pointer-events:none}.burst i{position:absolute;width:5px;height:9px;background:var(--color);opacity:0;border-radius:1px}.opened .burst i{animation:celebrate 1.5s cubic-bezier(.15,.7,.3,1) var(--delay) both}.fairy-lights{display:flex;justify-content:space-around;position:absolute;top:0;left:-5%;right:-5%;border-top:1px solid #ad936344;padding-top:7px}.fairy-lights i{height:8px;width:5px;border-radius:50%;background:#f4d99c;box-shadow:0 0 8px 3px #ffd78e66;animation:twinkle 3s ease-in-out infinite alternate;animation-delay:var(--delay)}.replay{background:none;border:0;color:#cfb98f;font-size:14px;padding:8px;margin:8px auto;display:block}.music{background:#100e12;border-color:#dab87c33}details{background:#0f181bcc}footer{color:#d2b985}@keyframes snowfall{to{transform:translate3d(25px,110vh,0)}}@keyframes celebrate{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--rotate))}}@keyframes messageReveal{from{transform:translateY(12px);opacity:.5}to{transform:translateY(0);opacity:1}}@keyframes twinkle{to{opacity:.35;box-shadow:0 0 4px #ffd78e44}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.snow,.burst{display:none}.opened .gift-lid{display:none}}@media(max-width:400px){.christmas{padding-top:28px}.gift-scene{height:220px}.christmas .intro{font-size:15px}}
main{position:relative;z-index:1}.snow{z-index:0}.replay[hidden]{display:none}