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

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

html{
    overflow-x:hidden;
}

body{
    font-family:'Poppins',sans-serif;
    background:#05050a;
    color:white;
    overflow-x:hidden;
}


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

.background{
    position:fixed;
    inset:0;
    z-index:-5;
    overflow:hidden;
    background:
    radial-gradient(circle at top,#9d4edd55,transparent 35%),
    radial-gradient(circle at bottom,#ff4d8d33,transparent 40%),
    #05050a;
}


#aurora{

position:absolute;

width:700px;
height:700px;

background:
radial-gradient(circle,#9d4edd55,transparent 65%);

filter:blur(80px);

top:-200px;
left:-200px;

animation:auroraMove 10s infinite alternate;

}


@keyframes auroraMove{

from{
transform:translate(0,0);
}

to{
transform:translate(200px,150px);
}

}



/* ==========================
   LOADER
========================== */

#loader{

position:fixed;

inset:0;

background:#05050a;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}


.loader-content{

text-align:center;

}


.loader-heart{

font-size:60px;

animation:pulse 1.5s infinite;

}


.loader-content h1{

font-family:'Cinzel',serif;

font-size:25px;

margin-top:20px;

color:#ffd166;

}


.loader-content p{

color:#aaa;

margin-top:10px;

}



@keyframes pulse{

50%{

transform:scale(1.2);

}

}



/* ==========================
   INTRO SCREEN
========================== */


#intro{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

}


.intro-card{

max-width:650px;

text-align:center;

padding:50px 40px;

background:rgba(255,255,255,0.08);

backdrop-filter:blur(20px);

border-radius:30px;

border:1px solid rgba(255,255,255,.15);

box-shadow:0 0 50px #9d4edd33;

}


.intro-card h4{

letter-spacing:4px;

color:#aaa;

}

.intro-card h1{
    font-family: 'Allura', serif;
    font-size: 48px;
    color: #ffd166;
    margin: 25px 5;
}



.intro-card p{

font-size:25px;

line-height:2;

color:#ddd;

}



#enterBtn{

margin-top:35px;

padding:16px 45px;

border:none;

border-radius:50px;

background:linear-gradient(
45deg,#9d4edd,#ff4d8d
);

color:white;

font-size:17px;

cursor:pointer;

transition:.4s;

}


#enterBtn:hover{

transform:scale(1.08);

box-shadow:0 0 30px #ff4d8d;

}



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


#hero{

min-height:100vh;

display:flex;

align-items:center;

padding:80px 8%;

}


.hero-container{

width:100%;

display:flex;

align-items:center;

justify-content:space-between;

gap:50px;

}


.hero-left{

flex:1;

}


.welcome{

letter-spacing:6px;

color:#aaa;

font-size:18px;

}


.hero-left h1{

font-family:'Allura',serif;

font-size:68px ;

color:#ffd166;

margin:15px 0;

}
.hero-left h2{
    font-family: 'Cinzel', serif;
    font-size: 34px;
    font-weight: 700;
}

.hero-text{

margin-top:25px;

font-size:20px;

line-height:2;

color:#ddd;

}



.hero-buttons{

margin-top:40px;

display:flex;

gap:20px;

}



.hero-buttons button{

padding:15px 35px;

border:none;

border-radius:50px;

cursor:pointer;

font-size:16px;

background:#9d4edd;

color:white;

transition:.4s;

}



.hero-buttons button:hover{

transform:translateY(-5px);

box-shadow:0 0 25px #9d4edd;

}



/* HERO IMAGE */


.hero-right{

flex:1;

display:flex;

justify-content:center;

}


.hero-image{

width:380px;

height:480px;

border-radius:30px;

overflow:hidden;

border:2px solid #ffd166;

box-shadow:0 0 50px #ffd16655;

}


.hero-image img{

width:100%;

height:100%;

object-fit:cover;

}
/* ==========================
   HERO IMAGE EFFECT
========================== */

.hero-image{

animation:floatImage 5s ease-in-out infinite;

}


@keyframes floatImage{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

}


/* ==========================
   COMMON SECTION STYLE
========================== */

section{

position:relative;

}


section::before{

content:"";

position:absolute;

width:250px;

height:250px;

background:#9d4edd33;

filter:blur(100px);

border-radius:50%;

z-index:-1;

}


