/* =========================================
   National Girlfriend Day
   Style.css
   Part 1
========================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#050816;
    color:white;
    overflow:hidden;
    width:100%;
    height:100vh;
}

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

#background{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-10;

    background:
    radial-gradient(circle at top,#27346d 0%,#11182f 35%,#050816 100%);
}

/* Overlay */

.overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
    to bottom,
    rgba(255,255,255,.02),
    rgba(0,0,0,.18));

}

/* =========================
   Moon
========================= */

.moon{

    position:absolute;

    top:60px;
    right:90px;

    width:170px;
    height:170px;

    border-radius:50%;

    background:

    radial-gradient(circle at 30% 30%,
    #ffffff,
    #ececec 60%,
    #bdbdbd);

    box-shadow:

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

    0 0 70px rgba(255,255,255,.25),

    0 0 130px rgba(173,216,230,.18);

}

/* =========================
   Stars
========================= */

#stars{

    position:absolute;

    inset:0;

    overflow:hidden;

}

/* =========================
   Scene
========================= */

.scene{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    pointer-events:none;

    transition:.8s;

}

.scene.active{

    opacity:1;

    pointer-events:auto;

}

/* =========================
   Glass Card
========================= */

.glass-card{

    width:min(92%,520px);

    padding:45px;

    text-align:center;

    border-radius:28px;

    background:

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

    backdrop-filter:blur(18px);

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

    box-shadow:

    0 15px 45px rgba(0,0,0,.35);

}

/* Heading */

.glass-card h1{

    font-size:2.5rem;

    line-height:1.2;

    margin:15px 0;

}

.glass-card p{

    color:#d7d7d7;

    line-height:1.7;

    margin-bottom:35px;

}

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

button{

    border:none;

    cursor:pointer;

    padding:

    14px 38px;

    border-radius:999px;

    font-size:1rem;

    font-weight:600;

    transition:.3s;

    color:white;

    background:

    linear-gradient(
    135deg,
    #6b8cff,
    #4d5cff);

}

button:hover{

    transform:

    translateY(-3px);

    box-shadow:

    0 8px 25px

    rgba(100,130,255,.45);

}

button:active{

    transform:scale(.97);

}

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

@media(max-width:768px){

    .moon{

        width:120px;
        height:120px;

        right:30px;
        top:30px;

    }

    .glass-card{

        padding:35px 25px;

    }

    .glass-card h1{

        font-size:2rem;

    }

}

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

@keyframes floating {

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

.glass-card{

    animation:floating 6s ease-in-out infinite;

}

/* =========================================
   Glass Reflection
========================================= */

.glass-card{

    position:relative;

    overflow:hidden;

}

.glass-card::before{

    content:"";

    position:absolute;

    top:-60%;

    left:-40%;

    width:220px;

    height:400px;

    background:

    linear-gradient(

    rgba(255,255,255,0),

    rgba(255,255,255,.10),

    rgba(255,255,255,0)

    );

    transform:rotate(25deg);

    pointer-events:none;

    animation:shine 9s linear infinite;

}

@keyframes shine{

    from{

        transform:

        translateX(-250px)

        rotate(25deg);

    }

    to{

        transform:

        translateX(700px)

        rotate(25deg);

    }

}

/* =========================================
   Card Border Glow
========================================= */

.glass-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    padding:1px;

    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.22),

    rgba(255,255,255,.02)

    );

    mask:

    linear-gradient(#fff 0 0)

    content-box,

    linear-gradient(#fff 0 0);

    -webkit-mask:

    linear-gradient(#fff 0 0)

    content-box,

    linear-gradient(#fff 0 0);

    mask-composite:exclude;

    -webkit-mask-composite:xor;

    pointer-events:none;

}

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

button{

    position:relative;

    overflow:hidden;

}

button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

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

    transform:skewX(-25deg);

    transition:.7s;

}

button:hover::before{

    left:150%;

}

button:hover{

    letter-spacing:.6px;

}

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

#replayBtn{

    animation:replayPulse 2.5s ease-in-out infinite;

}

@keyframes replayPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}

