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

/*==================================================
CANVAS
==================================================*/

#bgCanvas{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    z-index:0;
}


.background{

    position:fixed;
    inset:0;
    overflow:hidden;
    background:
    radial-gradient(circle at top,
    #14274e 0%,
    #081321 40%,
    #030712 100%);
    z-index:-1;

}


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

.moon-container{
    position:absolute;
    top:60px;
    right:40px;
    width:220px;
    height:220px;
}


/*==================================================
MOON
==================================================*/


/*==================================================
MOON SURFACE TEXTURE
==================================================*/



.moon{

    position:absolute;
    width:80%;
    height:80%;
    border-radius:50%;
    overflow:hidden;
   
    z-index:3;

    background:

    /* ---------- Batu Besar ---------- */

    radial-gradient(
        ellipse 12px 8px at 18% 18%,
        rgba(255,255,255,1),  
        transparent 75%
    ),

    radial-gradient(
        ellipse 10px 7px at 65% 18%,
        rgba(150,150,150,.5),
        transparent 70%
    ),

    radial-gradient(
        ellipse 8px 6px at 28% 72%,
        rgba(70,70,70,.5),
        transparent 75%
    ),

    radial-gradient(
        ellipse 14px 9px at 78% 60%,
        rgba(80,80,80,.4),
        transparent 75%
    ),

    radial-gradient(
        ellipse 3px 2px at 18% 25%,
        rgba(90, 90, 90,.5),
        transparent 80%
    ),

    radial-gradient(
        ellipse 3px 2px at 18% 24%,
        rgba(90,90,90,.5),
        transparent 80%
    ),


    /* ---------- Moon Color ---------- */

    radial-gradient(
        circle at 35% 30%,

        #ffffff 0%,
        #f8f8f8 18%,
        #dfdfdf 45%,
        #b9b9b9 72%,
        #8b7b43 100%
    );
}


.moon-wrapper{

    position:absolute;
    display:flex;
    justify-content:center;
    align-items:center;
    top:80px;       /* sebelumnya 20px */
    right:120px;    /* sebelumnya 20px */
    width:var(--moon-size);
    height:var(--moon-size);
    z-index:2;
    pointer-events:none;
}


/*==================================================
MOON GLOW
==================================================*/
.moon-glow{

    position:absolute;
    left:40%;
    top:40%;
    width:270px;
    height:270px;
    transform:translate(-50%,-50%);
    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(255,255,255,.45) 0%,
        rgba(255,245,200,.38) 18%,
        rgba(255,225,120,.30) 35%,
        rgba(255,195,70,.20) 55%,
        rgba(255,170,40,.12) 72%,
        rgba(255,150,20,.05) 88%,
        transparent 100%);

    filter:blur(20px);
    z-index:1;

}


/*==================================================
MOON RING
==================================================*/

.moon-ring{

    position:absolute;
    left:40%;
    top:40%;
    width:225px;
    height:225px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    border:0.5px solid rgba(255,215,80,.18);

    z-index:2;

}



/*==================================================
GOLDEN SHINE
==================================================*/

@keyframes moonShine{

    0%{
        filter:brightness(1);
    }
    50%{
        filter:brightness(1.12);
    }
    100%{
        filter:brightness(1);
    }
}


/*==================================================
MARE
==================================================*/

.mare{

    position:absolute;
    border-radius:50%;
    pointer-events:none;
    mix-blend-mode:multiply;
    opacity:.9;
    filter:blur(1.5px);

    background:

    radial-gradient(
        ellipse at 35% 40%,
        rgba(35,35,35,.55) 0%,
        rgba(70,70,70,.35) 45%,
        rgba(120,120,120,.15) 70%,
        transparent 100%
    ),

    radial-gradient(
        ellipse at 70% 60%,
        rgba(30,30,30,.40) 0%,
        transparent 75%
    ),

    radial-gradient(
        ellipse at 45% 75%,
        rgba(50,50,50,.25) 0%,
        transparent 70%
    );

}




.mare1{

    width:120px;
    height:90px;
    top:15px;
    left:15px;

    background:
    radial-gradient(
        circle at 30% 40%,
        rgba(15,15,15,.50),
        transparent 45%
    ),

    radial-gradient(
        circle at 55% 30%,
        rgba(35,35,35,.40),
        transparent 35%
    ),

    radial-gradient(
        circle at 65% 60%,
        rgba(20,20,20,.35),
        transparent 32%
    ),

    radial-gradient(
        circle at 20% 70%,
        rgba(30,30,30,.28),
        transparent 28%
    ),

    radial-gradient(
        circle at 80% 45%,
        rgba(20,20,20,.25),
        transparent 25%
    );

}