/* ==========================
   BUTTON PREMIUM EFFECT
========================== */


.hero-buttons button,
#enterBtn,
#wishBtn,
#surpriseBtn{

position:relative;

overflow:hidden;

}


.hero-buttons button::before,
#enterBtn::before,
#wishBtn::before,
#surpriseBtn::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.4),
transparent
);

transition:.6s;

}


.hero-buttons button:hover::before,
#enterBtn:hover::before,
#wishBtn:hover::before,
#surpriseBtn:hover::before{

left:100%;

}



/* ==========================
   IMAGE GLOW
========================== */


.hero-image::after{

content:"";

position:absolute;

inset:-5px;

border-radius:35px;

background:
linear-gradient(
45deg,
#ffd166,
#9d4edd,
#ff4d8d
);

z-index:-1;

filter:blur(20px);

}



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


.hero-left h1{

text-shadow:

0 0 20px #ffd16655;

}


.intro-card h1{

text-shadow:

0 0 30px #ffd16688;

}



/* ==========================
   DIVIDER
========================== */


.section-title::after{

content:"";

display:block;

width:100px;

height:3px;

margin:25px auto;

background:

linear-gradient(
90deg,
#ffd166,
#ff4d8d
);

border-radius:20px;

}



/* ==========================
   SMOOTH APPEAR
========================== */


.hero-left,
.hero-right{

animation:fadeUp 1.5s ease;

}


@keyframes fadeUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}



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


@media(max-width:768px){


.hero-container{

flex-direction:column;

text-align:center;

}


.hero-left h1{

font-size:65px;

}


.hero-left h2{

font-size:22px;

}


.hero-image{

width:280px;

height:380px;

}


.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}


.intro-card h1{

font-size:50px;

}


}
/* ==========================
   MEMORY SECTION
========================== */

#memories{

padding:100px 8%;

}


.section-title{

text-align:center;

max-width:800px;

margin:auto;

}


.section-title h5{

letter-spacing:5px;

color:#aaa;

}


.section-title h2{

font-family:'Allura',serif;

font-size:45px;

color:#ffd166;

margin:20px 0;

}


.section-title p{

color:#ccc;

font-size:18px;

}



.memory-grid{

margin-top:60px;

display:grid;

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

gap:40px;

}



.memory-card{

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

backdrop-filter:blur(20px);

border-radius:25px;

overflow:hidden;

border:1px solid rgba(255,255,255,.15);

transition:.5s;

}


.memory-card:hover{

transform:translateY(-15px);

box-shadow:0 0 40px #9d4edd66;

}



.memory-card img{

width:100%;

height:470px;

object-fit:cover;

}



.memory-content{

padding:30px;

}


.memory-content h3{
    color:#ffd166;
    font-family:'Allura',serif;
    font-size:36px;
    margin-bottom:15px;
}


.memory-content p{

color:#ddd;

line-height:1.8;

}



/* ==========================
   QUOTE SECTION
========================== */


#quote{

padding:100px 8%;

}


.quote-box{

padding:70px 30px;

text-align:center;

border-radius:30px;

background:

linear-gradient(
135deg,
rgba(157,78,221,.25),
rgba(255,77,141,.18)
);

border:1px solid rgba(255,255,255,.15);

}


.quote-box h2{

font-family:'Allura',serif;

font-size:50px;

color:#ffd166;

}


.quote-box p{

margin-top:20px;

font-size:22px;

}



/* ==========================
   MESSAGE CARD
========================== */


#message{

padding:100px 8%;

}


.message-card{

max-width:850px;

margin:auto;

text-align:center;

padding:60px 40px;

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

backdrop-filter:blur(20px);

border-radius:30px;

border:1px solid rgba(255,255,255,.15);

}


.message-card h4{

letter-spacing:5px;

color:#aaa;

}


.message-card h2{

margin: 30px 0;

font-family:'Allura',serif;

font-size:50px;

color:#ffd166;

}


.message-card p{

font-size: 28px;

line-height:2;

color:#eee;

}



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


#birthday{

padding:120px 8%;

text-align:center;

}


.cake-area{

margin-top:60px;

}


.cake{

width:220px;

margin:auto;

}


.layer{

margin:auto;

border-radius:15px;

}


