:root{
    --bg:#070609;
    --text:#f7f2f6;
    --soft:#c8c1c7;
    --muted:#817a82;
    --pink:#ff6da9;
    --pink-soft:#ffb1cf;
    --purple:#9c88ff;
    --border:rgba(255,255,255,.08);
}

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

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:"Vazirmatn",sans-serif;
    overflow-x:hidden;
}

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

.background{
    position:fixed;
    inset:0;
    z-index:-5;
    overflow:hidden;
    pointer-events:none;
}

.glow{
    position:absolute;
    width:65vw;
    height:65vw;
    max-width:550px;
    max-height:550px;
    border-radius:50%;
    filter:blur(110px);
    opacity:.10;
}

.glow.one{
    background:#ff367e;
    top:-30%;
    right:-25%;
}

.glow.two{
    background:#624bff;
    bottom:-35%;
    left:-30%;
}

.stars{
    position:absolute;
    inset:0;
}

.star{
    position:absolute;
    width:2px;
    height:2px;
    border-radius:50%;
    background:white;
    opacity:.15;
    animation:twinkle var(--speed) ease-in-out infinite;
}

@keyframes twinkle{
    0%,100%{
        opacity:.05;
        transform:scale(.5);
    }

    50%{
        opacity:.8;
        transform:scale(1.4);
    }
}

/* --------------------------------
   COMMON
-------------------------------- */

section{
    min-height:100svh;
    padding:90px 22px;
    display:flex;
    align-items:center;
}

.content{
    width:min(100%,650px);
    margin:auto;
}

.appear{
    opacity:0;
    transform:translateY(35px);
    transition:
        opacity 1.1s ease,
        transform 1.1s cubic-bezier(.16,1,.3,1);
}

.appear.visible{
    opacity:1;
    transform:none;
}

p{
    color:var(--soft);
    font-size:1rem;
    line-height:2.45;
}

.big{
    font-size:clamp(2rem,9vw,3.8rem);
    line-height:1.75;
    font-weight:800;
}

.pink{
    color:var(--pink-soft);
}

.dim{
    color:var(--muted);
}

.divider{
    width:65px;
    height:1px;
    margin:35px 0;
    background:linear-gradient(
        90deg,
        var(--pink),
        transparent
    );
}

/* --------------------------------
   HERO
-------------------------------- */

.hero{
    min-height:100svh;
    text-align:center;
    position:relative;
    justify-content:center;
    overflow:hidden;
}

.hero-inner{
    position:relative;
    z-index:2;
    animation:heroIn 1.5s cubic-bezier(.16,1,.3,1);
}

@keyframes heroIn{
    from{
        opacity:0;
        transform:translateY(45px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.heart{
    width:78px;
    height:78px;
    margin:0 auto 35px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;

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

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

    font-size:30px;

    box-shadow:
        0 0 60px rgba(255,70,150,.12),
        inset 0 0 30px rgba(255,70,150,.04);

    animation:beat 2.4s infinite;
}

@keyframes beat{
    0%,100%{transform:scale(1)}
    8%{transform:scale(1.09)}
    16%{transform:scale(1)}
    24%{transform:scale(1.05)}
}

.hero h1{
    font-size:clamp(2.8rem,14vw,5.5rem);
    line-height:1.3;
    font-weight:900;

    background:linear-gradient(
        120deg,
        #fff,
        #ffb5d2,
        #b9acff
    );

    -webkit-background-clip:text;
    color:transparent;
}

.hero-sub{
    margin:28px auto 0;
    max-width:360px;
    color:#aaa3ab;
    line-height:2.3;
}

.scroll{
    position:absolute;
    bottom:28px;
    left:50%;
    transform:translateX(-50%);
    color:#68636b;
    font-size:.68rem;
    animation:down 2s infinite;
}

@keyframes down{
    50%{
        transform:translate(-50%,9px);
    }
}

/* --------------------------------
   OPENING
-------------------------------- */

.opening{
    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(255,70,150,.06),
            transparent 45%
        );
}

.small-intro{
    color:var(--pink-soft);
    font-size:.85rem;
    margin-bottom:30px;
}

.opening .big{
    font-size:clamp(2.1rem,9vw,3.7rem);
}

/* --------------------------------
   TRUST
-------------------------------- */

.quote{
    margin:45px 0;
    padding:24px 20px;

    border-right:2px solid var(--pink);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.025)
    );

    border-radius:4px;
}

.quote strong{
    font-size:1.12rem;
    line-height:2.1;
}

/* --------------------------------
   PERSONAL
-------------------------------- */

.personal{
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(115,85,255,.07),
            transparent 45%
        );
}

.personal .big{
    margin-bottom:35px;
}

.line-text{
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:25px 0;
    margin:40px 0;
}

/* --------------------------------
   DISTANCE
-------------------------------- */

.distance{
    background:
        radial-gradient(
            circle at center,
            rgba(100,75,255,.09),
            transparent 55%
        );
}

.route{
    margin:60px 0 45px;
}

