body{

margin:0;
font-family:Arial;

background:#050b12;

color:white;
text-align:center;

overflow-x:hidden;

animation:skyFade 2.5s ease;

}

@keyframes skyFade{

from{
background:#000;
}

to{
background:#050b12;
}

}

/* INTRO SCREEN */

.intro{
position:relative;
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
transition:transform 1.2s ease;
}

.intro.moveTop{
transform:translateY(-35vh);
}

/* TITLE */

.title{
font-size:42px;
color:cyan;
text-shadow:0 0 20px cyan;
margin-bottom:25px;
}

/* BUTTON */

button{
padding:15px 30px;
font-size:18px;
border:none;
border-radius:30px;
background:cyan;
color:black;
cursor:pointer;
box-shadow:0 0 20px cyan;
transition:0.3s;
}

button:hover{
transform:scale(1.1);
box-shadow:0 0 40px cyan;
}

/* KEY */

.key{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:70px;
opacity:0;
pointer-events:none;
}

.key.show{
animation:keyAnim 2.2s forwards;
}

@keyframes keyAnim{

0%{
opacity:0;
transform:translate(-50%,-50%) scale(0.5) rotate(0deg);
}

30%{
opacity:1;
}

40%{
transform:translate(-50%,-50%) rotate(-15deg);
}

50%{
transform:translate(-50%,-50%) rotate(15deg);
}

60%{
transform:translate(-50%,-50%) rotate(-10deg);
}

70%{
transform:translate(-50%,-50%) rotate(10deg);
}

100%{
opacity:0;
transform:translate(-50%,-50%) scale(1.5);
}

}

/* SURPRISE */

#surprise{
opacity:0;
transform:translateY(40px);
transition:all 1.2s ease;

max-width:700px;
margin:40px auto;
padding:20px;
}

#surprise.show{
opacity:1;
transform:translateY(0);
}

.hidden{
display:block;
}

/* TEXT */

h2{
margin-top:40px;
color:cyan;
font-size:32px;
}

p{
max-width:500px;
margin:auto;
font-size:18px;
line-height:1.6;
}

/* GALLERY */

.gallery{
margin-top:30px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:15px;
}

.gallery img{
width:200px;
border-radius:15px;
box-shadow:0 0 15px cyan;
}

/* MOBILE */

@media (max-width:600px){

.title{
font-size:30px;
}

.gallery img{
width:140px;
}

}

/* CONFETTI BACKGROUND */

#confetti{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
pointer-events:none;
}

#stars{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-2;
overflow:hidden;
}

.star{
position:absolute;
width:2px;
height:2px;
background:cyan;
box-shadow:0 0 6px cyan;
border-radius:50%;
opacity:0.8;
animation:starMove linear infinite;
animation:starMove linear infinite, starFade 3s ease forwards;
}

@keyframes starFade{

from{
opacity:0;
}

to{
opacity:0.8;
}

}

@keyframes starMove{

from{
transform:translateY(0px);
}

to{
transform:translateY(100vh);
}

}

.chestContainer{
margin-top:50px;
text-align:center;
}

#chest{
font-size:60px;
cursor:pointer;
transition:transform 0.3s;
}

#chest.wiggle{
animation:chestWiggle 0.6s;
}

@keyframes chestWiggle{

0%{transform:rotate(0deg);}
25%{transform:rotate(-15deg);}
50%{transform:rotate(15deg);}
75%{transform:rotate(-10deg);}
100%{transform:rotate(0deg);}

}

#levelText{

opacity:0;
max-width:500px;
margin:20px auto;
line-height:1.6;
font-size:18px;

transition:all 1.2s ease;
transform:translateY(20px);

}

#levelText.show{

opacity:1;
transform:translateY(0);

}

.chestHint{

color:cyan;
font-size:18px;
margin-bottom:15px;
text-shadow:0 0 10px cyan;

animation:hintGlow 2s infinite alternate;

}

@keyframes hintGlow{

from{opacity:0.6;}
to{opacity:1;}

}

#constellation{

position:fixed;

top:90px;
right:120px;

width:180px;
height:180px;

pointer-events:none;
z-index:-1;

animation:twinkle 4s infinite alternate;

}

/* mobile fix */

@media (max-width:600px){

#constellation{

top:40px;
right:50%;
transform:translateX(50%);

width:120px;
height:120px;

}

}

/* stars */

.starDot{

position:absolute;
width:4px;
height:4px;

background:cyan;
border-radius:50%;

box-shadow:0 0 10px cyan;

opacity:0;

animation:drawStar 2s forwards;

}

/* star positions making a heart */

.starDot:nth-child(1){top:40px;left:30px;animation-delay:0.2s;}
.starDot:nth-child(2){top:20px;left:60px;animation-delay:0.4s;}
.starDot:nth-child(3){top:40px;left:90px;animation-delay:0.6s;}
.starDot:nth-child(4){top:70px;left:110px;animation-delay:0.8s;}
.starDot:nth-child(5){top:110px;left:75px;animation-delay:1s;}
.starDot:nth-child(6){top:70px;left:40px;animation-delay:1.2s;}
.starDot:nth-child(7){top:60px;left:20px;animation-delay:1.4s;}
.starDot:nth-child(8){top:90px;left:55px;animation-delay:1.6s;}

@keyframes drawStar{

from{
opacity:0;
transform:scale(0);
}

to{
opacity:1;
transform:scale(1);
}

}

/* name */

#constellation{

position:fixed;

top:90px;
right:120px;

width:180px;
height:180px;

pointer-events:none;
z-index:-1;

animation:twinkle 4s infinite alternate;

}

.constellationSVG{

width:100%;
height:100%;

}

/* stars */

.constellationSVG circle{

fill:cyan;
filter:drop-shadow(0 0 6px cyan);

animation:starAppear 2s forwards;

}

/* lines */

.constellationSVG line{

stroke:cyan;
stroke-width:1.5;

opacity:0;

animation:lineDraw 2s forwards;

}

@keyframes starAppear{

from{
opacity:0;
transform:scale(0);
}

to{
opacity:1;
transform:scale(1);
}

}

@keyframes lineDraw{

from{
opacity:0;
}

to{
opacity:0.7;
}

}

/* glowing name */

.constellationName{

position:absolute;

top:85px;
left:50%;

transform:translateX(-50%);

color:cyan;
font-size:18px;

text-shadow:0 0 10px cyan;

opacity:0;

animation:nameFade 3s forwards;
animation-delay:2s;

}

@keyframes nameFade{

from{opacity:0;}
to{opacity:1;}

}

/* gentle twinkle */

@keyframes twinkle{

from{opacity:0.6;}
to{opacity:1;}

}

#birthdaySky{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

pointer-events:none;

opacity:0;

z-index:3;

transition:opacity 1.5s ease;

}

.skyText{

font-size:60px;
font-weight:bold;
letter-spacing:2px;

color:white;

text-shadow:
0 0 10px cyan,
0 0 25px cyan,
0 0 50px cyan,
0 0 80px cyan;

transform:scale(0.5);

transition:all 2s ease;

}

#birthdaySky.show{

opacity:1;

}

#birthdaySky.show .skyText{

transform:scale(1);

}