/* ===================================
   Happy Birthday Bharti - style.css
   Part 2 (Foundation)
=================================== */

:root{
  --bg1:#160021;
  --bg2:#35105d;
  --pink:#ff4fa3;
  --gold:#ffd86b;
  --white:#fff;
  --glass:rgba(255,255,255,.12);
}

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

body{
  font-family:'Poppins',sans-serif;
  color:#fff;
  overflow-x:hidden;
  background:linear-gradient(-45deg,#14001e,#2d0d53,#4d0f68,#7a156a);
  background-size:400% 400%;
  animation:bgMove 15s ease infinite;
}

@keyframes bgMove{
  0%{background-position:0 50%}
  50%{background-position:100% 50%}
  100%{background-position:0 50%}
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:
  radial-gradient(circle,#ffffffaa 1px,transparent 1px);
  background-size:60px 60px;
  opacity:.25;
  animation:stars 8s linear infinite;
  pointer-events:none;
}
@keyframes stars{
  from{transform:translateY(0)}
  to{transform:translateY(60px)}
}

#loader{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#120019;
  display:flex;
  justify-content:center;
  align-items:center;
}

.loader-content{
  width:min(450px,90%);
  text-align:center;
}

.loader-content h1{
  font-size:70px;
  animation:beat 1s infinite;
}

.loader-content h2{
  margin:20px 0;
}

.progress{
  height:10px;
  border-radius:30px;
  overflow:hidden;
}

.progress-bar{
  width:0;
  animation:loading 4s forwards;
  background:linear-gradient(90deg,var(--pink),var(--gold));
}

@keyframes loading{
  to{width:100%}
}

@keyframes beat{
  50%{transform:scale(1.2)}
}

.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
}

.subtitle{
  color:var(--gold);
  letter-spacing:3px;
  text-transform:uppercase;
}

.title{
  font-size:4rem;
  font-weight:700;
  line-height:1.15;
  margin:20px 0;
}

.title span{
  display:block;
  color:var(--pink);
  font-family:"Great Vibes",cursive;
  font-size:5rem;
  text-shadow:0 0 20px rgba(255,79,163,.7);
}

.hero-text{
  font-size:1.1rem;
  max-width:560px;
  color:#f3f3f3;
}

.hero-image{
  text-align:center;
}

.hero-image img{
  width:380px;
  max-width:100%;
  border-radius:30px;
  padding:8px;
  background:rgba(255,255,255,.15);
  border:2px solid rgba(255,255,255,.25);
  box-shadow:0 0 45px rgba(255,79,163,.45);
  animation:float 5s ease-in-out infinite;
}

@keyframes float{
  50%{transform:translateY(-18px)}
}

.btn-love{
  margin-top:30px;
  border:none;
  padding:15px 42px;
  border-radius:50px;
  color:#fff;
  background:linear-gradient(45deg,var(--pink),#ff7bc3);
  font-weight:600;
  transition:.35s;
  box-shadow:0 12px 35px rgba(255,79,163,.35);
}

.btn-love:hover{
  transform:translateY(-5px) scale(1.04);
  box-shadow:0 18px 45px rgba(255,79,163,.55);
}

section{
  padding:100px 0;
}

.section-title{
  text-align:center;
  margin-bottom:60px;
}

.section-title h2{
  font-size:2.7rem;
  color:var(--gold);
  font-family:"Great Vibes",cursive;
}

.glass-card{
  max-width:900px;
  margin:auto;
  padding:40px;
  background:var(--glass);
  backdrop-filter:blur(18px);
  border-radius:24px;
  border:1px solid rgba(255,255,255,.2);
  line-height:2;
  text-align:center;
}

.gallery-img{
  width:100%;
  height:320px;
  object-fit:cover;
  border-radius:20px;
  transition:.5s;
  border:3px solid rgba(255,255,255,.15);
}

.gallery-img:hover{
  transform:scale(1.05) rotate(1deg);
  box-shadow:0 0 35px rgba(255,216,107,.6);
}

.timeline{
  max-width:900px;
  margin:auto;
  border-left:3px solid var(--gold);
  padding-left:40px;
}

.timeline-item{
  position:relative;
  margin-bottom:45px;
}

.circle{
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--pink);
  position:absolute;
  left:-50px;
  top:6px;
  box-shadow:0 0 18px var(--pink);
}

.gift-box{
  width:170px;
  height:170px;
  margin:auto;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:70px;
  background:linear-gradient(135deg,#ff4fa3,#ff8ecb);
  animation:beat 1.5s infinite;
  box-shadow:0 0 40px rgba(255,79,163,.5);
}

.cake{
  width:280px;
  max-width:90%;
  filter:drop-shadow(0 0 25px rgba(255,216,107,.6));
}

.final-section{
  text-align:center;
}

.final-section h1{
  font-size:4rem;
}

.final-section span{
  color:var(--gold);
  font-family:"Great Vibes",cursive;
}

#hearts{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.heart{
  position:absolute;
  bottom:-40px;
  color:#ff76bc;
  animation:rise linear forwards;
}

@keyframes rise{
  to{
    transform:translateY(-120vh) rotate(360deg);
    opacity:0;
  }
}

@media(max-width:991px){
.title{font-size:2.8rem}
.title span{font-size:3.5rem}
.hero{text-align:center;padding-top:40px}
.hero-image{margin-top:40px}
}

@media(max-width:576px){
section{padding:70px 0}
.section-title h2{font-size:2.1rem}
.glass-card{padding:25px}
.final-section h1{font-size:2.5rem}
}


/* ========================= */
/* Balloons */
/* ========================= */

.balloons{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
pointer-events:none;
z-index:5;
overflow:hidden;
}

.balloon{
position:absolute;
bottom:-180px;
width:70px;
height:90px;
border-radius:50%;
animation:flyBalloon linear infinite;
}

.red{
background:#ff3b5f;
left:8%;
animation-duration:18s;
}

.blue{
background:#4ab3ff;
left:28%;
animation-duration:20s;
}

.yellow{
background:#ffd94d;
left:48%;
animation-duration:16s;
}

.green{
background:#59ff85;
left:70%;
animation-duration:19s;
}

.pink{
background:#ff6bc4;
left:90%;
animation-duration:22s;
}

@keyframes flyBalloon{

0%{
transform:translateY(0);
}

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

}

/* Shooting Stars */

.shooting-star{

position:fixed;

width:180px;

height:2px;

background:linear-gradient(90deg,#fff,transparent);

transform:rotate(-35deg);

animation:shoot 8s linear infinite;

opacity:.8;

}

.star1{

top:10%;

left:-20%;

}

.star2{

top:35%;

left:-35%;

animation-delay:3s;

}

.star3{

top:60%;

left:-25%;

animation-delay:6s;

}

@keyframes shoot{

0%{

transform:translateX(0) rotate(-35deg);

opacity:1;

}

100%{

transform:translateX(180vw) rotate(-35deg);

opacity:0;

}

}