.moon {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 50%;
    opacity: 0;
    z-index: -1;
    offset-rotate: 0deg;
}

.moon.visible {
    offset-path: path('M -400 600 Q -200 -100 0 -200');
    animation: moonRise 2000ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.moon.hiding {
    offset-path: path('M 0 -200 Q 200 300 400 600');
    animation: moonFall 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes moonRise {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }
    100% {
        offset-distance: 100%;
        opacity: 1;
    }
}

@keyframes moonFall {
    0% {
        offset-distance: 0%;
        opacity: 1;
    }
    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}