/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

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

/* Body */
body{

    margin:0;

    overflow:hidden;

    background:#1a0612;

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

}

/* Loading Screen */

#loadingScreen{
    position:fixed;
    inset:0;
    background:#ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.loadingBox{
    width:320px;
    text-align:center;
}

.loadingBox h2{
    color:#5b4dff;
    margin-bottom:25px;
    font-size:24px;
    font-weight:600;
}

.loadingBar{
    width:100%;
    height:8px;
    border-radius:20px;
    overflow:hidden;
    background:#e5e8ff;
}

.loadingProgress{
    width:0%;
    height:100%;
    border-radius:20px;
    background:linear-gradient(90deg,#7b68ff,#52b7ff);
}

/* Background */

.background{
    position:fixed;
    inset:0;
    overflow:hidden;
}

.gradient{

    position:absolute;

    inset:0;

    background:linear-gradient(
        135deg,
        #2b071e,
        #571132,
        #8f2454,
        #d84d8a
    );

    background-size:400% 400%;

    animation:gradientMove 12s ease infinite;

}

/* Main */

.container{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

/* Letter */

.letter{

    font-size:70px;

    margin-bottom:20px;

}

/* Heading */

h1{

    font-family:'Great Vibes', cursive;

    font-size:58px;

    font-weight:400;

    color:#fff7fb;

    letter-spacing:1px;

    margin-top:18px;

    margin-bottom:18px;

    line-height:1.2;

    text-shadow:
        0 0 12px rgba(255,170,210,.55),
        0 0 28px rgba(255,105,180,.25);

h1{

    font-family:'Great Vibes', cursive;

    font-size:58px;

    font-weight:400;

    color:#fff7fb;

    letter-spacing:1px;

    margin-top:18px;

    margin-bottom:18px;

    line-height:1.2;

    text-shadow:
        0 0 12px rgba(255,170,210,.55),
        0 0 28px rgba(255,105,180,.25);

}

}

/* Paragraph */

.line{

    color:#ffe6f0;

    font-size:18px;

    line-height:2;

    margin-bottom:18px;

    letter-spacing:.4px;

    font-weight:400;

    text-shadow:
        0 0 8px rgba(255,200,220,.25);

    animation:textAppear 2s ease forwards;

}

/* Buttons */

.buttons{

    margin-top:35px;

    display:flex;

    flex-direction:column;

    gap:16px;

    opacity:0;

    transform:translateY(30px);

    animation:showButtons 1s ease forwards;  

    animation-delay:3.5s;

}

button{

    border:none;

    padding:17px;

    border-radius:18px;

    cursor:pointer;

    font-size:17px;

    font-weight:600;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

/* YES BUTTON */

#yesBtn{

    background:linear-gradient(
        135deg,
        #ff3f87,
        #ff5fa2,
        #ff86bf
    );

    background-size:300% 300%;

    color:#ffffff;

    border:none;

    font-size:17px;

    font-weight:700;

    letter-spacing:.5px;

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

    animation:gradientMove 5s ease infinite;

    transition:all .35s ease;

}

#yesBtn:hover{

    transform:translateY(-5px) scale(1.05);

    box-shadow:
        0 18px 40px rgba(255,63,135,.55),
        0 0 25px rgba(255,170,210,.45);

}



#noBtn{

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

    color:#fff;

    border:1px solid rgba(255,255,255,.28);

    backdrop-filter:blur(10px);

    transition:all .35s ease;

}

#noBtn:hover{

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

    transform:translateY(-3px);

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

}

/* Card Animation */

.card{
    
    width:480px;
    padding:55px 40px;
    max-width:95%;

    background:
    linear-gradient(
        135deg,
        #3a071f,
        #7b1745,
        #c43b7a
    );

position:relative;
overflow:visible;

    backdrop-filter:blur(20px);

    border-radius:30px;

    padding:55px 40px;

    text-align:center;

    border:1px solid rgba(255,255,255,0.25);

    box-shadow:
    0 18px 45px rgba(196,59,122,.35),
    0 8px 20px rgba(0,0,0,.12);

    animation:cardFloat 4s ease-in-out infinite;

    animation:cardFloat 4s ease-in-out infinite;

}


