/*==================================================
                    GOOGLE FONT
==================================================*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap');

/*==================================================
                    ROOT — MINIMALIST ELEGANT
==================================================*/
:root{

    /* accent: dusty rose, elegant not neon */
    --pink:#b5495b;
    --pink-light:#d98a97;
    --purple:#8b5cf6;
    --blue:#5c8dff;

    --primary:#b5495b;
    --secondary:#d98a97;

    --bg:#faf7f5;
    --surface:#ffffff;

    --ink:#2c2420;
    --ink-soft:#5c5049;
    --muted:#8a7f78;

    --white:#ffffff;
    --text:#2c2420;

    --border:#ece3df;

    --glass:rgba(255,255,255,.7);
    --glass-border:rgba(44,36,32,.08);

    --shadow:0 20px 45px rgba(44,24,20,.06);
    --shadow-sm:0 8px 20px rgba(44,24,20,.05);

    --font-display:'Playfair Display', serif;
    --font-body:'Poppins', sans-serif;

}

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

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font-body);

    color:var(--text);

    overflow-x:hidden;

    min-height:100vh;

    background:var(--bg);

    position:relative;

}

/*==================================================
                BACKGROUND GLOW (very soft, minimal)
==================================================*/

body::before{

    content:"";

    position:fixed;

    width:600px;
    height:600px;

    background:var(--pink-light);

    border-radius:50%;

    filter:blur(200px);

    opacity:.14;

    top:-220px;
    left:-220px;

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    width:600px;
    height:600px;

    background:var(--purple);

    border-radius:50%;

    filter:blur(200px);

    opacity:.08;

    bottom:-220px;
    right:-220px;

    z-index:-2;

}

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

.container{

    width:88%;
    max-width:1180px;

    margin:auto;

}

/*==================================================
                    LINKS
==================================================*/

a{

    text-decoration:none;

    color:inherit;

}

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

img{

    max-width:100%;

    display:block;

}

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

button{

    border:none;

    outline:none;

    font-family:inherit;

}

/*==================================================
                CARD / SURFACE (replaces "glass")
==================================================*/

.glass{

    background:var(--surface);

    border:1px solid var(--glass-border);

    border-radius:20px;

    box-shadow:var(--shadow-sm);

}

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

.heart{

    position:fixed;

    bottom:-120px;

    font-size:22px;

    opacity:.22;

    pointer-events:none;

    z-index:-1;

    animation:floatHeart linear infinite;

}

.heart1{

    left:8%;

    animation-duration:14s;

}

.heart2{

    left:25%;

    animation-duration:17s;

}

.heart3{

    left:50%;

    animation-duration:15s;

}

.heart4{

    left:72%;

    animation-duration:18s;

}

.heart5{

    left:90%;

    animation-duration:16s;

}

/*==================================================
                SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:var(--pink-light);

    border-radius:30px;

}

::-webkit-scrollbar-track{

    background:var(--bg);

}

/*==================================================
                SELECTION
==================================================*/

/*==================================================
                READ PROGRESS BAR
==================================================*/

#readProgress{

    position:fixed;

    top:0;

    left:0;

    height:4px;

    width:0%;

    background:var(--primary);

    z-index:1200;

    transition:width .1s linear;

}

/*==================================================
                CONFETTI HEART (burst)
==================================================*/

.confetti-heart{

    position:fixed;

    font-size:22px;

    pointer-events:none;

    z-index:1100;

    animation:confettiPop 1.1s ease-out forwards;

}

@keyframes confettiPop{

    0%{

        transform:translate(0,0) scale(.6) rotate(0deg);

        opacity:1;

    }

    100%{

        transform:
        translate(var(--dx),var(--dy))
        scale(1.1)
        rotate(var(--rot));

        opacity:0;

    }

}