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

body{
background:
radial-gradient(circle at top,#ff4d88 0%,#090909 40%);
color:white;
font-family:'Poppins',sans-serif;
overflow-x:hidden;
}

.hero{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
position:fixed;
top:0;
left:0;
width:100%;
background:#090909;
z-index:999;
transition:1.5s;
}

.hero h1{
font-size:4rem;
margin-bottom:20px;
}

.hero p{
max-width:700px;
line-height:1.8;
font-size:1.2rem;
}

.hero.hide{
opacity:0;
pointer-events:none;
}

.subtitle{
max-width:600px;
line-height:1.8;
}

button{
padding:15px 25px;
border:none;
border-radius:50px;
margin-top:25px;
cursor:pointer;
font-size:1rem;
}

.hidden{
display:none;
}

.typing-container{
padding:40px;
text-align:center;
font-size:1.3rem;
line-height:2;
}

.counter-section{
padding:100px 20px;
text-align:center;
}

#counter-love{
font-size:2.2rem;
font-weight:bold;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:15px;
padding:30px;
}

.gallery img{
width:100%;
border-radius:20px;
cursor:pointer;
transition:.5s;
box-shadow:0 0 20px rgba(255,77,136,.3);
}

.gallery img:hover{
transform:scale(1.08);
box-shadow:0 0 40px rgba(255,77,136,.7);
}

.love-letter{
padding:50px 30px;
line-height:2;
text-align:center;
}

.ending{
padding:150px 30px;
text-align:center;
background:
linear-gradient(
rgba(0,0,0,.7),
rgba(0,0,0,.8)
),
url("foto8.jpg");

background-size:cover;
background-position:center;
background-attachment:fixed;
}

#lightbox{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.95);
justify-content:center;
align-items:center;
z-index:9999;
}

#lightbox img{
max-width:95%;
max-height:95%;
border-radius:20px;
}

.heart{
position:fixed;
top:-50px;
font-size:25px;
z-index:99999;
pointer-events:none;
animation:fall linear forwards;
}

@keyframes fall{

0%{
transform:translateY(-100px);
}

100%{
transform:translateY(110vh);
}

}
.hero,
.typing-container,
.counter-section,
.love-letter,
.ending{
backdrop-filter:blur(15px);
}

#stars{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:-1;
background:
radial-gradient(2px 2px at 20px 30px,#fff,transparent),
radial-gradient(2px 2px at 40px 70px,#fff,transparent),
radial-gradient(1px 1px at 90px 40px,#fff,transparent),
radial-gradient(2px 2px at 160px 120px,#fff,transparent),
radial-gradient(1px 1px at 230px 80px,#fff,transparent);
background-size:300px 300px;
animation:starsMove 30s linear infinite;
opacity:.6;
}

@keyframes starsMove{
from{
transform:translateY(0);
}
to{
transform:translateY(-300px);
}
}
.typing-container,
.love-letter,
.counter-section{
background:rgba(255,255,255,0.05);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,0.1);
border-radius:25px;
margin:30px;
}
.slider{
padding:40px;
display:flex;
justify-content:center;
}

.slider img{
width:90%;
max-width:800px;
border-radius:25px;
box-shadow:0 0 40px rgba(255,105,180,.4);
transition:.8s;
}
.fade{
opacity:0;
transform:translateY(50px);
transition:1s;
}

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

#story,
.counter-section,
.slider,
.love-letter,
.ending{
display:none;
}

#journeyBtn{
display:none;
margin-top:20px;
}