<!-- ================= MUSIC ================= -->

<audio id="bgMusic" loop>
    <source src="music.mp3" type="audio/mpeg">
    Your browser does not support audio.
</audio>

<!-- ================= MUSIC BUTTON ================= -->

<button id="musicBtn" class="musicBtn">
    🎵
</button>

<!-- ================= DECORATION CONTAINER ================= -->

<div id="heartContainer"></div>
<div id="balloonContainer"></div>
<div id="starContainer"></div>
<div id="petalContainer"></div>
<div id="sparkContainer"></div>
<div id="confettiContainer"></div>

<!-- ================= JAVASCRIPT ================= -->

<script src="script.js"></script>

</body>
</html>
/* =========================
   RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
width:100%;
height:100%;
overflow:hidden;
font-family:'Poppins',sans-serif;
background:#ffb6d9;
}

/* =========================
   BODY
========================= */

body{

background:linear-gradient(
135deg,
#ff9ac9,
#ffb6d9,
#ffd8eb,
#fff0f7
);

background-size:400% 400%;

animation:bgMove 12s ease infinite;

position:relative;

color:#fff;

}

/* =========================
   BACKGROUND
========================= */

@keyframes bgMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

/* =========================
   PAGE
========================= */

.page{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

display:none;

justify-content:center;

align-items:center;

padding:20px;

animation:fade .8s ease;

}

.page.active{

display:flex;

}

@keyframes fade{

from{

opacity:0;

transform:scale(.95);

}

to{

opacity:1;

transform:scale(1);

}

}

/* =========================
   GLASS CARD
========================= */

.glass,
.birthdayCard,
.letterBox,
.galleryBox,
.finalBox{

width:95%;
max-width:420px;

padding:30px;

border-radius:30px;

background:rgba(255,255,255,.18);

backdrop-filter:blur(18px);

border:2px solid rgba(255,255,255,.3);

box-shadow:

0 20px 45px rgba(0,0,0,.2),

0 0 25px rgba(255,255,255,.2);

text-align:center;

}

/* =========================
   LOADING
========================= */

#loadingScreen{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:#ff8dc6;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

}

.loader{

text-align:center;

}

.loader h1{

font-size:70px;

animation:heartbeat 1s infinite;

}

.loader h2{

margin-top:15px;

font-size:30px;

font-family:'Pacifico',cursive;

}

.loader p{

margin-top:15px;

font-size:18px;

}

@keyframes heartbeat{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.2);
/* =========================
   TITLES
========================= */

.logo{
font-family:'Pacifico',cursive;
font-size:38px;
margin-bottom:15px;
text-shadow:0 0 15px hotpink;
}

.subtitle{
font-size:18px;
margin-bottom:25px;
color:#fff;
}

.birthdayTitle{
font-family:'Pacifico',cursive;
font-size:42px;
line-height:1.3;
margin-bottom:20px;
text-shadow:0 0 20px deeppink;
}

h1,h2,h3{
color:#fff;
}

/* =========================
   PIN BOXES
========================= */

.pinContainer{

display:flex;

justify-content:center;

gap:10px;

margin:25px 0;

}

.pin{

width:48px;

height:58px;

border:none;

outline:none;

border-radius:15px;

text-align:center;

font-size:28px;

font-weight:bold;

background:white;

color:#ff1493;

box-shadow:0 8px 20px rgba(255,20,147,.3);

transition:.3s;

}

.pin:focus{

transform:scale(1.08);

box-shadow:0 0 20px hotpink;

}

/* =========================
   BUTTONS
========================= */

button{

border:none;

padding:15px 28px;

border-radius:50px;

font-size:18px;

font-weight:bold;

cursor:pointer;

background:linear-gradient(45deg,#ff3ea5,#ff83c8);

color:white;

box-shadow:0 10px 25px rgba(255,20,147,.35);

transition:.3s;

}

button:hover{

transform:translateY(-3px) scale(1.03);

}

button:active{

transform:scale(.96);

}

.nextBtn{

margin-top:25px;

width:100%;

}

/* =========================
   ERROR
========================= */

#error{

margin-top:15px;

font-size:17px;

color:#ffe5f3;

font-weight:bold;

min-height:24px;

}
/* =========================
   BIRTHDAY CAKE
========================= */

