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

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

html{
    scroll-behavior:smooth;
}

body{

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

    min-height:100vh;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #ffd6e7 0%,
        #ffeaf4 35%,
        #fff6fb 100%
    );

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

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

#hearts{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}

.floating-hearts{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}

.floating-hearts span{

    position:absolute;

    bottom:-100px;

    font-size:25px;

    animation:floatHeart 12s linear infinite;

    opacity:.8;

}

.floating-hearts span:nth-child(1){

    left:5%;

    animation-duration:8s;

}

.floating-hearts span:nth-child(2){

    left:15%;

    animation-duration:10s;

}

.floating-hearts span:nth-child(3){

    left:28%;

    animation-duration:12s;

}

.floating-hearts span:nth-child(4){

    left:42%;

    animation-duration:9s;

}

.floating-hearts span:nth-child(5){

    left:58%;

    animation-duration:11s;

}

.floating-hearts span:nth-child(6){

    left:68%;

    animation-duration:13s;

}

.floating-hearts span:nth-child(7){

    left:78%;

    animation-duration:9s;

}

.floating-hearts span:nth-child(8){

    left:86%;

    animation-duration:11s;

}

.floating-hearts span:nth-child(9){

    left:93%;

    animation-duration:8s;

}

.floating-hearts span:nth-child(10){

    left:98%;

    animation-duration:10s;

}

@keyframes floatHeart{

    0%{

        transform:translateY(0) rotate(0deg);

        opacity:0;

    }

    10%{

        opacity:1;

    }

    100%{

        transform:translateY(-120vh) rotate(360deg);

        opacity:0;

    }

}

/* ==========================================
   MAIN CONTAINER
========================================== */

.landing-page{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    position:relative;

    z-index:10;

}

.card{

    width:100%;

    max-width:520px;

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

    backdrop-filter:blur(18px);

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

    border-radius:28px;

    padding:40px 35px;

    text-align:center;

    box-shadow:0 25px 60px rgba(255,105,150,.18);

    position:relative;

    overflow:hidden;

}
/* ==========================================
   BADGE
========================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    background:#ff6f9f;

    color:#fff;

    border-radius:999px;

    font-size:15px;

    font-weight:600;

    margin-bottom:25px;

    box-shadow:0 10px 25px rgba(255,111,159,.35);

}

.badge i{

    font-size:16px;

}

/* ==========================================
   TITLES
========================================== */

.sub-title{

    color:#777;

    font-size:20px;

    font-weight:500;

    margin-bottom:8px;

}

.main-title{

    font-size:48px;

    font-weight:800;

    color:#ff4f88;

    line-height:1.15;

    margin-bottom:8px;

}

#friend-name{

    font-size:34px;

    color:#d63384;

    margin-bottom:30px;

    font-weight:700;

}

/* ==========================================
   HERO IMAGE
========================================== */

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:25px;

}

.hero-image img{

    width:260px;

    max-width:100%;

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

    user-select:none;

}

@keyframes floatImage{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}
/* ==========================================
   DESCRIPTION
========================================== */

.description{

    font-size:17px;

    line-height:1.8;

    color:#666;

    margin-bottom:30px;

    padding:0 10px;

}

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

.question{

    font-size:28px;

    color:#ff4f88;

    margin-bottom:35px;

    font-weight:700;

}

/* ==========================================
   BUTTON CONTAINER
========================================== */
.buttons{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    width:100%;

    height:180px;

}


/* ==========================================
   BUTTONS
========================================== */

.buttons button{

    border:none;

    outline:none;

    cursor:pointer;

    padding:16px 38px;

    border-radius:50px;

    font-size:18px;

    font-weight:700;

    transition:.35s;

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

}

.yes-btn{

    background:#ff4f88;

    color:white;

    box-shadow:0 10px 25px rgba(255,79,136,.35);

}

.yes-btn:hover{

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

    background:#ff2f73;

}

.no-btn{

    background:white;

    color:#ff4f88;

    border:2px solid #ff4f88;

    position:relative;

}

.no-btn:hover{

    background:#fff2f6;

}

.buttons button:active{

    transform:scale(.95);

}

/* ==========================================
   BOTTOM NOTE
========================================== */

.bottom-note{

    margin-top:35px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    color:#ff4f88;

    font-weight:600;

    font-size:16px;

}

.bottom-note i{

    animation:pulseHeart 1.5s infinite;

}

@keyframes pulseHeart{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.25);

    }

    100%{

        transform:scale(1);

    }

}

/* ==========================================
   MUSIC BUTTON
========================================== */

.music-btn{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    border:none;

    cursor:pointer;

    background:#ff4f88;

    color:#fff;

    font-size:22px;

    display:flex;

    justify-content:center;

    align-items:center;

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

    transition:.3s;

    z-index:100;

}

.music-btn:hover{

    transform:scale(1.12) rotate(15deg);

}

.music-btn.playing{

    animation:musicPulse 1.5s infinite;

}

@keyframes musicPulse{

    0%{

        box-shadow:0 0 0 0 rgba(255,79,136,.5);

    }

    70%{

        box-shadow:0 0 0 18px rgba(255,79,136,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(255,79,136,0);

    }

}
/* ==========================================
   RESPONSIVE DESIGN
========================================== */

@media (max-width:768px){

    body{

        padding:20px;

    }

    .card{

        padding:30px 22px;

        border-radius:22px;

    }

    .badge{

        font-size:14px;

        padding:8px 18px;

    }

    .sub-title{

        font-size:18px;

    }

    .main-title{

        font-size:36px;

    }

    #friend-name{

        font-size:28px;

    }

    .hero-image img{

        width:210px;

    }

    .description{

        font-size:16px;

        line-height:1.7;

    }

    .question{

        font-size:24px;

    }

    .buttons{

        flex-direction:column;

        gap:18px;

    }

    .buttons button{

        width:220px;

    }

    .music-btn{

        width:55px;

        height:55px;

        right:18px;

        bottom:18px;

        font-size:20px;

    }

}

@media (max-width:480px){

    .main-title{

        font-size:30px;

    }

    #friend-name{

        font-size:24px;

    }

    .hero-image img{

        width:180px;

    }

    .question{

        font-size:20px;

    }

    .description{

        font-size:15px;

    }

    .buttons button{

        width:100%;

        max-width:240px;

        font-size:16px;

        padding:14px 25px;

    }

    .bottom-note{

        font-size:14px;

        flex-wrap:wrap;

    }

}

/* ==========================================
   CARD ENTRY ANIMATION
========================================== */

.card{

    animation:cardFade .8s ease;

}

@keyframes cardFade{

    from{

        opacity:0;

        transform:translateY(40px) scale(.95);

    }

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}