.tree-celebration{
    position:fixed;
    inset:0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(20,30,20,.28);
    opacity:0;
    pointer-events:auto;
    animation:treeCelebrationFadeIn .35s ease forwards;
}
.tree-celebration-close{
    position:absolute;
    top:20px;
    right:20px;
    border:1px solid rgba(255,255,255,.7);
    background:rgba(0,0,0,.25);
    color:#fff;
    padding:7px 14px;
    border-radius:20px;
    font-size:14px;
    cursor:pointer;
}
.tree-celebration-close:hover{
    background:rgba(0,0,0,.4);
}
.tree-celebration.hide{
    animation:treeCelebrationFadeOut .55s ease forwards;
}
.tree-celebration-content{
    position:relative;
    width:min(90vw,500px);
    text-align:center;
    color:#fff;
}
.tree-celebration-number{
    position:relative;
    z-index:2;
    font-size:clamp(72px,18vw,130px);
    font-weight:700;
    line-height:.95;
    letter-spacing:-4px;
    text-shadow:0 4px 18px rgba(0,0,0,.35);
    animation:treeCelebrationNumber .85s cubic-bezier(.2,1.45,.35,1) forwards;
}
.tree-celebration-unit{
    position:relative;
    z-index:2;
    margin-top:18px;
    font-size:clamp(20px,5vw,28px);
    font-weight:500;
    text-shadow:0 2px 8px rgba(0,0,0,.35);
    opacity:0;
    animation:treeCelebrationText .5s ease .55s forwards;
}
.tree-celebration-message{
    position:relative;
    z-index:2;
    margin-top:10px;
    font-size:15px;
    opacity:0;
    text-shadow:0 2px 6px rgba(0,0,0,.3);
    animation:treeCelebrationText .5s ease .75s forwards;
}
.tree-celebration-particles{
    position:absolute;
    left:50%;
    top:50%;
    width:1px;
    height:1px;
}
.tree-celebration-particle{
    position:absolute;
    left:0;
    top:0;
    width:7px;
    height:7px;
    border-radius:50%;
    opacity:0;
    animation:treeCelebrationParticle 1.5s ease-out forwards;
}
.tree-celebration-leaf{
    position:absolute;
    left:50%;
    top:50%;
    width:11px;
    height:7px;
    border-radius:100% 0 100% 0;
    opacity:0;
    animation:treeCelebrationLeaf 1.8s ease-out forwards;
}
@keyframes treeCelebrationFadeIn{
    from{opacity:0}
    to{opacity:1}
}
@keyframes treeCelebrationFadeOut{
    from{opacity:1}
    to{opacity:0}
}
@keyframes treeCelebrationNumber{
    0%{
        transform:scale(.25);
        opacity:0;
    }
    55%{
        transform:scale(1.15);
        opacity:1;
    }
    75%{
        transform:scale(.96);
    }
    100%{
        transform:scale(1);
        opacity:1;
    }
}
@keyframes treeCelebrationText{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
@keyframes treeCelebrationParticle{
    0%{
        opacity:0;
        transform:translate(0,0) scale(.3);
    }
    15%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1);
    }
}
@keyframes treeCelebrationLeaf{
    0%{
        opacity:0;
        transform:translate(0,0) rotate(0deg) scale(.4);
    }
    15%{
        opacity:.95;
    }
    100%{
        opacity:0;
        transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1);
    }
}
@media(prefers-reduced-motion:reduce){
    .tree-celebration,
    .tree-celebration.hide,
    .tree-celebration-number,
    .tree-celebration-unit,
    .tree-celebration-message,
    .tree-celebration-particle,
    .tree-celebration-leaf{
        animation:none;
    }
    .tree-celebration{
        opacity:1;
    }
    .tree-celebration-number,
    .tree-celebration-unit,
    .tree-celebration-message{
        opacity:1;
    }
}