/* =========================================
   Heading Animation
========================================= */

.glass-card h1{

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

}

@keyframes titleFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-3px);

    }

    100%{

        transform:translateY(0);

    }

}

/* =========================================
   Chat Layout
========================================= */

.chat-container{

    width:min(900px,95%);

    height:88vh;

    margin:auto;

    display:flex;

    flex-direction:column;

}

#chatBox{

    flex:1;

    overflow-y:auto;

    padding:70px 25px 40px;

    display:flex;

    flex-direction:column;

    gap:8px;

}

/* Scrollbar */

#chatBox::-webkit-scrollbar{

    width:8px;

}

#chatBox::-webkit-scrollbar-thumb{

    background:#6b8cff66;

    border-radius:999px;

}

/* =========================================
   Fade Scene
========================================= */

.scene{

    transform:scale(.98);

}

.scene.active{

    transform:scale(1);

}

/* =========================================
   Ending Animation
========================================= */

#ending .glass-card{

    opacity:0;

    transform:translateY(25px);

}

#ending.active .glass-card{

    animation:endingFade .9s ease forwards;

}

@keyframes endingFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* =========================================
   Selection
========================================= */

::selection{

    background:#6b8cff;

    color:white;

}

/* =========================================
   Star
========================================= */

.star{

    position:absolute;

    border-radius:50%;

    background:white;

    animation:twinkle linear infinite;

}

@keyframes twinkle{

    0%{
        opacity:.2;
        transform:scale(.8);
    }

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

    100%{
        opacity:.2;
        transform:scale(.8);
    }

}

/* =========================================
   Meteor
========================================= */

.meteor{

    position:absolute;

    width:160px;
    height:2px;

    background:linear-gradient(
        to right,
        rgba(255,255,255,0),
        rgba(255,255,255,.95)
    );

    border-radius:999px;

    transform:rotate(-25deg);

    box-shadow:
        0 0 10px white,
        0 0 25px rgba(255,255,255,.8);

    animation:meteorMove linear forwards;

}

@keyframes meteorMove{

    from{

        transform:
        translate(0,0)
        rotate(-25deg);

        opacity:1;

    }

    to{

        transform:
        translate(-900px,900px)
        rotate(-25deg);

        opacity:0;

    }

}

/* =========================================
   Moon Animation
========================================= */

.moon{

    animation:
        floating 8s ease-in-out infinite,
        moonGlow 5s ease-in-out infinite;

}

@keyframes moonGlow{

    0%{

        filter:brightness(1);

    }

    50%{

        filter:brightness(1.18);

    }

    100%{

        filter:brightness(1);

    }

}

/* =========================================
   CHAT UI V4
========================================= */

.chat-item{
    width:100%;
    display:flex;
    margin:4px 0;
}

.chat-item.same{
    margin-top:-6px;
}

.chat-item.left{

    justify-content:flex-start;

}

.chat-item.right{

    justify-content:flex-end;

}

.chat-content{

    display:flex;

    align-items:flex-start;

    gap:10px;

    max-width:82%;

}

.chat-item.right .chat-content{

    flex-direction:row-reverse;

}

.chat-item.right .chat-body{

    align-items:flex-end;

}

/* Avatar */

.chat-avatar{

    width:38px;

    height:38px;

    border-radius:50%;

    object-fit:cover;

    background:#4558a9;

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

    flex-shrink:0;

}

/* Body */

.chat-body{

    display:flex;

    flex-direction:column;

}

.chat-item.right .chat-body{

    align-items:flex-end;

}

.chat-name{

    font-size:13px;

    color:#ffffff;

    font-weight:700;

    margin-bottom:4px;

}

/* Bubble */

