/* ===========================================================
   CELETIOUS
   Cosmic Canvas Engine
   Version 1.0
=========================================================== */

.cosmic-canvas{
    --space:#050608;
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#050608;
    z-index:0;
    pointer-events:none;
}

.cosmic-canvas .sky-layer{
    position:absolute;
    inset:0;
}

.cosmic-canvas .space-layer,
.cosmic-canvas .stars-layer,
.cosmic-canvas .moon-layer,
.cosmic-canvas .glow-layer{
    position:absolute;
    inset:0;
}

.cosmic-canvas .space-layer{
    background:radial-gradient(
        circle at top,
        #0d1522 0%,
        var(--space) 60%
    );
}

.cosmic-canvas .stars-layer{
    overflow:hidden;
}

.cosmic-canvas .star{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    will-change:transform, opacity;
    transform:translate(-50%, -50%);
    background:radial-gradient(
        circle,
        currentColor 0%,
        currentColor 25%,
        rgba(255,255,255,.25) 65%,
        rgba(255,255,255,0) 100%
    );
    animation-name:twinkle;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
}

.cosmic-canvas .moon-layer{
    visibility:hidden;
    display:flex;
    justify-content:flex-end;
    align-items:flex-end;
    padding:0 0 45px 0;
    overflow:hidden;
    pointer-events:none;
}

.cosmic-canvas .moon{
    position:relative;
    width:780px;
    margin-right:-170px;
    animation:moonFloat 18s ease-in-out infinite;
}

.cosmic-canvas .moon-image{
    position:relative;
    z-index:1;
    width:100%;
    height:auto;
    display:block;
    opacity:.98;
    pointer-events:none;
    user-select:none;
    filter:
        brightness(.98)
        contrast(1.08)
        saturate(.88);
}

@keyframes twinkle{

    0%{
        opacity:.25;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:.25;
    }
}

@keyframes moonFloat{

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

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

@media (max-width:767px){

    .cosmic-canvas .moon-layer{
        padding:0;
    }

    .cosmic-canvas .moon{
        width:250px;
        margin-right:-60px;
        animation-duration:10.59s;
    }

    .cosmic-canvas .star:nth-child(n + 181){
        display:none;
    }
}

@media (min-width:768px) and (max-width:1024px){

    .cosmic-canvas .moon-layer{
        padding-bottom:20px;
    }

    .cosmic-canvas .moon{
        width:440px;
        margin-right:-105px;
    }
}