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

body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden;


background:linear-gradient(
    270deg,
    #ffd6e0,
    #ffe6f0,
    #ffc2d1,
    #ffd6e0
);
background-size:600% 600%;
animation:bgShift 14s ease infinite;


}

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

/* ---------- BACKGROUND LAYERS ---------- */

/* HEART CONTAINER */

.hearts{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:-1;
}

/* EACH HEART */

.hearts span{
    position:absolute;
    bottom:-50px;
    width:22px;
    height:22px;
    background:#ff4d6d;
    transform:rotate(45deg);
    
    animation: floatUp linear infinite;
    animation-duration: calc(120s / var(--i));
    left: calc(100% * var(--i) / 30);
    
    box-shadow:0 0 12px rgba(255,77,109,.6);
}

/* TOP CIRCLES TO FORM HEART */

.hearts span::before,
.hearts span::after{
    content:'';
    position:absolute;
    width:22px;
    height:22px;
    background:#ff4d6d;
    border-radius:50%;
}

.hearts span::before{
    top:-11px;
    left:0;
}

.hearts span::after{
    left:-11px;
    top:0;
}

/* FLOATING ANIMATION */

@keyframes floatUp{
    0%{
        transform:translateY(0) rotate(45deg);
        opacity:1;
    }

    100%{
        transform:translateY(-110vh) rotate(45deg);
        opacity:0;
    }
}


.hearts-layer{
position:absolute;
width:200%;
height:200%;


background-image:
    radial-gradient(circle at 20% 30%, rgba(255,105,135,.35) 6px, transparent 7px),
    radial-gradient(circle at 70% 60%, rgba(255,120,150,.25) 8px, transparent 9px),
    radial-gradient(circle at 40% 80%, rgba(255,80,120,.3) 5px, transparent 6px),
    radial-gradient(circle at 85% 20%, rgba(255,150,170,.28) 7px, transparent 8px);

animation:floatHearts 35s linear infinite;


}

.layer2{
animation-duration:60s;
opacity:.6;
}

@keyframes floatHearts{
from{
transform:translateY(0) translateX(0);
}
to{
transform:translateY(-35%) translateX(-10%);
}
}

/* Glow blobs */

.glow-layer{
position:absolute;
width:200%;
height:200%;


background:
    radial-gradient(circle at 25% 25%, rgba(255,180,200,.35), transparent 40%),
    radial-gradient(circle at 75% 65%, rgba(255,150,180,.25), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(255,200,220,.2), transparent 40%);

filter:blur(40px);

animation:glowMove 18s ease-in-out infinite alternate;


}

@keyframes glowMove{
from{ transform:translate(0,0); }
to{ transform:translate(-10%, -8%); }
}

/* ---------- CARD ---------- */

.card{
position:relative;
z-index:2;


width:390px;
padding:45px;

border-radius:28px;

background:rgba(255,255,255,0.25);
backdrop-filter: blur(18px);

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

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

text-align:center;

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


}

@keyframes cardFloat{
0%{transform:translateY(0);}
50%{transform:translateY(-12px);}
100%{transform:translateY(0);}
}

.hidden{
display:none;
}

/* ---------- INPUT ---------- */

input{
width:100%;
padding:14px;
margin:25px 0;


border-radius:14px;
border:none;
outline:none;

background:rgba(255,255,255,0.7);
font-size:16px;


}

input:focus{
background:white;
box-shadow:0 0 18px rgba(255,105,135,.45);
}

/* ---------- BUTTONS ---------- */

button{
border:none;
padding:14px 26px;
border-radius:16px;


cursor:pointer;
font-size:16px;
font-weight:600;

transition:.25s;


}

.primary-btn{
width:100%;
background:linear-gradient(45deg,#ff4d6d,#ff758f);
color:white;
box-shadow:0 8px 25px rgba(255,77,109,.5);
}

.primary-btn:hover{
transform:translateY(-4px) scale(1.03);
}

.btn-group{
display:flex;
justify-content:center;
gap:16px;
margin-top:25px;
}

.yes{
background:linear-gradient(45deg,#ff4d6d,#ff758f);
color:white;
box-shadow:0 10px 25px rgba(255,77,109,.5);
}

.yes:hover{
transform:translateY(-4px) scale(1.08);
}

.no{
background:white;
}

/* ---------- GIF ---------- */

.success-gif{
width:230px;
border-radius:20px;
margin-bottom:20px;


box-shadow:0 15px 40px rgba(0,0,0,0.2);

animation:popIn .7s ease;


}

@keyframes popIn{
from{
transform:scale(.5);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}
/* Anchor container (keeps it centered & floating) */
.cta-footer{
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}


/* Link Button */
.share-btn{
    display:inline-block;
    padding:16px 30px;
    border-radius:999px;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
    letter-spacing:.3px;
margin-top: 20px;
    color:white;
    background:linear-gradient(135deg,#ff4d6d,#ff758f);

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

    transition:all .28s ease;
}


/* Hover — subtle elevation (NOT childish bounce) */
.share-btn:hover{
    transform:translateY(-4px);
    box-shadow:
        0 18px 40px rgba(255,77,109,.45),
        0 8px 18px rgba(0,0,0,.18);
}


/* Click feedback */
.share-btn:active{
    transform:translateY(-1px);
    box-shadow:
        0 6px 14px rgba(255,77,109,.35);
}


/* Hidden state (important for JS toggle) */
.hidden{
    display:none;
}

.proposal-gif{
    width:160px;
    margin-bottom:20px;
    border-radius:14px;

    /* makes it look less flat */
    box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.proposal-gif{
    width:160px;
    margin-bottom:20px;
    border-radius:14px;
    box-shadow:0 8px 20px rgba(0,0,0,.25);

    animation:popIn .5s ease;
}

@keyframes popIn{
    from{
        transform:scale(.7);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}