.route-names{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.person{
    width:58px;
    height:58px;

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

    border-radius:50%;

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

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

    font-size:.75rem;
}

.route-line{
    flex:1;
    height:1px;
    margin:0 15px;

    background:linear-gradient(
        90deg,
        var(--pink),
        var(--purple)
    );

    position:relative;
}

.route-point{
    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 0 18px var(--pink);

    top:50%;
    left:0;

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

    animation:travel 3s linear infinite;
}

@keyframes travel{
    to{
        left:100%;
    }
}

.distance-number{
    text-align:center;
    color:#716b73;
    font-size:.75rem;
}

/* --------------------------------
   FUTURE
-------------------------------- */

.future-box{
    margin-top:45px;

    padding:25px 20px;

    border-radius:25px;

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

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

    box-shadow:
        0 30px 80px rgba(0,0,0,.25);
}

.future-line{
    padding:19px 0;

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

    color:#d7d1d6;

    line-height:2;
}

.future-line:last-child{
    border-bottom:0;
}

/* --------------------------------
   MISTAKE
-------------------------------- */

.mistake{
    background:
        radial-gradient(
            circle at 80% 25%,
            rgba(255,50,90,.07),
            transparent 45%
        );
}

.mistake-title{
    font-size:clamp(2.3rem,10vw,4rem);
    line-height:1.7;
    font-weight:900;
}

.mistake-box{
    margin-top:45px;

    padding:25px 20px;

    border-radius:23px;

    border:1px solid rgba(255,100,140,.13);

    background:rgba(255,50,100,.025);
}

/* --------------------------------
   TIME
-------------------------------- */

.time{
    background:
        radial-gradient(
            circle at 20% 60%,
            rgba(100,70,255,.07),
            transparent 45%
        );
}

/* --------------------------------
   PROMISE
-------------------------------- */

.promise-list{
    margin-top:45px;
}

.promise{
    padding:25px 0;

    border-bottom:1px solid var(--border);
}

.promise strong{
    display:block;
    margin-bottom:8px;
    color:#fff;
}

.promise span{
    color:#aaa4ab;
    line-height:2.1;
    font-size:.9rem;
}

/* --------------------------------
   COD
-------------------------------- */

.cod-box{
    margin-top:45px;

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

    border-radius:25px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.05),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 35px 90px rgba(0,0,0,.35);
}

.cod-header{
    padding:14px 17px;

    display:flex;
    justify-content:space-between;

    color:#68636a;

    font-size:.62rem;

    border-bottom:1px solid var(--border);
}

.cod-body{
    padding:30px 20px;
}

.online{
    display:flex;
    align-items:center;
    gap:8px;

    color:#858087;
    font-size:.68rem;
}

.online-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#62ffab;
    box-shadow:0 0 12px #62ffab;
}

.players{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin:35px 0;
}

.player{
    text-align:center;
}

.avatar{
    width:55px;
    height:55px;

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

    border-radius:50%;

    background:#111016;

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

.player-name{
    margin-top:9px;
    color:#aaa5ab;
    font-size:.7rem;
}

.vs{
    color:var(--pink);
    font-weight:900;
}

.cod-text{
    padding-top:20px;
    border-top:1px solid var(--border);
}

/* --------------------------------
   GIRL
-------------------------------- */

.girl{
    text-align:center;
    justify-content:center;
}

.girl-word{
    font-size:clamp(2.8rem,13vw,5.5rem);
    font-weight:900;

    background:linear-gradient(
        120deg,
        #fff,
        var(--pink-soft),
        #c0b5ff
    );

    -webkit-background-clip:text;
    color:transparent;
}

/* --------------------------------
   FINAL
-------------------------------- */

.final{
    min-height:115svh;
    text-align:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

.final-glow{
    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,60,145,.12),
            transparent 65%
        );

    animation:finalPulse 5s infinite;
}

@keyframes finalPulse{
    50%{
        transform:scale(1.2);
        opacity:.7;
    }
}

.final-content{
    position:relative;
    z-index:2;
}

.final-heart{
    width:90px;
    height:90px;

    margin:0 auto 40px;

    border-radius:50%;

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

    border:1px solid rgba(255,110,175,.22);

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

    font-size:38px;

    box-shadow:
        0 0 80px rgba(255,70,150,.14);

    animation:beat 2.4s infinite;

    cursor:pointer;
}

.final h2{
    font-size:clamp(2.7rem,12vw,5rem);
    margin-bottom:35px;
}

.final p{
    max-width:520px;
    margin:auto;
}

.signature{
    margin-top:50px;
    color:var(--pink-soft);
}

/* FLOAT HEART */

.float-heart{
    position:fixed;
    z-index:100;
    pointer-events:none;

    color:var(--pink);

    animation:float 2.1s ease-out forwards;
}

@keyframes float{
    0%{
        opacity:0;
        transform:translateY(0) scale(.5);
    }

    20%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:
            translate(var(--x),var(--y))
            scale(1.2)
            rotate(25deg);
    }
}

/* --------------------------------
   MOBILE
-------------------------------- */

@media(max-width:480px){

    section{
        padding:85px 20px;
    }

    p{
        font-size:.94rem;
    }

    .hero h1{
        font-size:2.75rem;
    }

    .big{
        font-size:2rem;
    }

    .mistake-title{
        font-size:2.25rem;
    }
}