.mare2{

    width:75px;
    height:60px;
    top:65px;
    left:60px;

    background:
    radial-gradient(circle at 30% 30%,
        rgba(25,25,25,.45),
        transparent 45%
    ),

    radial-gradient(circle at 60% 60%,
        rgba(35,35,35,.30),
        transparent 35%
    ),

    radial-gradient(circle at 75% 20%,
        rgba(20,20,20,.25),
        transparent 25%
    );

}


.mare3{

    width:75px;
    height:60px;
    top:100px;
    left:85px;

    background:
    radial-gradient(circle at 30% 30%,
        rgba(25,25,25,.45),
        transparent 45%
    ),

    radial-gradient(circle at 60% 60%,
        rgba(35,35,35,.30),
        transparent 35%
    ),

    radial-gradient(circle at 75% 20%,
        rgba(20,20,20,.25),
        transparent 25%
    );

}


.mare4{

    width:55px;
    height:40px;
    top:80px;
    left:85px;

    background:
    radial-gradient(circle at 30% 30%,
        rgba(25,25,25,.45),
        transparent 45%
    ),

    radial-gradient(circle at 60% 60%,
        rgba(35,35,35,.30),
        transparent 35%
    ),

    radial-gradient(circle at 75% 20%,
        rgba(20,20,20,.25),
        transparent 25%
    );

}


.mare5{

    width:45px;
    height:35px;
    top:95px;
    left:75px;
    background:
    radial-gradient(
        ellipse at 40% 45%,
        rgba(18,18,18,.38),
        transparent 50%
    ),

    radial-gradient(
        ellipse at 70% 60%,
        rgba(30,30,30,.28),
        transparent 45%
    );

}


.mare::before{

    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    opacity:.25;
    background:

    radial-gradient(circle,
    rgba(255,255,255,.08) 1px,
    transparent 2px);
    background-size:14px 14px;
    mix-blend-mode:overlay;

}


.mare::after{

    content:"";
    position:absolute;
    width:38%;
    height:35%;
    left:15%;
    top:52%;
    border-radius:50%;
    background:
    radial-gradient(
        ellipse,
        rgba(30,30,30,.30),
        transparent 80%
    );

    filter:blur(3px);

}


/*==================================================
MOON CRATER
==================================================*/
.crater{

    background:
    radial-gradient(
        circle at 35% 35%,
        rgba(255,255,255,.40) 0%,
        rgba(150,150,150,.20) 40%,
        rgba(70,70,70,.55) 70%,
        rgba(25,25,25,.9) 100%
    );

    box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.3),
    inset -3px -3px 5px rgba(0,0,0,.6);

}



.crater1{

    width:28px;
    height:28px;
    top:48px;
    left:62px;
    background:

    radial-gradient(
        circle at 45% 45%,
        rgba(120,120,120,.25) 0%,
        rgba(70,70,70,.28) 40%,
        rgba(20,20,20,.45) 75%,
        transparent 100%
    );

}


.crater::before{

    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
    radial-gradient(
        circle at 30% 30%,
        rgba(255,255,255,.35),
        transparent 45%

    );

}


.crater::after{

    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
    radial-gradient(
        circle at 70% 70%,
        rgba(0,0,0,.35),
        transparent 55%
    );

}





/*==================================================
MOON HIGHLIGHT
==================================================*/

.moon::before{

    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    opacity:.08;
    background:
    radial-gradient(circle,#f4f5ec 1px,transparent 2px),
    radial-gradient(circle,#eeeee7 1px,transparent 2px);

    background-size:
    18px 18px,
    24px 24px;

    mix-blend-mode:multiply;

}



.moon::after{

    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
    radial-gradient(
        circle at 28% 22%,
        rgba(224, 225, 215, 0.908),
        transparent 62%
    );

    mix-blend-mode:screen;

}





/*==================================================
ATMOSPHERE
==================================================*/

.top-light{

    position:absolute;
    pointer-events:none;
    z-index:1;
    top:0;
    left:0;
    width:100%;
    height:40%;
    background:
    linear-gradient(
    rgba(50,90,180,.18),
    transparent);

}

.bottom-shadow{

    position:absolute;
    pointer-events:none;
    z-index:1;
    bottom:0;
    left:0;
    width:100%;
    height:45%;
    background:
    linear-gradient(
    transparent,
    rgba(0,0,0,.45));

}

.gradient-light{

    position:absolute;
    pointer-events:none;
    z-index: 3;
    inset:0;
    background:
    radial-gradient(circle at center,
    transparent,
    rgba(0,0,0,.15),
    rgba(0,0,0,.55));

}