:root{--sun:#ffd23f;--coral:#ff5d8f;--teal:#17c3b2;--grape:#7b4dff;--orange:#ff9f43;--ink:#2a1b4d;--paper:#fffdf5}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:400 1.05rem/1.75 Nunito,system-ui,sans-serif;color:var(--ink);background:linear-gradient(#7fd3ff 0,#c9edff 90vh,#fff6dc 200vh,#ffe3ef 100%);overflow-x:hidden}
h1,h2,h3,.btn,.name-pill,.brand,.wish{font-family:'Baloo 2',system-ui,sans-serif}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--grape);outline-offset:3px}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}

.top{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(14px,4vw,48px);z-index:10}
.brand{font-weight:800;font-size:1.1rem}
.music{font:800 .85rem Nunito,sans-serif;border:0;border-radius:99px;padding:.6rem 1rem;background:#fff;color:var(--ink);box-shadow:0 4px 0 rgba(42,27,77,.18)}
.music:active{transform:translateY(3px);box-shadow:none}

.btn{border:0;border-radius:99px;padding:.7rem 1.9rem;font-weight:800;font-size:1.2rem;color:#fff;background:var(--coral);box-shadow:0 6px 0 #c93a6a;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 #c93a6a}
.btn.alt{background:var(--teal);box-shadow:0 6px 0 #0e8c7f}
.btn.alt:active{box-shadow:0 1px 0 #0e8c7f}
.text-btn{display:block;margin:1.4rem auto 0;border:0;background:none;color:var(--ink);font-weight:700;text-decoration:underline}
.center{text-align:center;margin-top:1.2rem}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;padding:90px 1.2rem 60px;overflow:hidden}
.hero-text{position:relative;z-index:3}
.sun{position:absolute;top:70px;right:6%;width:84px;height:84px;border-radius:50%;background:var(--sun);box-shadow:0 0 50px 14px rgba(255,210,63,.6)}
.sun::before{content:"";position:absolute;inset:-26px;border-radius:50%;background:repeating-conic-gradient(var(--sun) 0 7deg,transparent 7deg 22.5deg);-webkit-mask:radial-gradient(circle,transparent 58%,#000 59%);mask:radial-gradient(circle,transparent 58%,#000 59%);animation:spin 24s linear infinite}
@keyframes spin{to{rotate:360deg}}
.cloud{position:absolute;left:-200px;width:130px;height:40px;background:#fff;border-radius:40px;opacity:.95;animation:drift linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:56px;height:56px;left:20px;top:-26px}.cloud::after{width:42px;height:42px;left:68px;top:-18px}
.c1{top:18%;animation-duration:60s}.c2{top:52%;scale:.7;animation-duration:80s;animation-delay:-30s}.c3{top:76%;scale:1.2;animation-duration:100s;animation-delay:-60s}
@keyframes drift{to{translate:calc(100vw + 400px) 0}}
.rainbow{position:absolute;top:60px;left:50%;width:min(1000px,135vw);translate:-50% 0;z-index:1;opacity:.9}
.rainbow path{fill:none;stroke-width:22;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s cubic-bezier(.5,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

#title{font-weight:800;font-size:clamp(2.6rem,10.5vw,6.2rem);line-height:1.02;text-shadow:0 0 18px rgba(255,255,255,.85),0 4px 0 rgba(255,255,255,.8)}
.w{display:inline-block;white-space:nowrap}
.ch{display:inline-block;animation:drop .8s cubic-bezier(.3,1.7,.5,1) both}
@keyframes drop{from{opacity:0;transform:translateY(-130%) rotate(-14deg)}}
.name-pill{display:inline-block;margin:.7rem 0 1rem;padding:0 1.6rem;background:var(--coral);color:#fff;font-weight:800;font-size:clamp(2rem,8vw,3.8rem);line-height:1.3;border-radius:26px;rotate:-2deg;box-shadow:0 7px 0 #c93a6a;animation:wob 2.6s ease-in-out infinite alternate}
@keyframes wob{to{rotate:2deg}}
.lead{max-width:34ch;margin:0 auto 1.6rem;font-weight:700;font-size:1.15rem}

/* balloons */
.bal{background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.8) 0 9%,transparent 10%),var(--c);border-radius:50% 50% 48% 48%/58% 58% 42% 42%}
.bal::after{content:"";position:absolute;left:50%;top:100%;width:2px;height:44px;background:rgba(42,27,77,.35)}
.floaters{position:absolute;inset:0;z-index:2;pointer-events:none}
.fb{position:absolute;bottom:-140px;width:52px;height:64px;animation:rise linear infinite}
@keyframes rise{to{translate:var(--dx) -125vh}}

/* sections */
.sec{position:relative;z-index:2;max-width:880px;margin:0 auto;padding:4.5rem 1.3rem}
.sec h2{font-size:clamp(1.9rem,6vw,3rem);font-weight:800;line-height:1.1;margin-bottom:1.6rem;text-align:center}
.rv{opacity:0;scale:.92;transition:opacity .6s,scale .7s cubic-bezier(.3,1.5,.5,1)}
.rv.in{opacity:1;scale:1}

.note{position:relative;background-color:var(--paper);border-radius:10px;padding:2.4rem 1.5rem 1.6rem 3.6rem;rotate:-.7deg;box-shadow:0 12px 0 rgba(42,27,77,.08),0 18px 40px rgba(42,27,77,.15);background-image:linear-gradient(90deg,transparent 2.7rem,#ff9db8 2.7rem 2.8rem,transparent 2.8rem),repeating-linear-gradient(transparent 0 1.7rem,#cfe8f5 1.7rem 1.75rem)}
.note::before,.note::after{content:"";position:absolute;top:-14px;width:90px;height:28px;background:rgba(255,210,63,.8);rotate:-6deg}
.note::before{left:12%}.note::after{right:12%;rotate:5deg;background:rgba(23,195,178,.6)}
.note h3{font-size:2rem;line-height:1.75rem;margin-bottom:1.75rem;color:var(--coral)}
.note p{line-height:1.75rem;margin-bottom:1.75rem}
.note .sign{text-align:right;margin-bottom:0;font-weight:700}
.note .sign span{font-family:'Baloo 2';font-size:1.4rem;color:var(--grape)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.4rem}
.card{padding:1.5rem;border-radius:22px;box-shadow:0 8px 0 rgba(42,27,77,.15);transition:rotate .25s,translate .25s}
.card i{font-style:normal;font-size:2.4rem;display:block;line-height:1.3}
.card h3{font-size:1.5rem;line-height:1.2;margin:.3rem 0 .4rem}
.a{background:var(--sun);rotate:-2deg}.b{background:#ffb3cb;rotate:1.5deg}.c{background:#8be9dd;rotate:-1deg}
.card:hover{rotate:0deg;translate:0 -6px}

.field{position:relative;height:340px;border-radius:28px;background:rgba(255,255,255,.55);border:3px dashed rgba(42,27,77,.2);overflow:hidden}
.bln{position:absolute;width:56px;height:68px;border:0;padding:0;animation:bob 3s ease-in-out infinite alternate;transition:scale .25s,opacity .25s}
@keyframes bob{from{translate:0 0;rotate:-5deg}to{translate:0 -16px;rotate:5deg}}
.bln.pop{scale:1.6;opacity:0;animation:none}
.wish{min-height:4.8rem;max-width:560px;margin:1.3rem auto 0;text-align:center;font-weight:800;font-size:1.4rem;line-height:1.3;color:var(--grape)}
.wish.shake{animation:pop .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes pop{from{scale:.6;opacity:0}}
.count{text-align:center;font-weight:700}

.finale{text-align:center;padding-bottom:3rem}
.heart{font-size:5.5rem;line-height:1;color:var(--coral);display:inline-block;animation:beat 1.1s ease-in-out infinite;text-shadow:0 8px 0 rgba(201,58,106,.3)}
@keyframes beat{50%{scale:1.18}}
footer{position:relative;z-index:2;text-align:center;padding:1rem 1rem 3rem;font-weight:700}
.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-iteration-count:1!important;transition-duration:.01s!important;scroll-behavior:auto!important}}