/* =======================================================
   HAPPY BIRTHDAY WEBSITE
   Theme : Pink & White
======================================================= */

/* ===========================
   RESET
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
    color:#444;
    background:linear-gradient(-45deg,#ffd1e8,#fff0f7,#ffffff,#ffd9ec);
    background-size:400% 400%;
    animation:bgMove 15s ease infinite;
}

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

@keyframes bgMove{

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

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

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

}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#ffe6ef;
}

::-webkit-scrollbar-thumb{
    background:#ff78b4;
    border-radius:20px;
}

/* ===========================
   SKY
=========================== */

#sky{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:linear-gradient(
180deg,
rgba(255,240,248,.25),
rgba(255,255,255,.15),
rgba(255,225,240,.25)
);

z-index:-5;

pointer-events:none;

}

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

#loading{

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

display:flex;

justify-content:center;
align-items:center;

background:white;

z-index:999999;

transition:1s;

}

#loading h1{

font-size:40px;

color:#ff4d94;

font-family:'Great Vibes',cursive;

animation:loadingPulse 1.5s infinite;

}

@keyframes loadingPulse{

0%{

transform:scale(.9);

opacity:.6;

}

50%{

transform:scale(1.05);

opacity:1;

}

100%{

transform:scale(.9);

opacity:.6;

}

}

/* ===========================
   OPENING
=========================== */

#opening{

width:100%;
height:100vh;

display:flex;

justify-content:center;
align-items:center;

flex-direction:column;

position:relative;

overflow:hidden;

}

/* Gift Box */

.gift-box{

text-align:center;

z-index:5;

}

#gift{

width:220px;

cursor:pointer;

transition:.6s;

animation:giftFloat 2.5s ease-in-out infinite;

filter:

drop-shadow(0 15px 25px rgba(255,60,140,.25));

}

#gift:hover{

transform:scale(1.08);

}

#gift.open{

transform:scale(1.8) rotate(25deg);

opacity:0;

}

.gift-box p{

margin-top:25px;

font-size:22px;

font-weight:600;

color:#ff4d94;

animation:blinkText 1.4s infinite;

}

@keyframes blinkText{

50%{

opacity:.45;

}

}

@keyframes giftFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/* ===========================
   MAIN
=========================== */

#main{

display:none;

animation:fadeMain 1.2s;

}

@keyframes fadeMain{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

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

#musicBtn{

position:fixed;

right:20px;
bottom:20px;

padding:15px 28px;

border:none;

border-radius:50px;

background:#ff4d94;

color:white;

font-size:15px;

font-weight:600;

cursor:pointer;

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

transition:.3s;

z-index:999;

}

#musicBtn:hover{

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

background:#ff2d7f;

}

/* ===========================
   HERO
=========================== */

.hero{

min-height:100vh;

display:flex;

justify-content:center;
align-items:center;

flex-direction:column;

text-align:center;

padding:30px;

position:relative;

}

.hero h3{

font-size:42px;

font-family:'Great Vibes',cursive;

color:#ff4d94;

}

.hero h1{

font-size:68px;

margin-top:10px;

color:#ff2674;

animation:heroFloat 3s ease-in-out infinite;

}

.hero h2{

margin-top:10px;

font-size:30px;

color:#666;

}

.hero p{

margin-top:30px;

max-width:750px;

line-height:2;

font-size:18px;

color:#555;

}

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

/* ===========================
   SCROLL ICON
=========================== */

.scroll{

font-size:42px;

text-align:center;

animation:scrollDown 1.2s infinite;

margin-bottom:30px;

}

@keyframes scrollDown{

0%{

transform:translateY(0);

}

50%{

transform:translateY(10px);

}

100%{

transform:translateY(0);

}

}
/* =======================================================
   CARD UCAPAN
======================================================= */

.card{

width:min(900px,90%);

margin:80px auto;

padding:45px;

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

backdrop-filter:blur(18px);

border-radius:28px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

text-align:center;

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

box-shadow:0 25px 60px rgba(255,105,180,.18);

}

.card h2{

font-size:42px;

color:#ff3d8d;

margin-bottom:25px;

font-family:'Great Vibes',cursive;

}

.card p{

font-size:18px;

line-height:2;

color:#555;

}