@keyframes cardFloat{

    0%{
        transform:translateY(0);
    }

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

    100%{
        transform:translateY(0);
    }


    
}

.card::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:radial-gradient(
        circle,
        rgba(255,90,160,.45),
        transparent 70%
    );

    top:50%;

    left:50%;

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

    z-index:-1;

    filter:blur(40px);

    animation:glowRotate 8s linear infinite;

}


.card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-40%;

    width:60%;

    height:300%;

    background:linear-gradient(
        rgba(255,255,255,0),
        rgba(255,255,255,.18),
        rgba(255,255,255,0)
    );

    transform:rotate(25deg);

    transition:1s;

    pointer-events:none;

}

.card:hover::after{

    left:130%;

}

.mail.open .letter{
    top:15%;
}

/* Floating Letter */

.letter{

    animation:floatLetter 3s ease-in-out infinite;

    transition: top .7s ease;

}

@keyframes floatLetter{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}

/* Gradient Animation */

.gradient{

    animation:bgMove 12s ease infinite;

}

@keyframes bgMove{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

/* ========================= */
/* Floating Particles */
/* ========================= */

.particles{

position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

}

.particles span{

    position:absolute;

    display:flex;

    align-items:center;

    justify-content:center;

    width:20px;

    height:20px;

    animation:floatHeart 12s linear infinite;

    opacity:.8;

}

.particles span::before{

    content:"❤";

    font-size:18px;

    color:#ff6aa9;

    text-shadow:
        0 0 10px rgba(255,80,150,.8),
        0 0 25px rgba(255,80,150,.5);

}

.particles span:nth-child(1){left:5%;animation-delay:0s;}
.particles span:nth-child(2){left:12%;animation-delay:2s;}
.particles span:nth-child(3){left:20%;animation-delay:4s;}
.particles span:nth-child(4){left:30%;animation-delay:6s;}
.particles span:nth-child(5){left:40%;animation-delay:8s;}
.particles span:nth-child(6){left:50%;animation-delay:1s;}
.particles span:nth-child(7){left:60%;animation-delay:3s;}
.particles span:nth-child(8){left:70%;animation-delay:5s;}
.particles span:nth-child(9){left:80%;animation-delay:7s;}
.particles span:nth-child(10){left:90%;animation-delay:9s;}
.particles span:nth-child(11){left:15%;animation-delay:10s;}
.particles span:nth-child(12){left:25%;animation-delay:11s;}
.particles span:nth-child(13){left:35%;animation-delay:12s;}
.particles span:nth-child(14){left:45%;animation-delay:13s;}
.particles span:nth-child(15){left:55%;animation-delay:14s;}
.particles span:nth-child(16){left:65%;animation-delay:15s;}
.particles span:nth-child(17){left:75%;animation-delay:16s;}
.particles span:nth-child(18){left:85%;animation-delay:17s;}
.particles span:nth-child(19){left:95%;animation-delay:18s;}
.particles span:nth-child(20){left:50%;animation-delay:19s;}

@keyframes floatHeart{

    0%{

        transform:
        translateY(100vh)
        scale(.3)
        rotate(0deg);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    50%{

        transform:
        translateY(50vh)
        translateX(20px)
        scale(.8)
        rotate(180deg);

    }

    100%{

        transform:
        translateY(-120px)
        translateX(-20px)
        scale(1.2)
        rotate(360deg);

        opacity:0;

    }

}


@keyframes envelopeFloat{

    0%{
        transform:translateY(0) rotate(0deg);
    }

    50%{
        transform:translateY(-15px) rotate(5deg);
    }

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

}

/* Romantic Text Animation */


@keyframes textAppear{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes glowPulse{

    0%,100%{

        box-shadow:
            0 0 20px rgba(255,77,141,.6),
            0 0 40px rgba(255,77,141,.35);

    }

    50%{

        box-shadow:
            0 0 35px rgba(255,77,141,.95),
            0 0 80px rgba(255,77,141,.75);

    }

}

@keyframes gradientMove{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

@keyframes glowRotate{

    0%{

        transform:
        translate(-50%,-50%)
        rotate(0deg)
        scale(1);

    }

    50%{

        transform:
        translate(-50%,-50%)
        rotate(180deg)
        scale(1.15);

    }

    100%{

        transform:
        translate(-50%,-50%)
        rotate(360deg)
        scale(1);

    }

}

@keyframes showButtons{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ========================= */
/* Envelope Screen */
/* ========================= */

#envelopeScreen{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:20;

    opacity:1;

    visibility:visible;

    transition:opacity .8s ease,
               visibility .8s ease;

}

#envelopeScreen.hide{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}


/* ========================= */
/* Proposal Screen */
/* ========================= */

#proposalScreen{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:15;

    opacity:0;

    visibility:hidden;

    transform:scale(.95);

    transition:
        opacity .8s ease,
        transform .8s ease,
        visibility .8s ease;

}

#proposalScreen.show{

    opacity:1;

    visibility:visible;

    transform:scale(1);

}

/* Success Screen */

.successScreen{

overflow:hidden;

    position:fixed;

    inset:0;

    background:linear-gradient(
        135deg,
        #3a071f,
        #7b1745,
        #d14d8b
    );

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:white;

    opacity:0;

    visibility:hidden;

    transition:0.8s ease;

    z-index:9999;

}

.successScreen.show{

    opacity:1;

    visibility:visible;

}

.successScreen h1{

    font-size:55px;

    margin-bottom:20px;

}

.successScreen p{

    font-size:22px;

    margin:10px 0;

    color:#ffe8f2;

}

.successScreen::before,
.successScreen::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    filter:blur(80px);

    z-index:-1;

}

.successScreen::before{

    background:#ff4d8d;

    top:-120px;

    left:-120px;

    animation:lightMove1 10s ease-in-out infinite;

}

.successScreen::after{

    background:#ff9ac6;

    bottom:-120px;

    right:-120px;

    animation:lightMove2 12s ease-in-out infinite;

}

@keyframes lightMove1{

    0%,100%{

        transform:translate(0,0) scale(1);

    }

    50%{

        transform:translate(120px,80px) scale(1.3);

    }

}

@keyframes lightMove2{

    0%,100%{

        transform:translate(0,0) scale(1);

    }

    50%{

        transform:translate(-120px,-80px) scale(1.2);

    }

}

/* Success Hearts */

.successHearts{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.successHearts span{

    position:absolute;

    font-size:28px;

    opacity:.8;

    animation:heartFloat 10s linear infinite;

}

/* Hearts Position */

.successHearts span:nth-child(1){left:8%; animation-delay:0s;}
.successHearts span:nth-child(2){left:20%; animation-delay:1.5s;}
.successHearts span:nth-child(3){left:35%; animation-delay:3s;}
.successHearts span:nth-child(4){left:50%; animation-delay:4.5s;}
.successHearts span:nth-child(5){left:65%; animation-delay:6s;}
.successHearts span:nth-child(6){left:78%; animation-delay:7.5s;}
.successHearts span:nth-child(7){left:90%; animation-delay:9s;}
.successHearts span:nth-child(8){left:45%; animation-delay:2s;}

@keyframes heartFloat{

    0%{

        transform:translateY(100vh) scale(.5);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    100%{

        transform:translateY(-120px) scale(1.3) rotate(360deg);

        opacity:0;

    }

}

/* Success Glass Card */

.successCard{

    width:500px;
    max-width:90%;

    padding:45px 35px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,0.25);

    border-radius:30px;

    box-shadow:
        0 15px 50px rgba(0,0,0,0.25),
        0 0 40px rgba(255,105,180,0.25);

    animation:successFloat 4s ease-in-out infinite;

}

.successCard h1{

    font-size:48px;

    color:white;

    margin-bottom:20px;

}

.successCard p{

    font-size:20px;

    color:#ffe6f0;

    line-height:1.8;

}

@keyframes successFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

#confetti{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:99999;

}

/* ========================= */
/* Envelope */
/* ========================= */

.mail{

    width:210px;

    max-width:90vw;

    margin:auto;

    cursor:pointer;

    transition:.35s;

}

.mail:hover{

    transform:scale(1.05);

}

.mail svg{

    display:block;

    width:100%;

    height:auto;

}

.envelopeBox{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:25px;

}

.envelopeTitle{

    color:#ffffff;

    font-size:28px;

    text-align:center;

}

.envelopeText{

    color:#ffe6f0;

    font-size:16px;

    text-align:center;

}

#letter{

    transition:transform .8s ease;

    transform-origin:center;

}

