/* ===========================
   Google Font Reset
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

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

    min-height:100vh;

    overflow:hidden;

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

    background:linear-gradient(-45deg,
    #ffd6e7,
    #ffe8d6,
    #ffc9de,
    #ffd1f5);

    background-size:400% 400%;

    animation:bgMove 12s ease infinite;

    position:relative;

}

/* ===========================
   Animated Background
=========================== */

@keyframes bgMove{

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

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

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

}

/* Floating Emoji Container */

#floating-container{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}

.float-item{

    position:absolute;

    bottom:-50px;

    animation:floatUp linear infinite;

    opacity:.7;

}

@keyframes floatUp{

    from{

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

    }

    to{

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

    }

}

/* ===========================
   Main Container
=========================== */

.container{

    width:100%;

    max-width:420px;

    padding:20px;

    display:flex;

    flex-direction:column;

    align-items:center;

    position:relative;

    z-index:5;

}

.title{

    font-family:"Pacifico",cursive;

    font-size:2.1rem;

    color:white;

    text-align:center;

    text-shadow:
    0 4px 15px rgba(0,0,0,.2);

}

.subtitle{

    margin-top:8px;

    color:white;

    font-size:.95rem;

    text-align:center;

    opacity:.95;

}

/* ===========================
   Love Card
=========================== */

.card{

    width:340px;

    height:500px;

    margin-top:25px;

    perspective:1400px;

    cursor:pointer;

}

.inner{

    width:100%;

    height:100%;

    position:relative;

    transform-style:preserve-3d;

    transition:transform .9s;

}

.card.flipped .inner{

    transform:rotateY(180deg);

}

/* ===========================
   Front & Back
=========================== */

.front,
.back{

    position:absolute;

    width:100%;
    height:100%;

    border-radius:30px;

    padding:24px;

    backface-visibility:hidden;

    overflow:hidden;

}

.front{

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

    backdrop-filter:blur(18px);

    border:2px solid rgba(255,255,255,.35);

    box-shadow:

    0 20px 50px rgba(255,105,180,.25),

    0 0 35px rgba(255,255,255,.35);

}

.back{

    background:
    linear-gradient(135deg,
    #ff5d8f,
    #ff89b0);

    transform:rotateY(180deg);

    color:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}

/* ===========================
   Photo
=========================== */

.photo-wrapper{

    position:relative;

    width:125px;

    height:125px;

    margin:auto;

}

.photo{

    width:120px;

    height:120px;

    border-radius:50%;

    object-fit:cover;

    border:6px solid white;

    display:block;

    margin:auto;

    box-shadow:

    0 0 25px rgba(255,105,180,.7);

    animation:pulse 2.5s infinite;

}

@keyframes pulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.07);

    }

}

/* ===========================
   Sparkles
=========================== */

.sparkle{

    position:absolute;

    font-size:22px;

    animation:sparkle 2s infinite ease-in-out;

}

.s1{

    left:-10px;
    top:5px;

}

.s2{

    right:-5px;
    top:15px;

    animation-delay:.6s;

}

.s3{

    left:45%;
    bottom:-8px;

    animation-delay:1.1s;

}

@keyframes sparkle{

    0%,100%{

        transform:scale(1);

        opacity:1;

    }

    50%{

        transform:scale(1.5);

        opacity:.4;

    }

}

/* ===========================
   Name & Tag
=========================== */

.name{

    margin-top:18px;

    text-align:center;

    font-size:1.8rem;

    color:#ff4d80;

    font-family:"Pacifico",cursive;

}

.tag{

    margin:15px auto;

    width:max-content;

    padding:9px 18px;

    border-radius:40px;

    background:#ff4d80;

    color:white;

    font-size:.85rem;

    box-shadow:

    0 8px 20px rgba(255,77,128,.4);

}

/* ===========================
   Info Box
=========================== */

.info{

    margin-top:18px;

}

.skill{

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

    padding:10px 14px;

    border-radius:18px;

    margin-bottom:10px;

    color:#444;

    font-size:.92rem;

    backdrop-filter:blur(10px);

    transition:.3s;

}

.skill:hover{

    transform:translateX(6px);

    background:white;

}

.skill span{

    font-weight:600;

    color:#ff4d80;

}

/* ===========================
   Footer
=========================== */

.footer{

    margin-top:18px;

    text-align:center;

    color:#ff4d80;

    font-weight:700;

}

/* ===========================
   Back Side Content
=========================== */

