html, body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

.sun {
    position: absolute;
    top: 15%; /* Will be updated by JS */
    left: 50%; /* Will be updated by JS */
    transform: translate(-50%, -50%);
    width: 120px; /* Sun size */
    height: 120px;
    border-radius: 50%;
    background-image: url('images/sun.webp'); /* Placeholder for sun image */
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 50px 20px rgba(255, 215, 0, 0.8), 0 0 100px 40px rgba(255, 165, 0, 0.6); /* Stronger glow */
    z-index: 1; /* Same as moon, visibility controlled by JS */
}

/* Dynamic sky background using CSS custom properties */
.sky {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background: linear-gradient(to bottom,
            var(--sky-color-top, #060010) 0%,
            var(--sky-color-bottom, #370569) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--sky-color-top)",
            endColorstr="var(--sky-color-bottom)",
            GradientType=0);

    transform: scale(1);
}

.mountains {
    position: absolute;
    height: 80px;
    width: 100%;
    bottom: 0px;
    left: 0px;
    z-index: 2;
}

.light-base {
    position: absolute;
    bottom: -80px;
    left: 10vw;
    width: 80vw;
    height: 100px;
    border-radius: 50%;
    box-shadow: -0px -10px 30px 10px #ffc1a0, -0px -20px 40px 20px #fe9c7f,
        -0px -30px 60px 30px #be6590, -0px -50px 150px 75px #632b6c;
    background-color: #ffc1a0;
    z-index: 1;
}

.mountains-base {
    content: "";

    background: -moz-linear-gradient(top,
            rgba(55, 5, 105, 0) 0%,
            rgba(9, 0, 22, 1) 100%);
    background: -webkit-linear-gradient(top,
            rgba(55, 5, 105, 0) 0%,
            rgba(9, 0, 22, 1) 100%);
    background: linear-gradient(to bottom,
            rgba(55, 5, 105, 0) 0%,
            rgba(9, 0, 22, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00370569",
            endColorstr="#090016",
            GradientType=0);

    width: 100%;
    height: 100px;
    position: absolute;
    bottom: -10px;
    z-index: 3;
}

.mountains-base:after {
    content: "";

    background: -moz-linear-gradient(top,
            rgba(55, 5, 105, 0) 0%,
            rgba(9, 0, 22, 1) 100%);
    background: -webkit-linear-gradient(top,
            rgba(55, 5, 105, 0) 0%,
            rgba(9, 0, 22, 1) 100%);
    background: linear-gradient(to bottom,
            rgba(55, 5, 105, 0) 0%,
            rgba(9, 0, 22, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00370569",
            endColorstr="#090016",
            GradientType=0);
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 0px;
    z-index: 3;
}

.mountains-base:before {
    content: "";

    background: -moz-linear-gradient(top,
            rgba(55, 5, 105, 0) 0%,
            rgba(9, 0, 22, 1) 100%);
    background: -webkit-linear-gradient(top,
            rgba(55, 5, 105, 0) 0%,
            rgba(9, 0, 22, 1) 100%);
    background: linear-gradient(to bottom,
            rgba(55, 5, 105, 0) 0%,
            rgba(9, 0, 22, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00370569",
            endColorstr="#090016",
            GradientType=0);
    width: 100%;
    height: 15px;
    position: absolute;
    bottom: 10px;
    z-index: 2;
}

.mountains>[class^="mountain"],
.mountains>[class^="mountain"]:after,
.mountains>[class^="mountain"]:before,
.mountains>[class^="land"],
.mountains>[class^="land"]:after,
.mountains>[class^="land"]:before {
    background: #110124;
    box-shadow: 0px 0px 50px 5px rgba(255, 255, 255, 0.2);
    position: absolute;
    bottom: 0px;
}

.mountain-2 {
    width: 60px;
    height: 60px;
    bottom: -20px !important;
    left: -10px;
    transform: rotate(45deg);
    border-top-left-radius: 10px;
}

.mountain-1 {
    width: 100px;
    height: 100px;
    bottom: -40px !important;
    left: 10px;
    transform: rotate(45deg);
    border-top-left-radius: 10px;
}

.land-1 {
    width: 30%;
    height: 20px;
    border-top-right-radius: 100%;
}

.land-2 {
    width: 60%;
    height: 15px;
    left: 30%;
    border-top-left-radius: 200%;
    border-top-right-radius: 200%;
}

.land-3 {
    width: 20%;
    height: 20px;
    left: 80%;
    border-top-left-radius: 100%;
}


#starrySkyCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Ensure it's behind other elements like mountains */
}

.moon {
    --illumination: 0.5; /* 0 = new moon, 1 = full moon */
    --phase: 0.5; /* 0 = new moon, 0.5 = full moon, 1 = new moon again */
    --tilt: 0; /* degrees */
    --lat: 0; /* degrees */
    --hour: 0; /* degrees */

    position: absolute;
    top: 15%; /* Adjust as needed */
    left: 50%; /* Will be updated by JS */
    transform: translate(-50%, -50%);
    width: 100px; /* Moon size */
    height: 100px;
    border-radius: 50%;
    background-color: #FDF5E6; /* Moon color */
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.8);
    overflow: hidden; /* To contain the pseudo-elements */
    z-index: 1; /* Above the canvas, below mountains */
}

.moon::before,
.moon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.moon::before {
    background-color: #FDF5E6; /* Moon color */
    background-image: url('images/moon.webp'); /* Add moon texture */
    background-size: cover;
    background-position: center;
    transform: rotate(calc(var(--tilt) * 1deg));
}

.moon::after {
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.2) 100%); /* Radial gradient for varied shading */
    transform: rotate(calc(var(--tilt) * 1deg));
    border-radius: 50%; /* Ensure it's a circle */
    
    /* Use mask to reveal the lit portion based on phase */
    /* The 'phase' variable goes from 0 (new moon) to 0.5 (full moon) to 1 (new moon) */
    /* We want the mask to reveal more as phase approaches 0.5 (full moon) */
    /* And cover more as phase approaches 0 or 1 (new moon) */

    /* This mask will create the gibbous and crescent shapes with an appropriate curve. */
    /* Adjusting color stops for a softer transition */
    mask: radial-gradient(circle at calc( (var(--phase) * 100%) - 50%), transparent 48%, rgba(0, 0, 0, 0.1) 50%, black 55%);
    -webkit-mask: radial-gradient(circle at calc( (var(--phase) * 100%) - 50%), transparent 48%, rgba(0, 0, 0, 0.1) 50%, black 55%);
}