*{
    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:radial-gradient(circle at center,#3a003f,#000);
    animation:moveBg 8s infinite alternate;
}

@keyframes moveBg{
    0%{filter:hue-rotate(0deg);}
    100%{filter:hue-rotate(40deg);}
}

.start button{
    position:relative;
    padding:18px 45px;
    font-size:18px;
    border:none;
    border-radius:50px;
    background:linear-gradient(45deg,#ff2e93,#ff8bdc);
    color:white;
    cursor:pointer;
    box-shadow:0 0 30px rgba(255,0,140,0.7);
    transition:0.4s;
    z-index:2;
}

.start button:hover{
    transform:scale(1.1);
}

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

.hidden{
    display:none;
}

.bg{
    position:absolute;
    width:100%;
    height:100%;
    background:radial-gradient(circle at center,#2a002e,#000);
    animation:glow 6s infinite alternate;
}

@keyframes glow{
    0%{filter:brightness(1);}
    100%{filter:brightness(1.3);}
}

.hearts::before{
    content:"❤️ 🤍 💞 💖";
    position:absolute;
    width:100%;
    text-align:center;
    font-size:24px;
    animation:floatHearts 12s linear infinite;
    opacity:0.4;
}

@keyframes floatHearts{
    0%{transform:translateY(100vh);}
    100%{transform:translateY(-100vh);}
}

.page{
    position:absolute;
    width:85%;
    opacity:0;
    transform:scale(0.9);
    transition:1s 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,#ffb6ff,#ff2e93);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

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

.emoji{
    font-size:60px;
    animation:beat 1.2s infinite;
    margin-bottom:20px;
}

@keyframes beat{
    0%{transform:scale(1);}
    50%{transform:scale(1.3);}
    100%{transform:scale(1);}
}

/* LUXURY BUTTON */
.luxury-btn{
    margin-top:30px;
    padding:18px 50px;
    font-size:18px;
    border:none;
    border-radius:60px;
    background:linear-gradient(135deg,#ff2e93,#ff8bdc,#fff0f8);
    background-size:300% 300%;
    color:white;
    cursor:pointer;
    box-shadow:0 0 25px rgba(255,0,140,0.6);
    transition:0.4s ease;
    animation:luxuryFlow 6s infinite alternate;
}

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

/* ROMANTIC MODE */
.romantic-mode .bg{
    background:radial-gradient(circle at center,#5a003f,#000);
    animation:romanticGlow 4s infinite alternate;
}

@keyframes romanticGlow{
    0%{filter:brightness(1);}
    100%{filter:brightness(1.6);}
}

.romantic-mode .hearts::before{
    content:"💞 💖 💗 💓 💘";
    animation:floatHearts 6s linear infinite;
}

/* SOFT MODE */
.soft .bg{
    background: radial-gradient(circle at center,#4a004f,#000);
}

.soft h1,.soft h2{
    text-shadow:0 0 20px rgba(255,150,200,0.7);
}

/* DEEP MODE */
.deep .bg{
    background: radial-gradient(circle at center,#6a005f,#000);
}

.deep .hearts::before{
    animation: floatHearts 6s linear infinite;
}

/* HEARTBEAT MODE */
.heartbeat .emoji{
    animation: beat 0.6s infinite;
}

.heartbeat h1,.heartbeat h2{
    text-shadow:0 0 30px rgba(255,0,140,1);
}

/* PASSION MODE */
.passion .bg{
    background: radial-gradient(circle at center,#8a0075,#000);
    animation: romanticGlow 2s infinite alternate;
}

.passion .hearts::before{
    content:"💘 💖 💞 💓 💗";
    font-size:32px;
    animation: floatHearts 4s linear infinite;
}