/* =======================================================
   TIMELINE
======================================================= */

.timeline{

padding:90px 20px;

text-align:center;

}

.timeline h2{

font-size:52px;

font-family:'Great Vibes',cursive;

color:#ff3d8d;

margin-bottom:60px;

}

.line{

position:relative;

max-width:700px;

margin:auto;

}

.line::before{

content:"";

position:absolute;

left:50%;

top:0;

width:5px;

height:100%;

background:#ffc2dd;

transform:translateX(-50%);

border-radius:20px;

}

.item{

width:45%;

padding:20px;

margin:30px 0;

background:white;

border-radius:20px;

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

font-weight:600;

position:relative;

transition:.35s;

}

.item:hover{

transform:scale(1.05);

}

.item:nth-child(odd){

margin-right:auto;

}

.item:nth-child(even){

margin-left:auto;

}

/* =======================================================
   GALLERY
======================================================= */

.gallery{

padding:100px 20px;

text-align:center;

}

.gallery h2{

font-size:52px;

font-family:'Great Vibes',cursive;

color:#ff3d8d;

margin-bottom:50px;

}

.photos{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

max-width:1200px;

margin:auto;

}

.photos img{

width:100%;

height:280px;

object-fit:cover;

border-radius:20px;

cursor:pointer;

transition:.4s;

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

}

.photos img:hover{

transform:scale(1.05) rotate(1deg);

box-shadow:0 20px 45px rgba(255,105,180,.25);

}

/* =======================================================
   VIDEO
======================================================= */

.video{

padding:90px 20px;

text-align:center;

}

.video h2{

font-size:50px;

font-family:'Great Vibes',cursive;

color:#ff3d8d;

margin-bottom:35px;

}

.video video{

width:min(900px,95%);

border-radius:25px;

box-shadow:0 20px 50px rgba(0,0,0,.15);

}

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

.letter{

padding:100px 20px;

text-align:center;

}

.letter h2{

font-size:50px;

font-family:'Great Vibes',cursive;

color:#ff3d8d;

margin-bottom:35px;

}

#envelope{

display:inline-block;

padding:18px 40px;

background:#ff4d94;

color:white;

font-weight:bold;

border-radius:50px;

cursor:pointer;

transition:.3s;

box-shadow:0 10px 25px rgba(255,105,180,.3);

}

#envelope:hover{

transform:scale(1.08);

}

#letterText{

display:none;

margin:35px auto 0;

padding:35px;

width:min(800px,90%);

background:white;

border-radius:25px;

box-shadow:0 20px 50px rgba(0,0,0,.12);

line-height:2;

font-size:18px;

transform:scale(.8);

opacity:0;

transition:.5s;

}

#letterText.show{

opacity:1;

transform:scale(1);

}

/* =======================================================
   CAKE
======================================================= */

.cake{

padding:100px 20px;

text-align:center;

}

.cake h2{

font-size:50px;

font-family:'Great Vibes',cursive;

color:#ff3d8d;

margin-bottom:30px;

}

#cake{

width:260px;

cursor:pointer;

transition:.4s;

filter:drop-shadow(0 12px 25px rgba(0,0,0,.15));

}

#cake:hover{

transform:scale(1.08);

}

.cake p{

margin-top:25px;

font-size:18px;

color:#666;

}

/* =======================================================
   ENDING
======================================================= */

.ending{

padding:120px 20px;

text-align:center;

}

.ending h1{

font-size:70px;

font-family:'Great Vibes',cursive;

color:#ff2674;

margin-bottom:20px;

}

.ending p{

font-size:20px;

line-height:2;

color:#666;

margin-bottom:40px;

}

#replay{

padding:16px 35px;

border:none;

border-radius:50px;

background:#ff4d94;

color:white;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.3s;

box-shadow:0 10px 25px rgba(255,105,180,.3);

}

#replay:hover{

transform:translateY(-5px);

background:#ff2d7f;

}
/* =======================================================
   LIGHTBOX
======================================================= */

#lightbox{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

display:none;

justify-content:center;
align-items:center;

background:rgba(0,0,0,.92);

backdrop-filter:blur(10px);

z-index:999999;

animation:fadeLightbox .4s;

}

