.moon-container {
    position: relative;
    width: 32cqh;
    height: 32cqh;
    margin-bottom: 2cqh;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    container-type: size;
    animation: moonContainerPulse 6s ease-in-out infinite;
}

.moon-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: var(--z-index-moon);
}

.moon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(254, 254, 250, 0.45) 0%, rgba(254, 254, 250, 0.2) 40%, rgba(254, 254, 250, 0) 70%);
    z-index: var(--z-index-moon-glow);
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--transition-duration-slow) cubic-bezier(0.25, 1, 0.5, 1), transform var(--transition-duration-slow) cubic-bezier(0.25, 1, 0.5, 1);
}

.moon-image {
    position: absolute;
    width: var(--moon-size, 100cqh);
    height: var(--moon-size, 100cqh);
    object-fit: contain;
    border-radius: 50%;
    left: calc(50% + var(--moon-x, 0cqw));
    top: calc(50% + var(--moon-y, 0cqh));
    transform: translate(-50%, -50%);
    transition: opacity 1000ms cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    will-change: opacity;
}

.moon-image.current {
    opacity: 1;
    z-index: var(--z-index-moon);
}

.moon-image.next {
    opacity: 0;
    z-index: calc(var(--z-index-moon) - 1);
}

.moon-container.stepping .moon-image {
    transition: opacity 400ms cubic-bezier(0.25, 1, 0.5, 1);
}