#flap{

    transform-box:fill-box;

    transform-origin:center top;

    transition:transform .8s ease;

}

.mail.open #flap{
    transform:rotate(-180deg);
}

.mail.open #letter{
    transform:translateY(-60px);
}

/* ========================= */
/* ENVELOPE */
/* ========================= */

.mail{
    width:160px;
    height:110px;
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
    cursor:pointer;
}


.envelope{
    position:relative;
    width:160px;
    height:110px;
    overflow:visible;
}

.envelope-back{
    position:absolute;
    inset:0;
    background:#ff7aa8;
    border-radius:12px;
}

.envelope-letter{

    position:absolute;

    top:45%;
    left:50%;

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

    width:160px;
    height:100px;

    background:#fff;

    border-radius:8px;

    display:flex;

    justify-content:center;

    align-items:top;

    font-size:34px;

    z-index:2;

    transition: transform .7s ease, top .7s ease;

}

.envelope-left{
    position:absolute;
    left:0;
    bottom:0;
    width:50%;
    height:100%;
    background:#ff98bf;
    clip-path:polygon(0 0,100% 50%,0 100%);
    z-index:6;
}

.envelope-right{
    position:absolute;
    right:0;
    bottom:0;
    width:50%;
    height:100%;
    background:#ff98bf;
    clip-path:polygon(100% 0,0 50%,100% 100%);
    z-index:6;
}

