/* ===========================
   GALAXY OF HOPE
=========================== */

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

html,
body{

    width:100%;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;

    font-family:Inter,sans-serif;

    color:white;

}

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

.galaxy{

     width:100%;
    min-height:100vh;
    position:relative;
    overflow:hidden;

    padding-top:110px;
    padding-bottom:120px;

    background:
    radial-gradient(circle at 20% 80%, #25153b 0%, transparent 35%),
    radial-gradient(circle at 80% 20%, #123d5d 0%, transparent 40%),
    radial-gradient(circle at center, #202d58 0%, #080b16 90%);

    animation: galaxyDrift 35s ease-in-out infinite alternate;

}

@keyframes galaxyDrift{

    0%{

        background-position:
            0% 0%,
            100% 0%,
            center;

    }

    100%{

        background-position:
            5% 3%,
            95% 2%,
            center;

    }

}


/* ===========================
   STAR LAYER
=========================== */

#stars{

    position:fixed;

    inset:0;

    overflow:hidden;

}

/* Tiny background stars */

.star{

    position:absolute;

    width:2px;
    height:2px;

    border-radius:50%;

    background:white;

    opacity:.8;

    animation:twinkle 8s infinite ease-in-out;

}

/* Giant glowing stars */
.hope-star{

    position:absolute;

    width:14px;
    height:14px;

    border-radius:50%;

    cursor:pointer;

    transition:
        transform .35s,
        filter .35s;

    animation:
    pulse calc(5s + var(--delay)) ease-in-out infinite;
        

    z-index:10;

    /* NEW */
    --glow:white;

    box-shadow:
        0 0 10px var(--glow),
        0 0 20px var(--glow),
        0 0 45px var(--glow);

}

/* 🌱 Hopeful */

.hopeful{

    background:#84ffb7;

    --glow:#84ffb7;

}



/* 🌙 Healing */

.healing{

    background:#9edcff;

    --glow:#9edcff;

}

/* ☀️ Grateful */

.grateful{

    background:#ffe48d;

    --glow:#ffe48d;

}

/* ✨ Dreaming */

.dreaming{

    background:#d2adff;

    --glow:#d2adff;

}

/* ❤️ Loved */

.loved{

    background:#ff9fc4;

    --glow:#ff9fc4;

}

/* 😔 Tired */

.tired{

    background:#f2f2f2;

    --glow:#ffffff;

}
@keyframes hope-heroPulse{

    0%,100%{

        transform:scale(1);

        opacity:.9;

    }

    50%{

        transform:scale(1.25);

        opacity:1;

    }

}

@keyframes twinkle{

    0%,100%{

        opacity:.2;
        transform:scale(.8);

    }

    50%{

        opacity:1;
        transform:scale(1.8);

    }

}

/* ===========================
   HEADER
=========================== */

.hope-hero{

position:absolute;

top:150px;

left:50%;

transform:translateX(-50%);

text-align:center;

z-index:100;

width:min(900px,90%);

}

.hope-hero h1{

    font-size:64px;

    font-family:Georgia,serif;

}

.hope-hero p{

    margin-top:18px;

    color:#d4ddff;

    font-size:22px;

}

.hope-hero a{

    display:inline-block;

    margin-top:35px;

    color:#ffd56a;

    text-decoration:none;

    font-size:22px;

}

.hope-hero a:hover{

    color:white;

}

.hope-hero-line{

    margin-top:22px;

    font-size:24px;

    color:#edf3ff;

    font-weight:500;

}

.hope-hero-sub{

    margin-top:10px;

    font-size:18px;

    color:rgba(255,255,255,.65);

    font-style:italic;

}

/* ===========================
   HOPE STARS
=========================== */

@keyframes pulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.8);

    }

}

.hope-star:hover{

    transform:scale(1.8);

    filter:brightness(1.3);

}

/* ===========================
   LETTER OVERLAY
=========================== */

#letterOverlay{

    position:fixed;

    inset:0;

    display:flex;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.5s;

    justify-content:center;

    align-items:center;

    background:rgba(4,7,18,.82);

    backdrop-filter:blur(8px);

    z-index:999;

}

#letterOverlay.show{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

/* ===========================
   LETTER PAPER
=========================== */