.back h1{
    font-family: "Pacifico", cursive;
    font-size: 2rem;
    margin-bottom: 20px;
}

.letter{
    width:100%;
    min-height:150px;

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

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

    border-radius:20px;

    padding:18px;

    backdrop-filter:blur(10px);

    line-height:1.8;

    font-size:1rem;
}

#typewriter{

    white-space:pre-line;

    font-weight:500;

}

/* ===========================
   Love Meter
=========================== */

.love-meter{

    width:100%;

    margin-top:25px;

}

.love-meter h3{

    margin-bottom:12px;

    font-size:1rem;

}

.meter{

    width:100%;

    height:16px;

    border-radius:50px;

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

    overflow:hidden;

}

.meter-fill{

    width:100%;

    height:100%;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #ffec99,
        #ffffff,
        #ffec99
    );

    background-size:300% 100%;

    animation:meterGlow 2s linear infinite;

}

.love-meter span{

    display:block;

    margin-top:8px;

    font-weight:bold;

    font-size:1rem;

}

@keyframes meterGlow{

    from{

        background-position:0%;

    }

    to{

        background-position:300%;

    }

}

/* ===========================
   Hint
=========================== */

.hint{

    margin-top:18px;

    color:white;

    text-align:center;

    font-size:.95rem;

    animation:fadeHint 2s infinite;

}

@keyframes fadeHint{

    0%,100%{

        opacity:1;

    }

    50%{

        opacity:.5;

    }

}

/* ===========================
   Button
=========================== */

button{

    margin-top:22px;

    border:none;

    outline:none;

    cursor:pointer;

    padding:14px 30px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #ff4d80,
        #ff7aa8
    );

    color:white;

    font-size:1rem;

    font-weight:600;

    box-shadow:

    0 12px 25px rgba(255,77,128,.35);

    transition:.3s;

}

button:hover{

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

    box-shadow:

    0 18px 35px rgba(255,77,128,.45);

}

button:active{

    transform:scale(.95);

}

/* ===========================
   Verification Message
=========================== */

#message{

    margin-top:20px;

    min-height:28px;

    color:white;

    text-align:center;

    font-weight:600;

    font-size:1rem;

    text-shadow:0 2px 8px rgba(0,0,0,.2);

}

/* ===========================
   Forever Counter
=========================== */

.counter{

    margin-top:25px;

    text-align:center;

    color:white;

    font-size:.95rem;

}

#timer{

    margin-top:8px;

    font-weight:600;

    color:#fff;

}

/* ===========================
   Floating Hearts
=========================== */

.heart{

    position:fixed;

    pointer-events:none;

    animation:heartRise 4s linear forwards;

    z-index:999;

}

@keyframes heartRise{

    0%{

        transform:
        translateY(0)
        scale(.5);

        opacity:1;

    }

    100%{

        transform:
        translateY(-180px)
        scale(1.6)
        rotate(20deg);

        opacity:0;

    }

}

/* ===========================
   Confetti Hearts
=========================== */

.confetti{

    position:fixed;

    top:-20px;

    animation:fall 4s linear forwards;

    z-index:9999;

    pointer-events:none;

}

@keyframes fall{

    from{

        transform:
        translateY(-20px)
        rotate(0deg);

        opacity:1;

    }

    to{

        transform:
        translateY(120vh)
        rotate(720deg);

        opacity:0;

    }

}

/* ===========================
   Scrollbar
=========================== */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#ff7aa8;

    border-radius:20px;

}

/* ===========================
   Responsive
=========================== */

@media (max-width:420px){

    .container{

        padding:15px;

    }

    .card{

        width:310px;

        height:470px;

    }

    .title{

        font-size:1.8rem;

    }

    .subtitle{

        font-size:.85rem;

    }

    .name{

        font-size:1.5rem;

    }

    .photo{

        width:100px;

        height:100px;

    }

    .photo-wrapper{

        width:105px;

        height:105px;

    }

    .skill{

        font-size:.82rem;

        padding:8px 10px;

    }

    button{

        width:100%;

    }

}

/* ===========================
   Cute Floating Animation
=========================== */

.card{

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

}

@keyframes floatCard{

    0%,100%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

}

/* ===========================
   Glass Shine Animation
=========================== */

.front::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-40%;

    width:60%;

    height:300%;

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

    transform:rotate(25deg);

    animation:shine 6s infinite;

}

@keyframes shine{

    0%{

        left:-60%;

    }

    100%{

        left:140%;

    }

}