*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
    background:linear-gradient(135deg,#090916,#1d1238,#090916);
    color:white;
    overflow-x:hidden;
    overflow-y:auto;
}

/* Loader */

#loader{
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
position: relative;
z-index: 100;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(15px);

    padding:50px;
}

#loader h1{
    font-size:75px;
    color:#ff6fae;
    text-shadow:
        0 0 15px #ff6fae,
        0 0 35px #ff2d75,
        0 0 60px hotpink;

    animation:glow 2s ease-in-out infinite alternate;
}

#loader p{
    margin-top:25px;
    font-size:26px;
    color:white;
    opacity:.9;
}

#startBtn{
    margin-top:40px;

    padding:18px 50px;

    border:none;

    border-radius:50px;

    background:linear-gradient(45deg,#ff4f8b,#ff84c1);

    color:white;

    font-size:22px;

    font-weight:bold;

    cursor:pointer;
    position: relative;
z-index: 101;

    transition:.4s;

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

    animation:pulse 2s infinite;
}

#startBtn:hover{

    transform:scale(1.08);

    box-shadow:
        0 0 40px hotpink,
        0 0 80px deeppink;

}

/* Story */

.hidden{
display:none;
}

#story{
height:100vh;
overflow-y:scroll;
scroll-snap-type:y mandatory;
}

.slide{
    min-height:100vh;
    padding:80px 20px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    margin-bottom:120px;

    animation:fadeIn 1.5s ease;
}

.slide img{
    width: 60%;
    max-width: 500px;
    height: auto;

    border-radius: 25px;

    border: 6px solid rgba(255,255,255,0.2);

    padding: 8px;

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

    backdrop-filter: blur(15px);

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

    transition: .5s;
    animation:floating 4s ease-in-out infinite;
    filter: brightness(1.05) contrast(1.08) saturate(1.15);
}


.slide img:hover{

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

    box-shadow:
        0 0 40px hotpink,
        0 25px 60px rgba(0,0,0,.6);

}

.caption{

font-size:30px;

width:70%;

text-align:center;

line-height:1.8;

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

padding:30px;

border-radius:20px;

backdrop-filter:blur(10px);

}

.slide video{
    width: 50%;
    max-width: 500px;
    height: auto;

    display: block;
    margin: 0 auto;

    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(255, 105, 180, 0.3);
}

.ending h1{
font-size:70px;
color:#ff5d9e;
}

.ending p{
margin-top:25px;
font-size:26px;
line-height:1.8;
text-align:center;
max-width:800px;
}

/* Hearts */

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

.heart{
position:absolute;
color:#ff4f8b;
font-size:20px;
animation:float 8s linear infinite;
}

@keyframes float{

0%{
transform:translateY(100vh);
opacity:0;
}

20%{
opacity:1;
}

100%{
transform:translateY(-120vh);
opacity:0;
}

}

@keyframes fadeIn{

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

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

}

@keyframes fadeDown{

from{
opacity:0;
transform:translateY(-80px);
}

to{
opacity:1;
transform:translateY(0);
}

}
@keyframes floating{

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

50%{
transform:translateY(-8px);
}

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

}
/* ===========================
   STARRY BACKGROUND
=========================== */

#stars{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-3;
}

.star{
    position:absolute;
    width:3px;
    height:3px;
    background:white;
    border-radius:50%;
    animation:twinkle 2s infinite alternate;
}

@keyframes twinkle{

    from{
        opacity:.2;
        transform:scale(.8);
    }

    to{
        opacity:1;
        transform:scale(1.8);
        box-shadow:0 0 12px white;
    }

}
/* ===========================
   SHOOTING STARS
=========================== */

#shooting-stars{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:-2;
}

.shooting-star{
    position:absolute;
    width:180px;
    height:2px;
    background:linear-gradient(to right, white, rgba(255,255,255,0));
    transform:rotate(-35deg);
    animation:shoot 2s linear forwards;
}

@keyframes shoot{

    0%{
        opacity:0;
        transform:translate(0,0) rotate(-35deg);
    }

    10%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translate(-900px,900px) rotate(-35deg);
    }

}
/* ===========================
   FALLING ROSE PETALS
=========================== */

#petals{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:-1;
}

.petal{
    position:absolute;
    font-size:22px;
    animation:fallPetal linear forwards;
    opacity:.9;
}

@keyframes fallPetal{

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

    10%{
        opacity:1;
    }

    100%{
        transform:translateY(110vh) translateX(80px) rotate(720deg);
        opacity:0;
    }

}
@keyframes glow{

    from{
        text-shadow:
            0 0 10px hotpink,
            0 0 20px hotpink;
    }

    to{
        text-shadow:
            0 0 20px white,
            0 0 40px hotpink,
            0 0 80px deeppink;
    }

}
@keyframes pulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}
/* ===========================
   LOVE LETTER
=========================== */

#loveLetter{

    width:75%;
    max-width:900px;

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

    backdrop-filter:blur(15px);

    border-radius:25px;

    padding:40px;

    margin-top:40px;

    line-height:2;

    font-size:24px;

    color:white;

    box-shadow:
        0 0 30px rgba(255,105,180,.4);

    white-space:pre-line;

    text-align:left;

}
/* ===========================
   GRAND FINALE
=========================== */

#finalMessage{

    margin-top:70px;

    text-align:center;

    animation:fadeIn 2s;

}

#finalMessage h1{

    font-size:70px;

    color:#ff6aa8;

    text-shadow:
        0 0 25px hotpink,
        0 0 60px deeppink;

    animation:glow 2s infinite alternate;

}

#finalMessage p{

    margin-top:30px;

    font-size:28px;

    line-height:1.8;

}

#surpriseBtn{

    margin-top:50px;

    padding:20px 55px;

    border:none;

    border-radius:50px;

    background:linear-gradient(45deg,#ff4d88,#ff8cc2);

    color:white;

    font-size:22px;

    cursor:pointer;

    animation:pulse 2s infinite;

}
/* ===========================
   GOODBYE SCREEN
=========================== */

#goodbyeScreen{

    position:fixed;

    inset:0;

    background:black;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:white;

    opacity:0;

    transition:2s;

    z-index:9999;

}

#goodbyeScreen.show{

    opacity:1;

}

#goodbyeScreen h1{

    font-size:90px;

    animation:pulse 2s infinite;

}

#goodbyeScreen h2{

    margin:15px;

    font-size:42px;

    color:#ff77b7;

}

#goodbyeScreen p{

    margin-top:35px;

    font-size:28px;

    line-height:2;

    width:70%;

}