@keyframes fadeLightbox{

from{

opacity:0;

}

to{

opacity:1;

}

}

#lightbox img{

max-width:90%;

max-height:90%;

border-radius:20px;

box-shadow:0 20px 60px rgba(255,255,255,.25);

}

.lb-btn{

position:absolute;

top:50%;

transform:translateY(-50%);

width:60px;

height:60px;

border:none;

border-radius:50%;

background:#ff4d94;

color:white;

font-size:28px;

cursor:pointer;

transition:.3s;

}

.lb-btn:hover{

background:#ff2d7f;

transform:translateY(-50%) scale(1.1);

}

#prevBtn{

left:30px;

}

#nextBtn{

right:30px;

}

#closeBtn{

position:absolute;

top:30px;

right:30px;

width:50px;

height:50px;

border:none;

border-radius:50%;

background:#ff4d94;

color:white;

font-size:22px;

cursor:pointer;

transition:.3s;

}

#closeBtn:hover{

transform:rotate(90deg);

}

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

.star{

position:fixed;

width:3px;
height:3px;

background:white;

border-radius:50%;

box-shadow:

0 0 10px white,

0 0 20px white;

animation:twinkle 3s infinite;

pointer-events:none;

z-index:-2;

}

@keyframes twinkle{

0%,100%{

opacity:.2;

transform:scale(.5);

}

50%{

opacity:1;

transform:scale(1.4);

}

}

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

.petal{

position:fixed;

width:18px;
height:18px;

background:#ff8ec2;

border-radius:0 100% 0 100%;

opacity:.8;

pointer-events:none;

animation:fall linear forwards;

z-index:3;

}

@keyframes fall{

0%{

transform:translateY(-30px) rotate(0);

}

100%{

transform:translateY(110vh) translateX(120px) rotate(720deg);

opacity:0;

}

}

/* =======================================================
   BALLOON
======================================================= */

.balloon{

position:fixed;

bottom:-150px;

width:60px;

height:75px;

border-radius:50%;

z-index:2;

animation:fly linear forwards;

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

}

.balloon::before{

content:"";

position:absolute;

left:50%;

top:75px;

width:2px;

height:70px;

background:#999;

}

@keyframes fly{

from{

transform:translateY(0);

}

to{

transform:translateY(-130vh);

}

}

/* =======================================================
   CURSOR GLOW
======================================================= */

#mouseGlow{

position:fixed;

width:180px;

height:180px;

border-radius:50%;

background:radial-gradient(

rgba(255,120,180,.22),

transparent 70%

);

transform:translate(-50%,-50%);

pointer-events:none;

filter:blur(15px);

z-index:1;

}

/* =======================================================
   LOVE TRAIL
======================================================= */

.trail{

position:fixed;

pointer-events:none;

font-size:20px;

animation:trailFade .8s linear forwards;

z-index:99999;

}

@keyframes trailFade{

0%{

opacity:1;

transform:translateY(0) scale(1);

}

100%{

opacity:0;

transform:translateY(-40px) scale(2);

}

}

/* =======================================================
   COUNTDOWN
======================================================= */

#countdownOverlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

display:none;

justify-content:center;
align-items:center;

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

backdrop-filter:blur(18px);

z-index:999999;

}

.countBox{

text-align:center;

animation:zoomIn .8s;

}

.countBox h2{

font-family:'Great Vibes',cursive;

font-size:48px;

color:#ff4d94;

}

.countBox h1{

margin:15px 0;

font-size:65px;

color:#ff2674;

}

.countBox p{

font-size:20px;

}

#countdownNumber{

margin-top:25px;

font-size:110px;

font-weight:bold;

color:#ff4d94;

animation:pulse 1s infinite;

}

@keyframes pulse{

0%,100%{

transform:scale(.9);

}

50%{

transform:scale(1.1);

}

}

/* =======================================================
   RESPONSIVE
======================================================= */

@media(max-width:768px){

.hero h1{

font-size:42px;

}

.hero h2{

font-size:24px;

}

.hero h3{

font-size:32px;

}

.timeline h2,
.gallery h2,
.video h2,
.letter h2,
.cake h2,
.ending h1{

font-size:40px;

}

.item{

width:100%;

margin:20px auto;

}

.line::before{

display:none;

}

.photos{

grid-template-columns:repeat(2,1fr);

}

#cake{

width:180px;

}