.envelope-bottom{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:75px;
    background:#ff5c96;
    clip-path:polygon(0 100%,50% 0,100% 100%);
    z-index:6;
}

.envelope-flap{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:75px;
    background:#ffc1d9;
    clip-path:polygon(0 0,100% 0,50% 100%);
    transform-origin:top;
    transition:.8s;
    z-index:7;


    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.mail.open .envelope-flap{
    transform:rotate(-180deg);
}

.mail.open.envelope-letter{
    bottom:55px;
}

.mail.open{
    transform:scale(1.05);
}

.mail.open .envelope-flap{
    transform:rotateX(180deg);
    transition:transform .7s ease;
}

.envelope-letter.show{
    top:-15px;
}

.show-heading{
    opacity:1;
    transform:translateY(0);
    transition:.8s ease;
}

.card.show{

    opacity:1;

    transform:scale(1);

    transition:
        transform .7s ease,
        opacity .7s ease;

}

.heartPattern{

    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
    overflow:hidden;

}

.heartPattern span{

    position:absolute;
    width:90px;
    height:90px;
    opacity:.35;

}

.heartPattern span::before{

    content:"♡";
    font-size:90px;
    color:rgba(255,255,255,.35);

}

.heartPattern span:nth-child(1){top:4%;left:6%;transform:rotate(-18deg) scale(.8);}
.heartPattern span:nth-child(2){top:12%;left:31%;transform:rotate(15deg) scale(1.2);}
.heartPattern span:nth-child(3){top:8%;right:14%;transform:rotate(-8deg) scale(.9);}
.heartPattern span:nth-child(4){top:34%;left:11%;transform:rotate(22deg) scale(1.4);}
.heartPattern span:nth-child(5){top:28%;right:8%;transform:rotate(-25deg) scale(1);}
.heartPattern span:nth-child(6){top:55%;left:38%;transform:rotate(12deg) scale(1.5);}
.heartPattern span:nth-child(7){bottom:22%;left:7%;transform:rotate(-14deg) scale(1.2);}
.heartPattern span:nth-child(8){bottom:12%;left:30%;transform:rotate(20deg) scale(.9);}
.heartPattern span:nth-child(9){bottom:6%;right:11%;transform:rotate(-10deg) scale(1.3);}
.heartPattern span:nth-child(10){top:60%;right:30%;transform:rotate(18deg) scale(.8);}
.heartPattern span:nth-child(11){top:44%;left:62%;transform:rotate(-30deg) scale(1.1);}
.heartPattern span:nth-child(12){bottom:35%;right:42%;transform:rotate(8deg) scale(1.4);}

.lastChanceScreen{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(12px);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.6s;

    z-index:99999;

}

.lastChanceScreen.show{

    opacity:1;

    visibility:visible;

}

.lastChanceCard{

    width:500px;

    max-width:90%;

    padding:45px 35px;

    border-radius:30px;

    text-align:center;

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

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.25);

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

    animation:cardFloat 4s ease-in-out infinite;

}