.cake{
position:relative;
width:180px;
height:180px;
margin:25px auto;
}

.cakeBottom{
position:absolute;
bottom:0;
left:25px;
width:130px;
height:55px;
background:#ff69b4;
border-radius:12px;
box-shadow:0 6px 15px rgba(0,0,0,.2);
}

.cakeMiddle{
position:absolute;
bottom:50px;
left:38px;
width:104px;
height:42px;
background:#ffb6c1;
border-radius:10px;
}

.cakeTop{
position:absolute;
bottom:88px;
left:50px;
width:80px;
height:32px;
background:#fff0f5;
border-radius:8px;
}

.candle{
position:absolute;
bottom:118px;
left:85px;
width:10px;
height:35px;
background:#ffffff;
border-radius:5px;
}

.flame{
position:absolute;
bottom:152px;
left:82px;
width:16px;
height:22px;
background:gold;
border-radius:50%;
animation:flicker .4s infinite alternate;
box-shadow:0 0 18px gold;
}

@keyframes flicker{
from{
transform:scale(.9);
opacity:.8;
}
to{
transform:scale(1.1);
opacity:1;
}
}

/* =========================
   LETTER
========================= */

.letter{

max-height:320px;

overflow:auto;

padding:15px;

margin-top:20px;

text-align:left;

line-height:2;

font-size:17px;

background:rgba(255,255,255,.15);

border-radius:18px;

}

.letter::-webkit-scrollbar{

width:6px;

}

.letter::-webkit-scrollbar-thumb{

background:#ff69b4;

border-radius:20px;

}

/* =========================
   PHOTO SLIDER
========================= */

.slider{

margin-top:25px;

}

.slider img{

width:100%;

height:350px;

object-fit:cover;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,.25);

}

.sliderDots{

display:flex;

justify-content:center;

gap:8px;

margin-top:15px;

}

.dot{

width:12px;

height:12px;

border-radius:50%;

background:rgba(255,255,255,.4);

}

.dot.active{

background:white;

}
/* =========================
   FINAL PAGE
========================= */

.giftBox{

font-size:110px;

cursor:pointer;

margin:30px 0;

transition:.4s;

animation:giftJump 2s infinite;

}

.giftBox:hover{

transform:scale(1.15) rotate(-8deg);

}

@keyframes giftJump{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

}

.loveMessage{

display:none;

margin-top:20px;

animation:fadeMessage 1s ease;

}

.loveMessage h2{

font-family:'Pacifico',cursive;

font-size:34px;

margin-bottom:20px;

color:#fff;

text-shadow:0 0 20px hotpink;

}

.loveMessage p{

line-height:2;

font-size:18px;

margin-bottom:20px;

}

@keyframes fadeMessage{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* =========================
   MUSIC BUTTON
========================= */

.musicBtn{

position:fixed;

top:20px;

right:20px;

width:55px;

height:55px;

border-radius:50%;

font-size:24px;

z-index:99999;

}

/* =========================
   RESTART BUTTON
========================= */

#restartBtn{

margin-top:30px;

display:none;

width:100%;

}
/* =========================
   FLOATING HEARTS
========================= */

.heart{
position:fixed;
bottom:-100px;
pointer-events:none;
z-index:999;
animation:heartFloat linear forwards;
}

@keyframes heartFloat{

0%{
transform:translateY(0) rotate(0deg);
opacity:1;
}

100%{
transform:translateY(-120vh) rotate(360deg);
opacity:0;
}

}

/* =========================
   FLOATING BALLOONS
========================= */

.balloon{
position:fixed;
bottom:-120px;
pointer-events:none;
z-index:998;
animation:balloonFloat linear forwards;
}

@keyframes balloonFloat{

0%{
transform:translateY(0);
}

100%{
transform:translateY(-130vh);
}

}

/* =========================
   TWINKLING STARS
========================= */

