body{

margin:0;
font-family:poppins;

background:#fff0f6;

overflow:hidden;

}



.page{

position:absolute;

width:100%;
height:100vh;

display:flex;

justify-content:center;

align-items:center;

flex-direction:column;

opacity:0;

pointer-events:none;

transition:.6s;

padding:20px;

}



.page.active{

opacity:1;

pointer-events:auto;

}



/* hearts */

#hearts{

position:fixed;

width:100%;
height:100%;

z-index:-1;

}



.heart{

position:absolute;

opacity:.15;

animation:float 12s linear infinite;

}



@keyframes float{

0%{transform:translateY(100vh)}

100%{transform:translateY(-10vh)}

}



/* envelope */

#countdown{

position:absolute;

top:80px;

font-size:42px;

color:#ff4fa3;

}



#tapText{

position:absolute;

bottom:80px;

color:#ff4fa3;

opacity:0;

}



.envelope{

width:260px;

height:170px;

background:linear-gradient(#ffc4e2,#ff8ec3);

border-radius:20px;

position:relative;

}



.flap{

position:absolute;

width:100%;

height:100%;

clip-path:polygon(0 0,100% 0,50% 60%);

background:linear-gradient(#ffd7ec,#ff9ccd);

transform-origin:top;

transition:1s;

}



.open .flap{

transform:rotateX(180deg);

}



.letter{

position:absolute;

top:50%;

left:50%;

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

background:white;

padding:25px;

border-radius:16px;

width:210px;

text-align:center;

}



/* card */

.card{

background:linear-gradient(#fff6fb,#ffe4f2);

padding:28px;

border-radius:24px;

max-width:420px;

width:100%;

}



/* layout */

.grid{

display:grid;

grid-template-columns:1fr 120px;

gap:20px;

align-items:center;

}



.reverse{

grid-template-columns:120px 1fr;

}



img{

width:100%;

}



/* typing */

.typing{

white-space:pre-wrap;

line-height:1.8;

min-height:120px;

}



.typing::after{

content:"|";

animation:blink 1s infinite;

}



@keyframes blink{

0%{opacity:1}

50%{opacity:0}

100%{opacity:1}

}



/* gallery */

.gallery{

display:flex;

gap:14px;

margin-top:20px;

}



.gallery img{

width:80px;

border-radius:14px;

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

}



.mid{

width:110px;

transform:translateY(-8px);

}



#loveText{

opacity:0;

color:#ff4fa3;

font-family:playfair display;

}



/* playlist */

.song{

display:grid;

grid-template-columns:50px 1fr 40px;

gap:10px;

align-items:center;

padding:8px;

border-radius:10px;

}



.song img{

width:45px;

height:45px;

border-radius:8px;

}



.song button{

border:none;

background:#ff4fa3;

color:white;

border-radius:50%;

width:32px;

height:32px;

}



.playing{

background:#ffd9ec;

}



/* now playing */

#nowPlaying{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%) translateY(-20px);

background:white;

padding:12px 18px;

border-radius:18px;

opacity:0;

transition:.4s;

z-index:99;

}



#nowPlaying.show{

opacity:1;

transform:translateX(-50%) translateY(0);

}