.lastChanceCard h2{

    color:#fff;

    margin:20px 0;

    font-size:28px;

}

.lastChanceCard p{

    color:#ffe6f0;

    line-height:1.8;

    margin:12px 0;

}

.highlight{

    color:#fff;

    font-weight:700;

    margin-top:25px;

}

#goBackBtn{

    margin-top:30px;

    width:100%;

}

.patternIcons{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.patternIcons span{
    position:absolute;
    user-select:none;
    pointer-events:none;
    transition:.5s;
    line-height:1;
}

.patternIcons .heart{
    color:rgba(255,120,175,.72);

    text-shadow:
        0 0 5px rgba(255,80,150,.65),
        0 0 12px rgba(255,80,150,.38);
}

.patternIcons .sparkle{
    color:rgba(255,190,225,.58);

    text-shadow:
        0 0 5px rgba(255,130,195,.55),
        0 0 10px rgba(255,100,180,.25);
}



.patternIcons .bow {
    font-size: 30px;
}

/* Story Screen */

.storyScreen{
    position:fixed;
    inset:0;

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

    padding:20px;

    opacity:0;
    visibility:hidden;
    transform:scale(.96);

    transition:
        opacity .7s ease,
        transform .7s ease,
        visibility .7s ease;

    z-index:25;
}

.storyScreen.show{
    opacity:1;
    visibility:visible;
    transform:scale(1);
}

.storyCard{
    width:620px;
    max-width:92%;
    max-height:82vh;

    overflow-y:auto;

    padding:42px 38px;

    text-align:center;

    background:linear-gradient(
        135deg,
        rgba(58,7,31,.94),
        rgba(170,42,105,.92)
    );

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.25);
    border-radius:30px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.28),
        0 0 35px rgba(255,105,180,.22);
}

.storyCard h1{
    margin:0 0 20px;

    font-family:'Great Vibes', cursive;
    font-size:48px;
    font-weight:400;

    color:#fff7fb;
}

.storyCard p{
    margin:0 0 15px;

    color:#ffe6f0;
    font-size:16px;
    line-height:1.75;
}

.storyCard .storyClosing{
    margin-top:22px;

    color:#ffffff;
    font-weight:600;
}

#storyContinueBtn{
    width:100%;
    margin-top:12px;

    background:linear-gradient(
        135deg,
        #ff3f87,
        #ff75af
    );

    color:#fff;

    box-shadow:0 12px 28px rgba(255,63,135,.32);
}

.decisionNote{
    margin:14px 0 0;

    color:#ffd3e5;
    font-size:14px;
    font-weight:400;
    line-height:1.5;

    opacity:.88;
}