.bottom-layer{

height:80px;

width:220px;

background:#ff4d8d;

box-shadow:0 0 30px #ff4d8d;

}


.middle-layer{

height:60px;

width:170px;

background:#9d4edd;

}


.top-layer{

height:45px;

width:120px;

background:#ffd166;

}


.candle{

height:55px;

width:15px;

background:white;

margin:auto;

position:relative;

}


.flame{

position:absolute;

top:-25px;

left:-2px;

width:18px;

height:25px;

background:#ffae00;

border-radius:50%;

animation:flicker .8s infinite;

}


@keyframes flicker{

50%{

transform:scale(1.3);

}

}


#wishBtn{

margin-top:40px;

padding:16px 45px;

border:none;

border-radius:50px;

background:#ff4d8d;

color:white;

font-size:18px;

cursor:pointer;

}



/* ==========================
   SURPRISE SECTION
========================== */


#surprise{

padding:100px 8%;

text-align:center;

}


.surprise-box{

padding:60px;

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

backdrop-filter:blur(20px);

border-radius:30px;

}


#surpriseBtn{

margin-top:30px;

padding:15px 45px;

border:none;

border-radius:50px;

background:#9d4edd;

color:white;

font-size:18px;

cursor:pointer;

}


#hiddenMessage{

display:none;

margin-top:40px;

}


#hiddenMessage h1{

font-family:'Cinzel',serif;

font-size:45px;

color:#ffd166;

}



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


#ending{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}


.ending-content h1{

font-family:'Allura',serif;

font-size:90px;

color:#ffd166;

}


.ending-content p{

font-size:22px;

line-height:2;

color:#ddd;

margin:30px;

}


.ending-content h3{

font-size:25px;

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

#musicBtn{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

border-radius:50%;

border:none;

background:linear-gradient(
45deg,
#9d4edd,
#ff4d8d
);

color:white;

font-size:25px;

cursor:pointer;

z-index:9999;

box-shadow:0 0 30px #ff4d8d88;

animation:pulseBtn 2s infinite;

}


@keyframes pulseBtn{

50%{

transform:scale(1.1);

}

}



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

.star{

position:absolute;

width:3px;

height:3px;

background:white;

border-radius:50%;

animation:twinkle 3s infinite alternate;

}


@keyframes twinkle{

from{

opacity:.2;

transform:scale(.5);

}

to{

opacity:1;

transform:scale(1.8);

}

}



/* ==========================
   HEART EFFECT
========================== */


.heart{

position:fixed;

top:-20px;

font-size:25px;

pointer-events:none;

animation:heartFall 8s linear forwards;

z-index:999;

}


@keyframes heartFall{

0%{

transform:translateY(0)
rotate(0);

opacity:1;

}


100%{

transform:translateY(110vh)
rotate(360deg);

opacity:0;

}

}



/* ==========================
   FIREWORK CANVAS
========================== */


#fireworks{

position:fixed;

inset:0;

pointer-events:none;

z-index:9998;

}



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


#lightbox{

position:fixed;

inset:0;

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

display:none;

align-items:center;

justify-content:center;

z-index:99999;

}


#lightboxImage{

max-width:90%;

max-height:90%;

border-radius:25px;

box-shadow:0 0 50px #fff5;

}


#closeLightbox{

position:absolute;

top:25px;

right:40px;

font-size:50px;

color:white;

cursor:pointer;

}



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


@media(max-width:768px){


#hero{

padding:60px 5%;

}


.hero-container{

gap:30px;

}


.hero-left h1{

font-size:60px;

}


.hero-left h2{

font-size:20px;

}


.hero-text{

font-size:17px;

}


.hero-image{

width:260px;

height:350px;

}



.intro-card{

padding:35px 20px;

}


.intro-card h1{

font-size:45px;

}


.section-title h2{

font-size:32px;

}


.quote-box h2{

font-size:40px;

}


.message-card h2{

font-size:40px;

}


.ending-content h1{

font-size:55px;

}


.ending-content p{

font-size:18px;

}


.memory-card img{

height:300px;

}


}



@media(max-width:450px){


.hero-left h1{

font-size:50px;

}


.hero-buttons button{

width:100%;

}


#musicBtn{

width:55px;

height:55px;

}


}