.bubble{

    width:fit-content;

    max-width:340px;

    padding:12px 16px;

    border-radius:20px;

    line-height:1.6;

    font-size:15px;

    word-break:break-word;

    animation:bubbleIn .35s ease;

    box-shadow:
        0 8px 20px rgba(0,0,0,.18);

}

.chat-item.left .bubble{

    background:

        rgba(255,255,255,.10);

    border:

        1px solid rgba(255,255,255,.08);

    backdrop-filter:

        blur(16px);

}

.chat-item.right .bubble{

    background:

        linear-gradient(

            135deg,

            #6b8cff,

            #4d63ff

        );

}

/* Photo */

.chat-photo{

    display:block;

    width:260px;

    max-width:100%;

    border-radius:18px;

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

    box-shadow:
        0 10px 30px rgba(0,0,0,.28);

    cursor:pointer;

    transition:.3s;

}

.chat-photo:hover{

    transform:scale(1.02);

}

/* Animation */

@keyframes bubbleIn{

    from{

        opacity:0;

        transform:

            translateY(14px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}

/* =========================================
   Typing Indicator
========================================= */

.typing{

    display:flex;

    gap:6px;

    padding:12px 16px;

    width:fit-content;

    border-radius:18px;

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

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

    backdrop-filter:blur(16px);

}

.typing span{

    width:8px;

    height:8px;

    border-radius:50%;

    background:white;

    animation:typingBounce 1s infinite;

}

.typing span:nth-child(2){

    animation-delay:.15s;

}

.typing span:nth-child(3){

    animation-delay:.3s;

}

@keyframes typingBounce{

    0%,80%,100%{

        transform:translateY(0);

        opacity:.4;

    }

    40%{

        transform:translateY(-5px);

        opacity:1;

    }

}

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

#finishButton{

    margin:40px auto 20px;

    padding:14px 34px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    color:white;

    background:linear-gradient(
        135deg,
        #6b8cff,
        #4d63ff
    );

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

    animation:

    fadeContinue .8s ease,

    continuePulse 2.2s ease-in-out infinite;

}

#finishButton:hover{

    transform:translateY(-2px);

}

@keyframes fadeContinue{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes continuePulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.04);

    }

    100%{

        transform:scale(1);

    }

}

/* =========================================
   End of Letter
========================================= */

#finishSection{

    width:min(100%,460px);

    margin:70px auto 50px;

    padding:30px;

    text-align:center;

    border-radius:24px;

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

    backdrop-filter:blur(18px);

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

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

    animation:fadeContinue .8s ease;

}

.finish-icon{

    font-size:52px;

    margin-bottom:16px;

    animation:finishFloat 3s ease-in-out infinite;

}

@keyframes finishFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

    100%{

        transform:translateY(0);

    }

}

#finishSection h2{

    font-size:26px;

    margin-bottom:12px;

}

#finishSection p{

    color:#d6d6d6;

    line-height:1.8;

    margin-bottom:24px;

}

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

#photoViewer{

    cursor:zoom-out;

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.88);

    backdrop-filter:blur(6px);

    opacity:0;

    visibility:hidden;

    transition:

    opacity .35s,

    visibility .35s;

    z-index:9999;

}

#photoViewer.active{

    opacity:1;

    visibility:visible;

}

#viewerImage{

    cursor:default;

    max-width:90%;

    max-height:90%;

    border-radius:18px;

    box-shadow:

        0 20px 60px rgba(0,0,0,.5);

    transform:scale(.85);

    transition:

    transform .35s ease;

}

#photoViewer.active #viewerImage{

    transform:scale(1);

}

/* =========================================
   Chat Fade Out
========================================= */

.chat-container.fade-out{

    opacity:0;

    transform:scale(.98);

    transition:

        opacity .6s ease,

        transform .6s ease;

}

/* =========================================
   Credit
========================================= */

.credit{

    margin-top:24px;

    font-size:13px;

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

    letter-spacing:.4px;

}