#gift{

width:170px;

}

#musicBtn{

right:15px;

bottom:15px;

padding:12px 20px;

font-size:14px;

}

.lb-btn{

width:45px;

height:45px;

font-size:20px;

}

}

@media(max-width:500px){

.photos{

grid-template-columns:1fr;

}

.hero p{

font-size:16px;

}

.card{

padding:30px;

}

.countBox h1{

font-size:42px;

}

#countdownNumber{

font-size:75px;

}

}

/* ===========================
Timeline
=========================== */

.timeline{

padding:120px 20px;

}

.timeline h2{

text-align:center;

font-size:45px;

color:#ff4f9b;

margin-bottom:60px;

}

.line{

max-width:800px;

margin:auto;

border-left:5px solid #ff9bc5;

padding-left:40px;

}

.item{

margin:40px 0;

font-size:22px;

background:white;

padding:20px;

border-radius:20px;

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

}

/* ===========================
Gallery
=========================== */

.gallery{

padding:100px 30px;

}

.gallery h2{

text-align:center;

font-size:45px;

color:#ff4f9b;

margin-bottom:40px;

}

.photos{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:20px;

}

.photos img{

width:100%;

height:260px;

object-fit:cover;

border-radius:25px;

cursor:pointer;

transition:.4s;

box-shadow:0 15px 30px rgba(0,0,0,.15);

}

.photos img:hover{

transform:scale(1.05);

}

/* ===========================
Video
=========================== */

.video{

padding:120px 30px;

text-align:center;

}

.video h2{

font-size:45px;

margin-bottom:40px;

color:#ff4f9b;

}

.video video{

width:90%;

max-width:900px;

border-radius:30px;

box-shadow:0 20px 40px rgba(0,0,0,.2);

}

/* ===========================
Letter
=========================== */

.letter{

padding:120px 30px;

text-align:center;

}

#envelope{

display:inline-block;

padding:20px 40px;

background:#ff4f9b;

color:white;

font-size:22px;

border-radius:20px;

cursor:pointer;

margin-top:30px;

}

#letterText{

display:none;

margin:auto;

margin-top:40px;

max-width:800px;

padding:40px;

background:white;

border-radius:30px;

box-shadow:0 15px 30px rgba(0,0,0,.15);

line-height:2;

}

/* ===========================
Cake
=========================== */

.cake{

padding:120px 30px;

text-align:center;

}

.cake h2{

font-size:45px;

color:#ff4f9b;

margin-bottom:40px;

}

#cake{

width:280px;

cursor:pointer;

transition:.4s;

}

#cake:hover{

transform:rotate(-5deg) scale(1.05);

}

/* ===========================
Ending
=========================== */

.ending{

padding:150px 30px;

text-align:center;

}

.ending h1{

font-size:70px;

font-family:'Great Vibes';

color:#ff2b83;

}

.ending p{

margin-top:30px;

font-size:20px;

line-height:2;

}

#replay{

margin-top:50px;

padding:18px 45px;

font-size:18px;

border:none;

background:#ff4f9b;

color:white;

border-radius:50px;

cursor:pointer;

transition:.4s;

}

#replay:hover{

transform:scale(1.1);

}

/* ===========================
Responsive
=========================== */

@media(max-width:768px){

.hero h1{

font-size:45px;

}

.hero h2{

font-size:24px;

}

.hero h3{

font-size:30px;

}

.timeline h2,
.gallery h2,
.video h2,
.cake h2{

font-size:32px;

}

.card{

margin:40px 15px;

padding:25px;

}

.card h2{

font-size:28px;

}

.photos{

grid-template-columns:1fr;

}

#gift{

width:170px;

}

#cake{

width:200px;

}

.ending h1{

font-size:48px;

}

}
/* ===========================================
   NIGHT SKY
=========================================== */

#sky{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:

linear-gradient(
180deg,
#ffedf6 0%,
#ffe4ef 40%,
#fff6fb 100%);

z-index:-3;

}

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

