:root{--mint:#effcf5;--em:#0f9d6b;--gold:#ffb81c;--tang:#ff6b35;--ink:#26143f;--blush:#ffd6e0}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--mint);color:var(--ink);font:500 1.08rem/1.75 Quicksand,system-ui,sans-serif;overflow-x:hidden}
h1,h2,h3,.name,.big b,.btn,.bubble{font-family:'Lilita One','Quicksand',system-ui,sans-serif;font-weight:400}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,[role=button]:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.sound{position:absolute;top:14px;right:14px;z-index:10;border:0;border-radius:99px;padding:.5rem .95rem;font-weight:700;font-size:.85rem;background:#fff;color:var(--ink);box-shadow:0 4px 0 rgba(38,20,63,.18)}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;text-align:center;padding:64px 1rem 0;overflow:hidden;background:linear-gradient(#ffd479,#ffeccb 52%,#d9f7e6)}
.hero-text{position:relative;z-index:4}
h1{font-size:clamp(2.5rem,10vw,5.4rem);line-height:1.02;color:var(--ink)}
.w{display:inline-block;animation:wordin .8s calc(.3s + var(--i)*.18s) cubic-bezier(.3,1.6,.5,1) both}
@keyframes wordin{from{opacity:0;scale:.3;translate:0 40px}}
.name{position:relative;display:inline-block;margin:.2rem 0 .5rem;color:var(--tang);font-size:clamp(2.4rem,10vw,4.6rem);line-height:1.1;animation:wordin .8s 1s cubic-bezier(.3,1.6,.5,1) both}
.name svg{position:absolute;left:0;bottom:-6px;width:100%;height:14px}
.name path{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s 1.8s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hint{font-weight:700;margin-top:.6rem;animation:nudge 1.6s 3s ease-in-out infinite}
@keyframes nudge{50%{translate:0 -5px}}
.bubble{display:inline-block;max-width:30ch;margin-top:.5rem;padding:.55rem 1.1rem;background:#fff;border:3px solid var(--gold);border-radius:20px;font-size:1.15rem;line-height:1.35;box-shadow:0 5px 0 rgba(38,20,63,.12);min-height:3.2rem}
.bubble.pop{animation:bpop .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes bpop{from{scale:.7;opacity:.3}}

.sun{position:absolute;left:50%;bottom:70px;z-index:1;width:min(430px,78vw);aspect-ratio:1;translate:-50% 0;border-radius:50%;background:radial-gradient(circle,#fff6bf,#ffc83d 62%,#ffb81c);box-shadow:0 0 70px 20px rgba(255,200,61,.55);animation:rise 3.2s .2s cubic-bezier(.2,.7,.2,1) both}
.sun::before{content:"";position:absolute;inset:-34%;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.4) 0 5deg,transparent 5deg 18deg);-webkit-mask:radial-gradient(circle,transparent 38%,#000 39%,transparent 70%);mask:radial-gradient(circle,transparent 38%,#000 39%,transparent 70%);animation:spin 40s linear infinite}
@keyframes rise{from{translate:-50% 75%}}
@keyframes spin{to{rotate:360deg}}
.hills{position:absolute;inset:auto 0 0;height:110px;z-index:2;background:linear-gradient(transparent 50%,var(--em) 51%)}
.hills::before,.hills::after{content:"";position:absolute;bottom:-60px;height:150px;border-radius:50%}
.hills::before{left:-20%;width:80%;background:#3ccf94}
.hills::after{right:-25%;width:85%;background:#1fb57c}

.tree{position:relative;z-index:3;margin-top:auto;width:min(460px,92vw);overflow:visible}
.limbs path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s .5s forwards}
.leaves circle{transform-box:fill-box;transform-origin:center;scale:0;animation:grow .7s var(--d) cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes grow{to{scale:1}}
.fruit{transform-box:fill-box;transform-origin:center;cursor:pointer;animation:pop .5s var(--d) cubic-bezier(.3,1.7,.5,1) both,pulse 2.2s calc(var(--d) + .6s) ease-in-out infinite}
@keyframes pop{from{scale:0}}
@keyframes pulse{50%{scale:1.14}}
.fruit:hover{filter:brightness(1.1)}
.fruit:focus-visible{outline:none}
.fruit:focus-visible circle:first-child{stroke:var(--ink);stroke-width:3}
.fruit.drop{animation:fall 1s cubic-bezier(.5,0,1,.6) forwards;pointer-events:none}
@keyframes fall{to{translate:0 var(--fall);opacity:0}}

/* sections */
.sec{max-width:760px;margin:0 auto;padding:4.5rem 1.3rem;text-align:center}
.sec h2,.finale h2{font-size:clamp(2rem,7vw,3.2rem);line-height:1.1;margin-bottom:1.4rem}
.rv{opacity:0;translate:0 24px;transition:opacity .6s,translate .7s cubic-bezier(.3,1.4,.5,1)}
.rv.in{opacity:1;translate:0 0}
.signbox{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:2rem;font-weight:700}
input{font:inherit;padding:.6rem 1rem;border-radius:99px;border:3px solid var(--blush);background:#fff;color:var(--ink);flex:1 1 170px;max-width:240px;min-width:0}

.gift{position:relative;width:200px;height:190px;margin:0 auto;cursor:pointer;animation:jig 3s ease-in-out infinite;transition:opacity .5s,height .5s,margin .5s}
@keyframes jig{0%,70%,100%{rotate:0deg}75%{rotate:-4deg}85%{rotate:4deg}}
.box{position:absolute;bottom:0;left:10px;width:180px;height:120px;border-radius:6px 6px 14px 14px;box-shadow:0 10px 0 rgba(0,0,0,.12);background:linear-gradient(90deg,transparent calc(50% - 15px),var(--gold) calc(50% - 15px) calc(50% + 15px),transparent calc(50% + 15px)),var(--tang)}
.lid{position:absolute;left:0;bottom:112px;width:200px;height:46px;z-index:2;border-radius:10px;background:linear-gradient(90deg,transparent calc(50% - 15px),var(--gold) calc(50% - 15px) calc(50% + 15px),transparent calc(50% + 15px)),#ff8a5c;transition:translate .6s cubic-bezier(.3,1.6,.5,1),rotate .6s,opacity .4s .3s}
.lid::before,.lid::after{content:"";position:absolute;top:-26px;width:34px;height:34px;border:8px solid var(--gold);border-radius:50%}
.lid::before{left:calc(50% - 38px)}.lid::after{left:calc(50% + 4px)}
.gift.open{animation:none}
.gift.open .lid{translate:0 -80px;rotate:-22deg;opacity:0}
.gift.gone{opacity:0;height:0;margin:0;overflow:hidden;pointer-events:none}
.tap{margin-top:1.2rem;font-weight:700}
.letter{display:none;text-align:left;background:#fff;border-radius:20px;border-top:12px solid var(--gold);padding:1.6rem clamp(1.2rem,5vw,2.6rem) 2rem;box-shadow:0 10px 0 rgba(38,20,63,.08),0 20px 40px rgba(38,20,63,.14)}
.letter.show{display:block;animation:lup .8s cubic-bezier(.3,1.4,.5,1)}
@keyframes lup{from{opacity:0;translate:0 40px;scale:.9}}
.letter h3{font-size:2rem;color:var(--tang);margin-bottom:.8rem}
.letter p{margin-bottom:1rem;opacity:0;animation:fadein .7s calc(var(--n)*.7s + .5s) forwards}
@keyframes fadein{to{opacity:1}}
.letter .sign{text-align:right;font-weight:700;margin:0}
.letter .sign span{font-family:'Lilita One';font-size:1.4rem;color:var(--em)}

.words{text-align:left}
.words h2{text-align:center}
.big{display:flex;flex-direction:column;margin-bottom:2.2rem}
.big.r{align-items:flex-end;text-align:right}
.big b{font-size:clamp(3.2rem,17vw,6.6rem);line-height:.95}
.big span{font-weight:700;font-size:1.15rem}
.t1{background:linear-gradient(transparent 62%,#ffd479 62% 92%,transparent 92%)}
.t2{background:linear-gradient(transparent 62%,#9be8c5 62% 92%,transparent 92%)}
.t3{background:linear-gradient(transparent 62%,var(--blush) 62% 92%,transparent 92%)}

.finale{background:var(--em);color:#fff;text-align:center;padding:5rem 1.3rem 4rem;position:relative}
.finale p{max-width:34ch;margin:0 auto 1.6rem;font-weight:700;font-size:1.15rem}
.stars{font-size:1.6rem;color:var(--gold);letter-spacing:.5em;margin-bottom:1rem;animation:twinkle 2s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.4}}
.btn{border:0;border-radius:99px;padding:.7rem 1.9rem;font-size:1.25rem;color:var(--ink);background:var(--gold);box-shadow:0 6px 0 #c98600;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 #c98600}
.text-btn{display:block;margin:1.4rem auto 0;border:0;background:none;color:#fff;font-weight:700;text-decoration:underline}
.toast{position:fixed;left:50%;bottom:24px;translate:-50% 140%;z-index:60;background:var(--ink);color:#fff;padding:.7rem 1.2rem;border-radius:99px;font-weight:700;transition:translate .4s cubic-bezier(.3,1.5,.5,1);max-width:90vw;text-align:center}
.toast.show{translate:-50% 0}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01s!important;scroll-behavior:auto!important}}