.star{
position:fixed;
pointer-events:none;
z-index:997;
animation:twinkle 1.5s infinite;
}

@keyframes twinkle{

0%,100%{
opacity:.2;
transform:scale(.8);
}

50%{
opacity:1;
transform:scale(1.2);
}

}

/* =========================
   ROSE PETALS
========================= */

.petal{
position:fixed;
top:-50px;
pointer-events:none;
z-index:996;
animation:petalFall linear forwards;
}

@keyframes petalFall{

0%{
transform:translateY(0) rotate(0deg);
opacity:1;
}

100%{
transform:translateY(120vh) rotate(720deg);
opacity:0;
}

}
/* =========================
   SPARKLES
========================= */

.spark{
position:fixed;
top:-30px;
pointer-events:none;
z-index:995;
animation:sparkFall linear forwards;
}

@keyframes sparkFall{

0%{
transform:translateY(0) rotate(0deg) scale(1);
opacity:1;
}

100%{
transform:translateY(120vh) rotate(360deg) scale(.4);
opacity:0;
}

}

/* =========================
   CONFETTI
========================= */

.confetti{
position:fixed;
top:-30px;
width:10px;
height:18px;
border-radius:4px;
pointer-events:none;
z-index:994;
animation:confettiFall linear forwards;
}

@keyframes confettiFall{

0%{
transform:translateY(0) rotate(0deg);
opacity:1;
}

100%{
transform:translateY(120vh) rotate(720deg);
opacity:0;
}

}

/* =========================
   FIREWORK PARTICLES
========================= */

.firework{
position:fixed;
width:8px;
height:8px;
border-radius:50%;
pointer-events:none;
z-index:99999;
}

/* =========================
   WISH TEXT
========================= */

.wish{
margin-top:20px;
font-size:18px;
line-height:1.8;
}

/* =========================
   MOBILE
========================= */

@media(max-width:600px){

.logo{
font-size:30px;
}

.birthdayTitle{
font-size:34px;
}

.pin{
width:42px;
height:52px;
font-size:24px;
}

button{
font-size:16px;
padding:14px 20px;
}

.slider img{
height:280px;
}

.giftBox{
font-size:90px;
}

.loveMessage h2{
font-size:28px;
}
/* =========================
   GLOWING BUTTONS
========================= */

button{

animation:buttonGlow 2s infinite alternate;

}

@keyframes buttonGlow{

0%{

box-shadow:0 0 15px rgba(255,20,147,.4);

}

100%{

box-shadow:
0 0 35px hotpink,
0 0 55px deeppink;

}

}

/* =========================
   FLOATING ANIMATION
========================= */

.glass,
.birthdayCard,
.letterBox,
.galleryBox,
.finalBox{

animation:floatCard 4s ease-in-out infinite;

}

@keyframes floatCard{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-8px);

}

}

/* =========================
   TEXT GLOW
========================= */

.logo,
.birthdayTitle,
.loveMessage h2{

animation:textGlow 2s infinite alternate;

}

@keyframes textGlow{

0%{

text-shadow:
0 0 10px hotpink;

}

100%{

text-shadow:
0 0 20px hotpink,
0 0 40px deeppink,
0 0 60px white;

}

}

/* =========================
   FADE TRANSITION
========================= */

.fadeOut{

animation:fadeOut .6s forwards;

}

.fadeIn{

animation:fadeIn .6s forwards;

}

@keyframes fadeOut{

from{

opacity:1;

transform:scale(1);

}

to{

opacity:0;

transform:scale(.95);

}

}

@keyframes fadeIn{

from{

opacity:0;

transform:scale(1.05);

}

to{

opacity:1;

transform:scale(1);

}

}
radial-gradient(circle at 20% 20% rgba(255,255,255,.18) transpa
rent 35%),
radial-gradient(circle at 80% 30%, rgba(255,255,255,.12) transpa
rent 30%)、 radial-gradient(circle at 50% 80% rgba(255,255,255,.10),transpa rent 30%;
pointer-events:none;
z-index:1;

}


}

}