.star{

position:fixed;

width:3px;
height:3px;

background:white;

border-radius:50%;

animation:twinkle 2s infinite;

box-shadow:

0 0 8px white,

0 0 15px white;

}

@keyframes twinkle{

0%{

opacity:.2;

transform:scale(.5);

}

50%{

opacity:1;

transform:scale(1.4);

}

100%{

opacity:.2;

transform:scale(.5);

}

}

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

.petal{

position:fixed;

width:18px;
height:18px;

background:#ff9dc8;

border-radius:

0 100% 0 100%;

opacity:.8;

pointer-events:none;

animation:

fall linear forwards;

}

@keyframes fall{

0%{

transform:

translateY(-30px)

rotate(0deg);

}

100%{

transform:

translateY(110vh)

translateX(120px)

rotate(720deg);

opacity:0;

}

}
/* ===================================
   ANIMATED BACKGROUND
=================================== */

body{

background:linear-gradient(
-45deg,
#ffd1e8,
#ffeef7,
#ffffff,
#ffd9ec);

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%;
}

}

/* ===================================
BALLOON
=================================== */

.balloon{

position:fixed;

bottom:-150px;

width:55px;

height:70px;

border-radius:50%;

z-index:2;

animation:fly linear forwards;

}

.balloon::before{

content:"";

position:absolute;

width:2px;

height:70px;

background:#999;

left:50%;

top:70px;

}

@keyframes fly{

0%{

transform:translateY(0);

}

100%{

transform:translateY(-130vh);

}

}
/* ==========================================
   TYPING EFFECT
========================================== */

.cursor{

display:inline-block;

width:3px;

height:1em;

background:#ff3d91;

margin-left:4px;

animation:blink .8s infinite;

}

@keyframes blink{

50%{

opacity:0;

}

}

/* ==========================================
   CURSOR GLOW
========================================== */

#mouseGlow{

position:fixed;

width:180px;

height:180px;

border-radius:50%;

pointer-events:none;

background:radial-gradient(

rgba(255,120,180,.25),

transparent 70%

);

transform:translate(-50%,-50%);

z-index:1;

filter:blur(10px);

}

/* ==========================================
   LOVE TRAIL
========================================== */

.trail{

position:fixed;

pointer-events:none;

font-size:18px;

animation:trailFade .8s linear forwards;

z-index:99999;

}

@keyframes trailFade{

0%{

opacity:1;

transform:translateY(0) scale(1);

}

100%{

opacity:0;

transform:translateY(-40px) scale(2);

}

}

/* ==========================================
   HERO ANIMATION
========================================== */

.hero h1{

animation:

heroFloat 3s ease-in-out infinite;

}

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}
/* ===========================================
   LIGHTBOX GALLERY
=========================================== */

#lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:999999;
}

#lightbox img{
    max-width:85%;
    max-height:85%;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(255,255,255,.25);
}

.lb-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    font-size:28px;
    cursor:pointer;
    background:#ff4d94;
    color:white;
}

#prevBtn{
    left:25px;
}

#nextBtn{
    right:25px;
}

#closeBtn{
    position:absolute;
    top:20px;
    right:20px;
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    background:#ff4d94;
    color:white;
    font-size:24px;
}

/* Envelope Animation */

#letterText{
    transform:scale(.8);
    opacity:0;
    transition:.5s;
}

#letterText.show{
    transform:scale(1);
    opacity:1;
}
/* =========================================
COUNTDOWN
========================================= */

#countdownOverlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

display:none;

justify-content:center;
align-items:center;

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

backdrop-filter:blur(15px);

z-index:999999;

}

.countBox{

text-align:center;

animation:zoomIn 1s;

}

.countBox h2{

font-size:45px;

color:#ff4d94;

font-family:'Great Vibes';

}

.countBox h1{

font-size:65px;

margin:20px 0;

color:#ff2674;

}

.countBox p{

font-size:22px;

}

#countdownNumber{

font-size:120px;

font-weight:bold;

margin-top:30px;

color:#ff4d94;

animation:pulse 1s infinite;

}

@keyframes pulse{

0%{

transform:scale(.9);

}

50%{

transform:scale(1.1);

}

100%{

transform:scale(.9);

}

}

@keyframes zoomIn{

from{

transform:scale(.5);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}