/* ===========================================
   RESET
=========================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial,sans-serif;

    background:#f7fbff;

    color:#222;

    min-height:100vh;

    overflow-x:hidden;

}

/* ===========================================
   BACKGROUND
=========================================== */

.background{

    position:fixed;

    inset:0;

    z-index:-1;

    background:linear-gradient(
        135deg,
        #f7fbff,
        #eef7ff,
        #ffffff
    );

}

.circle{

    position:absolute;

    border-radius:50%;

    background:rgba(91,174,255,.18);

    animation:float 18s linear infinite;

}

.c1{

    width:220px;
    height:220px;

    left:-70px;
    bottom:-70px;

}

.c2{

    width:140px;
    height:140px;

    right:8%;
    top:8%;

    animation-duration:24s;

}

.c3{

    width:120px;
    height:120px;

    left:45%;
    bottom:-50px;

    animation-duration:15s;

}

.c4{

    width:180px;
    height:180px;

    right:18%;
    bottom:-80px;

    animation-duration:20s;

}

/* ===========================================
   PAGES
=========================================== */

.page{

    display:none;

    width:100%;

    min-height:100vh;

    justify-content:center;

    align-items:flex-start;

    padding:40px;

}

.page.active{

    display:flex;

}

/* ===========================================
   COMMON CARD
=========================================== */

.card,
.loadingCard,
.resultCard{

    width:100%;

    max-width:920px;

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

    backdrop-filter:blur(20px);

    border-radius:30px;

    padding:42px;

    box-shadow:0 25px 55px rgba(0,0,0,.08);

}

.card{

    max-width:520px;

    text-align:center;

}

/* ===========================================
   BRAND
=========================================== */

.brand{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}

.brandLogo{

    width:60px;

    height:60px;

    border-radius:18px;

    background:#5baeff;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.2rem;

    font-weight:700;

}

.popular{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#eef7ff;

    color:#5baeff;

    margin-bottom:20px;

    font-size:.85rem;

    font-weight:600;

}

.card h1{

    font-size:2.2rem;

    line-height:1.3;

    margin-bottom:18px;

}

.card p{

    color:#666;

    line-height:1.8;

    margin-bottom:30px;

}

.features{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin-bottom:35px;

}

.features div{

    background:#f8fbff;

    padding:16px;

    border-radius:16px;

    display:flex;

    justify-content:center;

    gap:10px;

}

#startBtn{

    width:100%;

    padding:18px;

    border:none;

    border-radius:50px;

    background:#5baeff;

    color:white;

    cursor:pointer;

    font-size:1rem;

    font-weight:600;

    transition:.25s;

}

#startBtn:hover{

    transform:translateY(-3px);

    background:#429fff;

}

.card small{

    display:block;

    margin-top:20px;

    color:#888;

}

/* ===========================================
   LOADING
=========================================== */

.loadingCard{

    max-width:480px;

    text-align:center;

}

.loadingCard h2{

    margin:30px 0;

}

.loadingBar{

    width:100%;

    height:12px;

    background:#e5f2ff;

    border-radius:999px;

    overflow:hidden;

}

#loadingFill{

    width:0;

    height:100%;

    background:#5baeff;

}

#loadingText{

    margin-top:18px;

    color:#666;

}
/* ===========================================
   QUIZ
=========================================== */

.quizContainer{

    width:100%;

    max-width:920px;

    margin:40px auto;

}

.quizHeader{

    margin-bottom:28px;

}

#questionNumber{

    font-size:1rem;

    font-weight:600;

    color:#555;

    margin-bottom:15px;

}

.progressBar{

    width:100%;

    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:#e5f2ff;

}

#progress{

    width:10%;

    height:100%;

    background:#5baeff;

    transition:.35s;

}

/* ===========================================
   QUESTION
=========================================== */

.questionBox{

    width:100%;

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

    backdrop-filter:blur(18px);

    border-radius:30px;

    padding:40px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

#question{

    text-align:center;

    font-size:2rem;

    line-height:1.45;

    margin-bottom:30px;

    font-weight:600;

}

#options{

    display:grid;

    grid-template-columns:1fr;

    gap:18px;

}

.option{

    display:flex;

    align-items:center;

    gap:18px;

    background:white;

    border:2px solid #edf4fc;

    border-radius:18px;

    padding:20px 24px;

    transition:.25s;

    cursor:pointer;

}

.option:hover{

    border-color:#5baeff;

    transform:translateY(-2px);

}

.option.active{

    background:#5baeff;

    color:white;

}

