*{padding:0;margin:0;box-sizing:border-box}
:root{
  --pink:#feecea; --white:#fff; --black:#333; --text-pink:#ff7882;
  --heart:#F61F1F; --bg-letter:#fff8e4; --border:#DACCBF;
}
html,body{height:100%}
body{font-size:16px;background:var(--pink);font-family:"Sriracha",cursive;color:var(--black)}
button{font-family:inherit}
#wrapper{
  position:relative;min-height:100%;overflow:hidden;
  background-image:
    linear-gradient(0deg,transparent 24%,#fff 25%,#fff 26%,transparent 27%,transparent 74%,#fff 75%,#fff 76%,transparent 77%),
    linear-gradient(90deg,transparent 24%,#fff 25%,#fff 26%,transparent 27%,transparent 74%,#fff 75%,#fff 76%,transparent 77%);
  background-size:80px 80px;
}

/* flags */
.flag__birthday{display:flex;justify-content:space-between;transform:translateY(-200px);animation:flagDown 1.5s .5s forwards}
.flag__birthday img{width:min(350px,45vw);height:auto}
.flag__left{transform:rotate(-10deg) translate(-20px,30px)}
.flag__right{transform:rotate(10deg) translate(20px,30px) scaleX(-1)}
@keyframes flagDown{to{transform:translateY(-10px)}}

/* layout */
.content{display:flex;width:100%;padding-top:3rem;position:relative}
.content .left,.content .right{display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}
.content .left{width:40%}
.content .right{width:60%}

/* title */
.title{position:relative;width:100%;display:flex;flex-direction:column;justify-content:center;font-family:"Titan One",sans-serif;font-size:clamp(2rem,5vw,3.4rem)}
.title h1{display:flex;justify-content:center;font-weight:bold;font-size:inherit;
  text-shadow:4px 4px var(--black),-4px 4px var(--black),4px -4px var(--black),-4px -4px var(--black),4px 8px 0 var(--black)}
.title .happy{color:var(--white)}
.title .birthday{color:var(--text-pink)}
.title h1 span{opacity:0;transform:translateY(50px);animation:rise .5s var(--t) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.title .hat{position:absolute;right:12%;top:-350px;transform:rotate(-40deg);z-index:-1;animation:hat 4s 4.5s forwards ease}
.title .hat img{width:clamp(70px,9vw,130px)}
@keyframes hat{20%,30%{top:-30px;transform-origin:left;transform:rotate(-40deg)}35%,100%{top:-30px;transform:rotate(0)}}

/* date pill */
.date__of__birth{
  display:flex;align-items:center;justify-content:space-around;margin-top:20px;
  background:var(--text-pink);border:3px solid var(--black);border-radius:50px;
  font-size:1.2rem;font-weight:bold;opacity:0;width:0;height:0;overflow:hidden;
  animation:dob 2.5s 6s forwards;
}
.date__of__birth span{margin:0 14px;white-space:nowrap}
@keyframes dob{
  20%{opacity:1;width:0;height:0}
  45%{opacity:1;width:min(300px,80vw);height:0}
  60%,100%{opacity:1;width:min(300px,80vw);height:50px}
}
.fa-star{color:#fff8e4;margin:0 4px}

/* button */
.left .btn{transform:scale(0);animation:pop 2s 8s forwards ease-in-out}
#btn__letter{
  margin-top:30px;background:var(--text-pink);color:var(--black);
  padding:10px 22px;min-height:44px;font-size:1.05rem;border-radius:50px;border:3px solid var(--black);
  display:flex;align-items:center;gap:8px;cursor:pointer;transition:all .3s ease-in-out;
}
#btn__letter:hover{border-color:var(--heart);background:var(--heart);color:#fff;box-shadow:rgba(0,0,0,.24) 0 3px 8px}
#btn__letter:hover i{animation:wiggle 1s infinite linear}
#btn__letter:active{transform:scale(.92)}
button:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px}
@keyframes wiggle{0%,50%,100%{transform:rotate(0)}25%{transform:rotate(12deg)}75%{transform:rotate(-12deg)}}
@keyframes pop{0%{transform:scale(0)}10%{transform:scale(1.3)}20%{transform:scale(.7)}30%,100%{transform:scale(1)}}

/* photo */
.right .box__account{position:relative;transform:translateY(700px);animation:up 5s 3s forwards ease-in}
@keyframes up{to{transform:none}}
.content .right .image{width:min(400px,60vw);height:min(400px,60vw);border-radius:50%;overflow:hidden;border:6px solid var(--black);background:#ffd9dc}
.content .right .image img{width:100%;height:100%;object-fit:cover;display:block}
.name{
  position:absolute;left:50%;bottom:-20px;translate:-50% 0;white-space:nowrap;
  display:flex;align-items:center;gap:14px;padding:2px 28px;
  background:var(--text-pink);border:3px solid var(--black);border-radius:50px;
}
.name span{font-size:clamp(1.1rem,3vw,1.7rem);font-weight:bold}
.fa-heart{color:var(--heart);filter:drop-shadow(0 0 3px var(--heart));animation:beat 1s infinite linear}
@keyframes beat{50%{transform:scale(1.2)}}
.balloon_one{position:absolute;top:-70px;left:-70px;animation:sway1 2s infinite linear}
.balloon_two{position:absolute;top:170px;right:-65px;z-index:-1;transform:rotate(10deg);animation:sway2 2s infinite linear}
.balloon_one img,.balloon_two img{width:clamp(60px,8vw,100px);height:auto}
@keyframes sway1{0%,50%,100%{transform-origin:bottom right;transform:rotate(0)}25%{transform-origin:bottom right;transform:rotate(3deg)}75%{transform-origin:bottom right;transform:rotate(-3deg)}}
@keyframes sway2{0%,50%,100%{transform-origin:bottom left;transform:rotate(10deg)}25%{transform-origin:bottom left;transform:rotate(7deg)}75%{transform-origin:bottom left;transform:rotate(13deg)}}

/* rotating badge */
.cricle{position:absolute;top:20px;right:50px;display:flex;justify-content:center;align-items:center;transform:scale(0);animation:pop 3s 7s forwards ease-in-out}
.text__cricle{width:100px;height:100px;background:var(--text-pink);border-radius:50%;border:5px solid var(--black);display:flex;justify-content:center;align-items:center;animation:spin 5s linear infinite}
.text__cricle span{position:absolute;top:0;left:50%;transform:rotate(calc(var(--i)*24deg));transform-origin:0 45px;text-transform:uppercase;font-size:.7rem}
.cricle .fa-star{position:absolute;color:var(--heart);margin:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* decorations */
.decorate_star{position:absolute;transform:scale(0);background:var(--black);clip-path:polygon(0 50%,35% 35%,50% 0,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%);animation:pop 3s var(--t) forwards,twinkle 2s 9s infinite ease-in-out}
.star1{width:20px;height:20px;top:75px;left:25%}
.star2{width:15px;height:20px;top:35px;right:28%}
.star3{width:14px;height:14px;top:290px;left:48%}
.star4{width:18px;height:18px;bottom:60px;left:3%}
.star5{width:16px;height:18px;bottom:140px;left:40%}
@keyframes twinkle{25%{transform:scale(.8)}50%{transform:scale(1.1)}}
.decorate_bottom{position:absolute;right:0;bottom:-10px}
.decorate_bottom img{width:100px;height:auto}
.decorate_flower--one,.decorate_flower--two,.decorate_flower--three{position:absolute;transform:scale(0);animation:pop 3s var(--t) forwards ease-in-out}
.decorate_flower--one img,.decorate_flower--two img,.decorate_flower--three img{width:20px}
.decorate_flower--one{top:250px;left:4%}
.decorate_flower--two{top:225px;left:42%}
.decorate_flower--three{top:150px;right:18%}
.smiley__icon{position:absolute;bottom:150px;left:46%;transform:scale(0);animation:pop 3s 7s forwards ease-in-out}
.smiley__icon img{width:100px;height:auto}

/* letter */
.box__letter{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10;display:none}
.box__letter.open{display:block;animation:fade .3s}
@keyframes fade{from{opacity:0}}
.letter__border{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(820px,92vw);height:min(470px,86vh);background:var(--white);border-radius:27px;padding:17px;
  box-shadow:rgba(0,0,0,.24) 0 3px 8px;display:none;
}
.letter__border.open{display:block}
.close{
  position:absolute;right:-10px;top:-10px;width:44px;height:44px;border-radius:50%;border:none;
  background:var(--white);display:flex;align-items:center;justify-content:center;
  box-shadow:rgba(99,99,99,.3) 0 2px 8px;cursor:pointer;font-size:1.1rem;
}
.letter{width:100%;height:100%;background:var(--bg-letter);border-radius:10px;padding:15px 10px 0;display:flex;flex-direction:column;overflow:hidden}
.title__letter{text-align:center;font-family:"Dancing Script",cursive;font-weight:bold;font-size:clamp(1.5rem,4vw,2.4rem);min-height:1.4em}
.title__letter .fa-heart{margin-left:6px;font-size:1.2rem}
.content__letter{flex:1;display:flex;min-height:0;padding-top:.8rem}
.lt{position:relative;width:42%;border-right:3px solid var(--border);padding:1rem;display:flex;align-items:center;justify-content:center}
#gift{width:100%;max-width:200px;opacity:0}
#gift.show{animation:fade 1s forwards;opacity:1}
.heart{position:absolute;width:20px;opacity:0}
.heart.animation{animation:hp 1s var(--t) infinite ease-in-out}
@keyframes hp{0%{opacity:1;transform:scale(0)}10%{opacity:1;transform:scale(1.3)}20%{opacity:1;transform:scale(.7)}30%,100%{opacity:1;transform:scale(1)}}
.heart_1{top:12%;left:8%}.heart_2{top:6%;right:14%}.heart_3{bottom:10%;left:40%}.heart_4{top:36%;right:6%}
.rt{position:relative;flex:1;min-width:0;overflow-y:auto;padding:0 .5rem 70px}
.text__letter{font-family:"Dancing Script",cursive;font-size:clamp(1.05rem,2.4vw,1.4rem);line-height:1.4;padding:.5rem .8rem}
#mewmew{position:absolute;right:0;bottom:0;width:70px;opacity:0}
#mewmew.show{animation:fade 1s forwards;opacity:1}

/* mobile */
@media (max-width:658px){
  .content{flex-direction:column;align-items:center;gap:36px;padding-top:2rem}
  .content .left,.content .right{width:100%}
  .title h1{letter-spacing:4px}
  .title .hat{right:4%}
  .cricle{top:-10px;right:10px;scale:.8}
  .balloon_one{left:-40px;top:-30px}
  .balloon_two{right:-35px}
  .star3,.smiley__icon{display:none}
  .content__letter{flex-direction:column}
  .lt{width:100%;height:84px;border-right:none;border-bottom:3px solid var(--border);padding:.3rem}
  #gift{max-width:70px}
  .heart_1{left:20%}.heart_2{right:20%}.heart_3{left:60%}.heart_4{display:none}
  .rt{padding-bottom:60px}
  #mewmew{width:56px}
}

/* reduce motion: sab kuch seedha final state me */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}