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

body{
    font-family:'Poppins',sans-serif;
    overflow:hidden;
    background:black;
    color:white;
}

/* START SCREEN */

.start{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

.start-bg{
    position:absolute;
    width:100%;
    height:100%;
    background:linear-gradient(135deg,#3a000f,#000,#4a0018);
    background-size:300% 300%;
    animation:bgMove 15s ease infinite;
}

@keyframes bgMove{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

.start button{
    padding:18px 55px;
    font-size:18px;
    border:none;
    border-radius:50px;
    background:linear-gradient(135deg,#ffd700,#ff4d6d,#ffd700);
    background-size:300% 300%;
    animation:goldMove 6s infinite alternate;
    color:white;
    cursor:pointer;
    box-shadow:0 0 35px rgba(255,215,0,0.6);
    z-index:2;
}

@keyframes goldMove{
    0%{background-position:0% 50%;}
    100%{background-position:100% 50%;}
}

/* MAIN SCENE */

.scene{
    position:relative;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.hidden{
    display:none;
}

.animated-bg{
    position:absolute;
    width:100%;
    height:100%;
    background:linear-gradient(270deg,#1a0006,#400012,#000);
    background-size:600% 600%;
    animation:romanticShift 20s ease infinite;
}

@keyframes romanticShift{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* Glass effect */

.glass{
    position:absolute;
    width:85%;
    padding:40px;
    border-radius:20px;
    backdrop-filter:blur(18px);
    background:rgba(255,255,255,0.05);
    box-shadow:0 0 50px rgba(255,0,90,0.25);
    opacity:0;
    transform:scale(0.9);
    transition:1.2s ease;
}

.page.active{
    opacity:1;
    transform:scale(1);
}

h1,h2{
    font-family:'Playfair Display',serif;
    font-size:42px;
    margin-bottom:20px;
    background:linear-gradient(45deg,#ffd700,#ff4d6d);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

p{
    font-size:18px;
    line-height:1.8;
}

/* Romantic Name Styles */

.signature{
    margin-top:25px;
    font-size:16px;
    opacity:0.8;
    letter-spacing:2px;
}

.love-names{
    font-size:48px;
    background:linear-gradient(45deg,#ff4d6d,#ffd700);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    margin-bottom:20px;
}

/* Lip effect */

#lip-effect{
    position:absolute;
    font-size:70px;
    opacity:0;
    pointer-events:none;
    transition:0.8s ease;
}

/* Petals */

#petals-container span{
    position:absolute;
    font-size:24px;
    animation:fall linear forwards;
}

@keyframes fall{
    0%{transform:translateY(-10vh) rotate(0deg);}
    100%{transform:translateY(110vh) rotate(360deg);}
}