.optionLetter{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#eef7ff;

    color:#5baeff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    flex-shrink:0;

}

.option.active .optionLetter{

    background:white;

}

.optionText{

    flex:1;

    color:#222;

    font-size:1.05rem;

    font-weight:600;

}

/* ===========================================
   RESULTS
=========================================== */

.resultCard{

    max-width:520px;

    text-align:center;

}

.scoreCircle{

    width:180px;

    height:180px;

    border-radius:50%;

    margin:35px auto;

    background:linear-gradient(135deg,#5baeff,#95d3ff);

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:3rem;

    font-weight:700;

    box-shadow:0 20px 40px rgba(91,174,255,.25);

}

.resultCard h3{

    margin-bottom:10px;

}

.resultCard p{

    color:#666;

    margin-bottom:28px;

}

#analysisBtn{

    width:100%;

    padding:18px;

    border:none;

    border-radius:50px;

    background:#5baeff;

    color:white;

    cursor:pointer;

    font-size:1rem;

    font-weight:600;

}

/* ===========================================
   MOBILE
=========================================== */

@media(max-width:768px){

    .page{

        padding:20px;

    }

    .card,
    .loadingCard,
    .questionBox,
    .resultCard{

        padding:28px;

        border-radius:24px;

    }

    .card h1{

        font-size:1.8rem;

    }

    #question{

        font-size:1.45rem;

    }

    .option{

        padding:18px;

    }

    .optionLetter{

        width:40px;

        height:40px;

        font-size:.95rem;

    }

    .scoreCircle{

        width:150px;

        height:150px;

        font-size:2.3rem;

    }

}

/* ===========================================
   ANIMATIONS
=========================================== */

@keyframes float{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-120vh);

    }

}
/* ===========================
   FINAL QUIZ FIX
=========================== */

.page{
    display:none !important;
    width:100%;
    min-height:100vh;
    padding:30px;
    justify-content:center;
    align-items:flex-start;
}

.page.active{
    display:flex !important;
}

.quizContainer{
    width:100%;
    max-width:950px;
    margin:20px auto;
}

.questionBox{

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

    backdrop-filter:blur(18px);

    border-radius:30px;

    padding:35px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    display:flex;

    flex-direction:column;

    gap:20px;

    height:auto !important;

    min-height:unset !important;

    max-height:none !important;

    overflow:visible !important;

}

.quizHeader{
    margin-bottom:5px;
}

#question{

    font-size:2rem;

    text-align:center;

    line-height:1.4;

    margin-bottom:15px;

}

#options{

    display:flex;

    flex-direction:column;

    gap:16px;

    width:100%;

}

.option{

    display:flex;

    align-items:center;

    gap:18px;

    width:100%;

    min-height:72px;

    padding:18px 22px;

    background:white;

    border:2px solid #e8f2ff;

    border-radius:18px;

    transition:.25s;

}

.option:hover{

    transform:translateY(-2px);

    border-color:#5baeff;

}

.optionLetter{

    width:44px;

    height:44px;

    border-radius:50%;

    background:#eef7ff;

    color:#5baeff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    flex-shrink:0;

}

.optionText{

    flex:1;

    font-size:1.05rem;

}

body{
    overflow-y:auto !important;
}
/* ===== FIX OVERLAY BUG ===== */

#options{
    position:relative;
    z-index:20;
}

.option{
    position:relative;
    z-index:20;
}

.quizHeader{
    position:relative;
    z-index:1;
}

.questionBox{
    position:relative;
    overflow:visible !important;
}

.background{
    pointer-events:none;
}
/* ===========================
   CONFESSION SCENE
=========================== */

#confession{
    min-height:100vh;

    background:url("assets/desk.jpg") center center no-repeat;
    background-size:cover;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;
}

.desk{

    display:flex;

    flex-direction:column;

    align-items:center;

}



#letterVideo{
    width:min(36vw,600px);

    border-radius:0;

    transform:translateY(45px);

    box-shadow:0 25px 60px rgba(0,0,0,.35);
}

#continueContainer{

    display:none;

    margin-top:25px;

    text-align:center;

}

#continueBtn{

    margin-top:18px;

    padding:14px 30px;

    border:none;

    border-radius:40px;

    background:#efe0c3;

    color:#4c3526;

    cursor:pointer;

    font-size:18px;

    transition:.3s;

}

#continueBtn:hover{

    transform:translateY(-3px);

}



#finalProposal{

    display:none;

}
/* ===========================================
   PROPOSAL PAGE
=========================================== */