.letter-paper{

    width:700px;

    max-width:92%;

    max-height:82vh;

    overflow-y:auto;

    padding:60px;

    border-radius:28px;

    position:relative;

    background:
        linear-gradient(
            rgba(255,255,255,.35),
            rgba(255,255,255,.15)
        ),
        #FFF9EE;

    color:#2f2f2f;

    box-shadow:
        0 40px 100px rgba(0,0,0,.45);

    transform:
        translateY(40px)
        scale(.85)
        rotate(-2deg);

    opacity:0;

    transition:
        transform .6s cubic-bezier(.2,.8,.2,1),
        opacity .6s ease;

        position:relative;

        overflow:hidden;
}

.letter-paper::before{

    content:"";

    position:absolute;

    inset:-150px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.25),
            transparent 70%
        );

    z-index:-1;

}

#letterOverlay.show .letter-paper{

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

    opacity:1;

}

#closeLetter{

    position:absolute;

    top:22px;

    right:22px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#555;

    font-size:18px;

    cursor:pointer;

    transition:.3s;

    box-shadow:
        0 10px 25px rgba(0,0,0,.15);

}

#closeLetter:hover{

    transform:rotate(90deg) scale(1.08);

    background:#f3efe8;

}

/* ===========================
   GALAXY FOCUS MODE
=========================== */

.galaxy.focus{

    transform:scale(1.08);

    filter:blur(3px) brightness(.55);

    transition:
        transform .9s ease,
        filter .9s ease;

}

/* ===========================
   FLOATING GALAXY
=========================== */

#stars{

    animation:
        galaxyFloat 80s linear infinite;

}

@keyframes galaxyFloat{

    0%{

        transform:
            translate(0px,0px);

    }

    25%{

        transform:
            translate(-20px,-10px);

    }

    50%{

        transform:
            translate(15px,-20px);

    }

    75%{

        transform:
            translate(10px,15px);

    }

    100%{

        transform:
            translate(0px,0px);

    }

}

#constellation{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:2;

    pointer-events:none;

}

/* ===========================
   MOUSE GLOW
=========================== */

#mouseGlow{

    position:absolute;

    width:280px;
    height:280px;

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.12) 0%,
        rgba(173,216,255,.08) 35%,
        transparent 75%);

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

    z-index:3;

    transition:
        left .08s linear,
        top .08s linear;

}

/* ===========================
   RANDOM HOPE BUTTON
=========================== */

#randomHopeBtn{

    margin-top:24px;

    padding:14px 26px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    color:white;

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

    backdrop-filter:blur(10px);

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

    transition:.3s;

}

#randomHopeBtn:hover{

    transform:translateY(-2px);

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

    box-shadow:0 0 25px rgba(255,255,255,.2);

}

/* ===========================
   LETTER CONTENT
=========================== */

#overlayEmotion{

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

    background:#edf5ec;

    color:#49754c;

    font-size:15px;

    font-weight:600;

    margin-bottom:20px;

}

#overlayTitle{

    font-family:Georgia, serif;

    font-size:46px;

    color:#2f2f2f;

    margin-bottom:20px;

}

#overlayText{

    font-size:20px;

    line-height:1.9;

    color:#444;

    white-space:pre-wrap;

}

.letter-divider{

    text-align:center;

    font-size:28px;

    color:#D4AF37;

    margin:24px 0;

}

.letter-ending{

    margin-top:40px;

    text-align:center;

    color:#8d8d8d;

    font-style:italic;

    font-size:16px;

}

.letter-greeting{

    font-family: Georgia, serif;

    font-size:22px;

    color:#444;

    margin-bottom:25px;

    font-style:italic;

}

/* ===========================
   SHOOTING STARS
=========================== */

#shootingStars{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:5;

}

.shooting-star{

    position:absolute;

    width:180px;

    height:2px;

    background:
        linear-gradient(
            90deg,
            white,
            rgba(255,255,255,0)
        );

    border-radius:999px;

    transform:rotate(var(--angle));

    opacity:0;

    animation:shoot 1.4s linear forwards;

}

@keyframes shoot{

    0%{

        opacity:0;

        transform:
            translate(0,0)
            rotate(var(--angle))

    }

    10%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:
            translate(-700px,700px)
            rotate(var(--angle))

    }

}

/* ==========================
NAVBAR
========================== */

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    background:rgba(7,22,16,.88);

    backdrop-filter:blur(18px);

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

}