:root{--navy-dark:#061a3a;--navy:#082657;--navy-light:#0b3674;--gold:#d4af37;--gold-light:#f4d675;--gold-bright:#ffd700;--ivory:#fff9ec;--white:#fffdf7;--serif:'Cinzel',serif;--sans:'Montserrat',sans-serif;--script:'Great Vibes',cursive}
*{box-sizing:border-box}html{background:var(--navy-dark)}body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--ivory);font-family:var(--sans);background:radial-gradient(circle at 50% 20%,#164d9a55,transparent 32%),radial-gradient(circle at 80% 75%,#d4af3722,transparent 24%),linear-gradient(145deg,#020b19,#061a3a 45%,#04132d);display:grid;place-items:center}.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none}.bokeh{position:absolute;border-radius:50%;filter:blur(8px);background:#f4d67533;animation:drift 10s ease-in-out infinite}.b1{width:140px;height:140px;left:8%;top:12%}.b2{width:80px;height:80px;right:10%;top:32%;animation-delay:-3s}.b3{width:180px;height:180px;left:62%;bottom:5%;animation-delay:-6s}@keyframes drift{50%{transform:translateY(-25px) scale(1.08);opacity:.5}}
.opening{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#0b3674 0,#061a3a 40%,#020a18 100%);transition:opacity .8s ease,visibility .8s}.opening.hide{opacity:0;visibility:hidden}.opening:before{content:"";position:absolute;inset:22px;border:1px solid #d4af3744;pointer-events:none}.opening-content{text-align:center;position:relative;padding:30px;z-index:2}.gift-wrap{width:112px;height:112px;margin:0 auto 28px;display:grid;place-items:center;position:relative;color:var(--gold-light)}.gift-wrap svg{width:67px;height:67px;stroke-width:1.25;filter:drop-shadow(0 0 15px #ffd70099);animation:giftFloat 3s ease-in-out infinite}.gift-glow{position:absolute;inset:0;border:1px solid #d4af3766;border-radius:50%;box-shadow:0 0 40px #d4af3733,inset 0 0 25px #d4af3722;animation:pulse 4s ease-in-out infinite}.eyebrow,.celebrate{font-family:var(--serif);font-size:10px;letter-spacing:.42em;color:var(--gold-light)}.opening-rule,.title-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:17px auto}.opening-rule span,.title-divider span{height:1px;width:70px;background:linear-gradient(90deg,transparent,var(--gold))}.opening-rule span:last-child,.title-divider span:last-child{transform:scaleX(-1)}.opening-rule b,.title-divider b{color:var(--gold);font-size:10px}.opening h1{font-family:var(--serif);font-size:clamp(25px,4vw,42px);font-weight:500;line-height:1.35;margin:14px 0;color:var(--ivory);letter-spacing:.06em}.tap-copy{font-size:11px;letter-spacing:.25em;opacity:.62;margin:25px 0 14px}.open-button,.actions button{border:1px solid var(--gold);color:var(--navy-dark);font-family:var(--serif);font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(110deg,#b8860b,#f4d675,#d4af37,#fff0a5,#b8860b);background-size:220% auto;animation:shimmer 4s linear infinite;box-shadow:0 0 25px #d4af3744;cursor:pointer}.open-button{height:54px;padding:0 30px;border-radius:3px;display:inline-flex;align-items:center;gap:12px}.open-button svg{width:18px}.open-button:hover{transform:translateY(-2px);box-shadow:0 0 35px #f4d67566}.opening-stars i{position:absolute;width:3px;height:3px;background:var(--gold-light);border-radius:50%;animation:twinkle var(--dur) ease-in-out infinite;left:var(--x);top:var(--y)}
.age-reveal{position:fixed;inset:0;z-index:80;display:grid;place-content:center;text-align:center;pointer-events:none;opacity:0;visibility:hidden;background:radial-gradient(circle,#0b3674dd,#031027f2 65%);transition:.5s}.age-reveal.show{opacity:1;visibility:visible}.age-reveal p,.age-reveal span{font-family:var(--serif);letter-spacing:.65em;margin:0;color:var(--gold-light)}.age-reveal strong{font-family:var(--serif);font-size:min(34vw,230px);line-height:.9;background:linear-gradient(100deg,#b8860b,#fff3af,#d4af37);background-size:200% auto;-webkit-background-clip:text;color:transparent;animation:shimmer 2s linear infinite;filter:drop-shadow(0 0 30px #d4af3755)}
.stage{width:100%;padding:28px 12px;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity 1s ease}.stage.visible{opacity:1;visibility:visible}.birthday-card{position:relative;width:min(92vw,600px);aspect-ratio:2/3;min-height:860px;overflow:hidden;border:1px solid #f4d67588;border-radius:4px;background:radial-gradient(circle at 85% 8%,#d4af3730,transparent 22%),radial-gradient(circle at 5% 75%,#164d9a88,transparent 32%),linear-gradient(160deg,#0b3674 0,#061a3a 37%,#020c20 100%);box-shadow:0 35px 100px #000a,0 0 0 7px #061a3a,0 0 0 8px #d4af3744;padding:38px 42px 26px;text-align:center;isolation:isolate}.birthday-card:after{content:"";position:absolute;inset:0;z-index:-2;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.pointer-glow{position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(250px circle at var(--mx,50%) var(--my,50%),#fff4bd20,transparent 60%);transition:opacity .3s}.birthday-card:hover .pointer-glow{opacity:1}.corner{position:absolute;width:75px;height:75px;border-color:#d4af3788}.corner-tl{left:13px;top:13px;border-left:1px solid;border-top:1px solid}.corner-br{right:13px;bottom:13px;border-right:1px solid;border-bottom:1px solid}.float-mark{position:absolute;color:#f4d67588;font-size:18px;animation:float 5s ease-in-out infinite}.mark-1{top:9%;left:8%}.mark-2{top:29%;right:7%;animation-delay:-2s}.mark-3{bottom:22%;left:7%;animation-delay:-3.5s}.hero{position:relative;z-index:2}.celebrate{margin:0 0 5px}.hero h1{margin:0;line-height:.78}.script{display:block;font-family:var(--script);font-size:clamp(58px,11vw,78px);font-weight:400;background:linear-gradient(100deg,#b8860b,#fff1a0 47%,#d4af37 75%);background-size:200% auto;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 3px 9px #0008);animation:shimmer 5s linear infinite}.serif{display:block;font-family:var(--serif);font-size:clamp(23px,5vw,34px);text-transform:uppercase;letter-spacing:.22em;color:var(--ivory);margin-top:12px}.title-divider{margin:18px auto 15px}
.portrait-area{height:238px;position:relative;display:grid;place-items:center}.halo{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,#ffe68d55 0,#d4af3725 35%,transparent 68%);animation:pulse 5s ease-in-out infinite}.portrait-ring{width:218px;height:218px;border-radius:50%;padding:6px;background:linear-gradient(135deg,#fff4b0,#b8860b,#f4d675);box-shadow:0 0 0 3px #061a3a,0 0 0 4px #f4d67588,0 15px 35px #0008;overflow:hidden;position:relative}.portrait-ring:after{content:"";position:absolute;inset:6px;border-radius:50%;box-shadow:inset 0 0 25px #001436}.portrait-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 25%;transition:transform .25s ease;will-change:transform}.name-line{display:flex;align-items:center;gap:14px;justify-content:center;margin:6px 0 15px}.name-line span{height:1px;flex:1;max-width:72px;background:linear-gradient(90deg,transparent,var(--gold))}.name-line span:last-child{transform:scaleX(-1)}.name-line h2{font-family:var(--serif);font-size:20px;letter-spacing:.17em;line-height:1.35;margin:0;background:linear-gradient(100deg,#b8860b,#fff0a5,#d4af37);-webkit-background-clip:text;color:transparent}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.fact{min-height:71px;border:1px solid #ffd70038;border-radius:13px;background:#ffffff0d;backdrop-filter:blur(10px);padding:10px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--ivory);font-size:10px;line-height:1.35}.fact svg{width:17px;height:17px;color:var(--gold-light);stroke-width:1.7}.fact small{font-size:9px;color:#f4d675}.message{position:relative;margin:13px 0 10px;padding:15px 22px 12px;background:linear-gradient(145deg,#ffffff10,#ffffff05);border:1px solid #d4af3740;border-radius:16px;box-shadow:inset 0 1px #ffffff12}.quote-star{position:absolute;top:-9px;left:50%;transform:translateX(-50%);color:var(--gold-light);background:var(--navy-dark);padding:0 8px}.message p{font-family:'Montserrat',sans-serif;font-size:10.5px;line-height:1.65;margin:3px 0;color:#fffdf7e8}.message .closing{font-size:9px;color:#fff9ecc5}.message em{display:block;font-family:serif;font-size:9px;color:var(--gold-light);margin-top:6px}.mini-rule{height:1px;width:45px;margin:8px auto;background:var(--gold)}
.cake-wrap{height:79px;position:relative;width:90px;margin:0 auto}.candle{height:24px;width:6px;background:repeating-linear-gradient(45deg,var(--ivory) 0 4px,var(--gold) 4px 8px);margin:auto;position:relative}.candle i{position:absolute;width:9px;height:14px;left:-1.5px;top:-14px;background:radial-gradient(circle at 50% 70%,#fff 0 10%,#ffd700 35%,#f18b16 70%);border-radius:70% 30% 60% 40%;transform-origin:bottom;animation:flame .8s ease-in-out infinite alternate;filter:drop-shadow(0 0 6px #ffd700)}.cake-top{width:72px;height:10px;border-radius:50%;background:var(--ivory);margin:auto;box-shadow:inset 0 -3px var(--gold)}.cake-body{width:70px;height:25px;margin:-4px auto 0;background:linear-gradient(90deg,#e5d7ba,var(--ivory),#d8c69d);border-radius:0 0 7px 7px;display:flex;justify-content:space-around;padding-top:7px}.cake-body span{width:5px;height:5px;border-radius:50%;background:var(--gold)}.cake-wrap p{font-family:var(--serif);font-size:7px;letter-spacing:.27em;color:var(--gold-light);margin:4px 0}.actions{display:flex;justify-content:center;gap:10px;margin-top:3px}.actions button{height:33px;border-radius:20px;padding:0 14px;font-size:8px;display:flex;align-items:center;gap:6px}.actions button:last-child{background:#ffffff0b;color:var(--gold-light);animation:none}.actions svg{width:13px}footer{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;color:#fff9ec99}footer span{height:1px;width:55px;background:linear-gradient(90deg,transparent,#d4af3777)}footer span:last-child{transform:scaleX(-1)}footer p{font-family:var(--serif);font-size:7px;line-height:1.7;letter-spacing:.18em;margin:0}footer b{color:var(--gold-light);font-size:10px}
.particle{position:absolute;bottom:-20px;left:var(--left);width:var(--size);height:var(--size);background:var(--color);opacity:0;transform:rotate(45deg);animation:rise var(--duration) linear infinite;animation-delay:var(--delay);box-shadow:0 0 6px #ffd70088;z-index:0}.reveal{opacity:0;transform:translateY(22px);transition:opacity .85s ease var(--delay),transform .85s cubic-bezier(.2,.75,.25,1) var(--delay)}.stage.revealed .reveal{opacity:1;transform:none}.stage.revealed .portrait-area{transition-duration:1.2s}
@keyframes rise{10%{opacity:var(--opacity)}90%{opacity:var(--opacity)}100%{bottom:105%;opacity:0;transform:translateX(var(--drift)) rotate(225deg)}}@keyframes shimmer{to{background-position:200% center}}@keyframes pulse{50%{transform:scale(1.05);opacity:.75}}@keyframes float{50%{transform:translateY(-13px) rotate(15deg)}}@keyframes flame{to{transform:rotate(5deg) scale(.9,1.08)}}@keyframes giftFloat{50%{transform:translateY(-8px)}}@keyframes twinkle{50%{opacity:.15;transform:scale(.45)}}
@media(max-width:520px){.stage{padding:10px 5px}.birthday-card{width:min(96vw,430px);min-height:780px;padding:29px 23px 20px}.script{font-size:57px}.serif{font-size:22px}.portrait-area{height:210px}.portrait-ring{width:192px;height:192px}.halo{width:245px;height:245px}.name-line h2{font-size:16px}.facts{gap:6px}.fact{padding:8px 3px;font-size:8.5px}.message{padding:13px 14px 10px}.message p{font-size:9.5px;line-height:1.55}.cake-wrap{height:74px}footer{margin-top:8px}.opening:before{inset:12px}}@media(max-width:370px){.birthday-card{min-height:760px;padding-inline:18px}.script{font-size:50px}.serif{font-size:19px}.portrait-area{height:195px}.portrait-ring{width:178px;height:178px}.message p{font-size:9px}.actions button{padding:0 11px}}@media(pointer:coarse){.pointer-glow{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.particle{display:none}}

/* Musical celebration overlay */
.song-show{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden;display:grid;place-items:center;padding:24px}.song-message{position:absolute;max-width:min(88vw,760px);text-align:center;padding:22px 34px;opacity:0;filter:blur(8px);transform:translateY(45px) scale(.9);transition:opacity .6s ease,transform .9s cubic-bezier(.17,.8,.2,1),filter .7s ease}.song-message:before,.song-message:after{content:"";position:absolute;top:50%;width:70px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-light))}.song-message:before{right:100%}.song-message:after{left:100%;transform:scaleX(-1)}.song-message small{display:block;font-family:var(--serif);font-size:9px;letter-spacing:.38em;color:var(--gold-light);margin-bottom:8px;text-shadow:0 0 15px #d4af37}.song-message strong{display:block;font-family:var(--script);font-size:clamp(40px,8vw,76px);font-weight:400;line-height:1.06;background:linear-gradient(100deg,#b8860b,#fff6c7 45%,#ffd700 70%,#b8860b);background-size:200% auto;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 4px 14px #000b);animation:shimmer 3s linear infinite}.song-message span{display:block;margin-top:8px;font-family:var(--serif);font-size:clamp(8px,1.5vw,12px);letter-spacing:.24em;color:var(--ivory);text-transform:uppercase;text-shadow:0 2px 8px #000}.song-message.show{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}.song-message.exit{opacity:0;filter:blur(5px);transform:translateY(-42px) scale(1.06)}.song-message.from-left{transform:translateX(-80px) rotate(-2deg) scale(.92)}.song-message.from-right{transform:translateX(80px) rotate(2deg) scale(.92)}.song-message.from-left.show,.song-message.from-right.show{transform:translateX(0) rotate(0) scale(1)}.beat-spark{position:fixed;z-index:69;pointer-events:none;width:5px;height:5px;background:var(--gold-light);transform:rotate(45deg);box-shadow:0 0 12px #ffd700;animation:beatSpark 1.8s ease-out forwards}@keyframes beatSpark{0%{opacity:0;transform:rotate(45deg) scale(.2)}20%{opacity:1}100%{opacity:0;transform:translate(var(--sx),var(--sy)) rotate(225deg) scale(1.5)}}
@media(max-width:520px){.song-message{padding:18px 12px}.song-message:before,.song-message:after{display:none}.song-message strong{font-size:45px}}

/* Keep musical greetings clear of the portrait */
.song-show{display:block}.song-message{top:max(18px,3vh);left:50%;width:min(84vw,560px);padding:13px 24px 14px;border:1px solid #f4d67566;border-radius:14px;background:linear-gradient(135deg,#061a3ae8,#0b3674d9);box-shadow:0 12px 40px #0009,0 0 24px #d4af3722;backdrop-filter:blur(14px);transform:translate(-50%,30px) scale(.94)}.song-message strong{font-size:clamp(28px,5vw,48px)}.song-message.show{transform:translate(-50%,0) scale(1)}.song-message.exit{transform:translate(-50%,-24px) scale(.98)}.song-message.from-left,.song-message.from-right{transform:translate(-50%,30px) scale(.94)}.song-message.from-left.show,.song-message.from-right.show{transform:translate(-50%,0) scale(1)}
@media(max-width:520px){.song-message{top:12px;width:92vw;padding:10px 14px 11px}.song-message small{font-size:7px;margin-bottom:4px}.song-message strong{font-size:30px}.song-message span{font-size:7px;margin-top:4px}}

/* Reserved musical greeting space below the name */
.birthday-card{min-height:960px}.song-show{position:relative;inset:auto;z-index:4;width:100%;height:94px;padding:0;margin:0 0 10px;overflow:hidden;display:block;border-top:1px solid #d4af372c;border-bottom:1px solid #d4af372c}.song-placeholder{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);font-size:8px;letter-spacing:.35em;color:#f4d67566}.song-message{top:50%;left:50%;width:100%;max-width:none;padding:7px 12px;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;transform:translate(-50%,-25%) scale(.94)}.song-message:before,.song-message:after{display:none}.song-message small{font-size:7px;margin-bottom:3px}.song-message strong{font-size:clamp(25px,5vw,38px);line-height:1}.song-message span{font-size:7px;margin-top:4px}.song-message.show{transform:translate(-50%,-50%) scale(1)}.song-message.exit{transform:translate(-50%,-75%) scale(.98)}.song-message.from-left,.song-message.from-right{transform:translate(-50%,-25%) scale(.94)}.song-message.from-left.show,.song-message.from-right.show{transform:translate(-50%,-50%) scale(1)}
@media(max-width:520px){.birthday-card{min-height:870px}.song-show{height:82px;margin-bottom:8px}.song-message{top:50%;width:100%;padding:5px 4px}.song-message strong{font-size:27px}.song-message span{font-size:6.5px;letter-spacing:.16em}}
@media(max-width:370px){.birthday-card{min-height:850px}.song-show{height:76px}.song-message strong{font-size:24px}}

/* Compact single-screen mobile composition */
.song-show{height:68px;margin-bottom:7px}.song-message small{display:none}.song-message strong{font-size:31px}.song-message span{margin-top:3px}
@media(max-width:520px){body{display:block}.stage{height:100dvh;padding:5px;overflow:hidden}.birthday-card{width:min(96vw,430px);height:calc(100dvh - 10px);min-height:0;max-height:none;aspect-ratio:auto;padding:18px 20px 12px}.celebrate{font-size:8px}.script{font-size:46px}.serif{font-size:18px;margin-top:7px}.title-divider{margin:9px auto 7px}.portrait-area{height:166px}.portrait-ring{width:154px;height:154px}.halo{width:195px;height:195px}.name-line{margin:3px 0 6px}.name-line h2{font-size:13px;line-height:1.22}.song-show{height:52px;margin-bottom:5px}.song-message strong{font-size:23px}.song-message span{font-size:6px;line-height:1.2}.facts{gap:5px}.fact{min-height:52px;padding:5px 2px;font-size:7.5px}.fact svg{width:13px;height:13px}.fact small{font-size:7px}.message{margin:7px 0 5px;padding:9px 12px 7px}.message p{font-size:8px;line-height:1.4}.message .closing{font-size:7.5px}.message em{font-size:7px;margin-top:3px}.mini-rule{margin:5px auto}.cake-wrap{height:61px;transform:scale(.84);transform-origin:top center}.actions{margin-top:-7px}.actions button{height:28px;padding:0 10px;font-size:7px}footer{margin-top:5px}footer p{font-size:6px;line-height:1.45}}
@media(max-width:370px),(max-height:700px){.birthday-card{padding-top:12px}.script{font-size:40px}.serif{font-size:16px}.portrait-area{height:145px}.portrait-ring{width:136px;height:136px}.halo{width:170px;height:170px}.song-show{height:45px}.song-message strong{font-size:20px}.message{padding-block:6px}.message .closing{display:none}.cake-wrap{height:53px;transform:scale(.72)}footer{display:none}}

/* Single-screen desktop composition */
@media(min-width:521px){.stage{height:100dvh;padding:12px;overflow:hidden}.birthday-card{width:min(600px,calc((100dvh - 24px)*2/3),92vw);height:calc(100dvh - 24px);max-height:900px;min-height:0;aspect-ratio:2/3;padding:clamp(18px,3.5vh,34px) clamp(28px,4.5vh,42px) 18px}.celebrate{font-size:clamp(8px,1.1vh,10px)}.script{font-size:clamp(48px,8.2vh,72px)}.serif{font-size:clamp(20px,3.3vh,30px);margin-top:clamp(6px,1.2vh,12px)}.title-divider{margin:clamp(7px,1.5vh,15px) auto clamp(6px,1.2vh,12px)}.portrait-area{height:clamp(165px,24vh,218px)}.portrait-ring{width:clamp(152px,22vh,202px);height:clamp(152px,22vh,202px)}.halo{width:clamp(195px,28vh,255px);height:clamp(195px,28vh,255px)}.name-line{margin:clamp(3px,.8vh,6px) 0 clamp(6px,1.2vh,12px)}.name-line h2{font-size:clamp(14px,2.1vh,19px)}.song-show{height:clamp(46px,7vh,64px);margin-bottom:clamp(4px,.8vh,7px)}.song-message strong{font-size:clamp(23px,3.7vh,34px)}.facts{gap:7px}.fact{min-height:clamp(52px,7.3vh,66px);padding:6px;font-size:clamp(8px,1.15vh,10px)}.fact svg{width:clamp(13px,1.8vh,17px);height:clamp(13px,1.8vh,17px)}.message{margin:clamp(5px,1vh,10px) 0;padding:clamp(8px,1.3vh,13px) 18px}.message p{font-size:clamp(8px,1.2vh,10.5px);line-height:1.45}.message .closing{font-size:clamp(7px,1vh,9px)}.message em{font-size:clamp(7px,1vh,9px);margin-top:4px}.mini-rule{margin:5px auto}.cake-wrap{height:clamp(55px,7.5vh,70px);transform:scale(.88);transform-origin:top center}.actions{margin-top:-3px}.actions button{height:clamp(27px,3.5vh,32px)}footer{margin-top:clamp(4px,.8vh,9px)}}
@media(min-width:521px) and (max-height:720px){.birthday-card{padding-top:12px}.message .closing{display:none}.cake-wrap{display:none}footer{display:none}.actions{margin-top:5px}}