#proposalPage{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        135deg,
        #fff6fb,
        #ffeaf3,
        #fff8fb
    );

}

.proposalCard{

    width:min(90vw,700px);

    text-align:center;

    padding:70px;

    border-radius:35px;

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

    backdrop-filter:blur(18px);

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

}

/* ===========================
   TYPOGRAPHY
=========================== */

#introText{

    font-family:'Poppins',sans-serif;

    font-size:34px;

    font-weight:500;

    color:#8b5a72;

    margin-bottom:35px;

}

#proposalQuestion{

    font-family:'Playfair Display',serif;

    font-size:72px;

    line-height:1.15;

    color:#2f2f2f;

    margin-bottom:55px;

}
.buttons{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    width:500px;

    height:180px;

    margin:40px auto 0;

}
#yesBtn,
#noBtn{

    width:180px;

    height:60px;

    border:none;

    border-radius:999px;

    font-family:'Poppins',sans-serif;

    font-size:20px;

    font-weight:600;

    cursor:pointer;

    transition:all .3s ease;

}
#yesBtn{

    background:#ff6b9a;

    color:white;

    box-shadow:0 12px 30px rgba(255,107,154,.35);

}

#yesBtn:hover{

    transform:translateY(-4px) scale(1.04);

    background:#ff4f87;

}
#yesBtn{

    position:absolute;

    left:10px;

    top:10px;

}
#noBtn{

    position:absolute;

    left:230px;

    top:10px;

    width:180px;

    height:60px;

    background:white;

    color:#666;

    border:2px solid #ffd3e2;

}

#noBtn:hover{

    background:#fff5f9;

}
.heart{

    font-size:72px;

    margin-bottom:25px;

    animation:heartbeat 1.4s infinite ease-in-out;

}

@keyframes heartbeat{

    0%{
        transform:scale(1);
    }

    25%{
        transform:scale(1.12);
    }

    50%{
        transform:scale(1);
    }

    75%{
        transform:scale(1.12);
    }

    100%{
        transform:scale(1);
    }

}
/* ===========================================
   ENDING PAGE
=========================================== */

#endingPage{
    position:relative;

    overflow:hidden;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

background:linear-gradient(
    -45deg,
    #fff8fc,
    #ffe7f1,
    #fff3f8,
    #ffe1eb
);

background-size:400% 400%;

animation:romanticGradient 15s ease infinite;

}

.endingCard{

    position: relative;
    z-index: 2;
    width:min(90vw,720px);

    text-align:center;

    padding:80px 60px;

    border-radius:35px;

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

    backdrop-filter:blur(18px);

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

}

.smallText{

    font-family:'Poppins',sans-serif;

    font-size:20px;

    color:#9b7186;

}

.endingTitle{

    font-family:'Playfair Display',serif;

    font-size:54px;

    margin:15px 0 40px;

    color:#2d2d2d;

}

.endingCongrats{

    font-family:'Poppins',sans-serif;

    font-size:24px;

    color:#ff5f95;

    font-weight:600;

    margin-bottom:15px;

}

.endingSubtitle{

    font-family:'Playfair Display',serif;

    font-size:48px;

    line-height:1.2;

    margin-bottom:50px;

    color:#2b2b2b;

}

.endingJoke{

    font-family:'Poppins',sans-serif;

    font-size:22px;

    line-height:1.8;

    color:#555;

}
/* ===========================
   BOKEH LIGHTS
=========================== */

.bokeh{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}
.bokeh span{

    position:absolute;

    border-radius:50%;

    background:rgba(255,182,213,.35);

    filter:blur(10px);

    animation:floatLight 14s linear infinite;

}
.b1{

    width:140px;
    height:140px;

    left:5%;
    bottom:-10%;

}

.b2{

    width:90px;
    height:90px;

    left:25%;
    bottom:-15%;

    animation-delay:2s;

}

.b3{

    width:180px;
    height:180px;

    left:48%;
    bottom:-18%;

    animation-delay:5s;

}

.b4{

    width:110px;
    height:110px;

    left:67%;
    bottom:-8%;

    animation-delay:1s;

}

.b5{

    width:150px;
    height:150px;

    left:82%;
    bottom:-12%;

    animation-delay:4s;

}

.b6{

    width:80px;
    height:80px;

    left:92%;
    bottom:-18%;

    animation-delay:6s;

}
@keyframes floatLight{

    from{

        transform:translateY(0);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    to{

        transform:translateY(-120vh);

        opacity:0;

    }

}
@keyframes romanticGradient{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}
.reveal{

    opacity:0;

}