/* The same moon, seen from two worlds. All animated properties are transforms. */
.portal-moon {
    --moon-light: #dbe6de;
    --moon-glow: 176, 209, 207;
    --moon-shadow: #101824;
    position: relative;
    isolation: isolate;
    width: min(100%, 320px);
    aspect-ratio: 1;
    margin-inline: auto;
    pointer-events: none;
}
[data-moon-target="bright"] .portal-moon {
    --moon-light: #f5eaca;
    --moon-glow: 246, 215, 148;
    --moon-shadow: #292534;
}
.portal-moon__halo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--moon-glow), .15) 15%, rgba(var(--moon-glow), .06) 43%, transparent 68%);
}
.portal-moon__body {
    position: absolute;
    inset: 18%;
    overflow: hidden;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 38% 26%, #f9f4df73, transparent 42%),
        radial-gradient(ellipse at 26% 58%, #5d747354, transparent 28%),
        radial-gradient(ellipse at 69% 29%, #65808845, transparent 28%),
        radial-gradient(ellipse at 59% 75%, #ffffff3d, transparent 38%),
        radial-gradient(ellipse at 70% 84%, #55708050, transparent 45%),
        var(--moon-light);
    box-shadow: 0 0 2px rgba(var(--moon-glow), .9), 0 0 28px rgba(var(--moon-glow), .11), 0 18px 48px #0003;
    transform: rotate(-18deg);
}
.portal-moon__terrain {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    animation: portal-lunar-drift 65s ease-in-out infinite alternate;
}
.portal-moon__limb {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset -14px -9px 21px #17232e80, inset 5px 4px 9px #fff6dc6e;
}
.portal-moon__night {
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 68% 46%, var(--moon-shadow) 44%, #101824f7 57%, #101824d4 63%, #10182465 70%, transparent 77%);
    transform: translateX(23%);
    animation: portal-lunar-phase-dark 24s ease-in-out infinite alternate;
}
[data-moon-target="bright"] .portal-moon__night {
    background: radial-gradient(ellipse at 70% 46%, var(--moon-shadow) 44%, #292534f7 57%, #292534ce 63%, #29253454 70%, transparent 77%);
    transform: translateX(65%);
    animation-name: portal-lunar-phase-bright;
}
.portal-moon__orbit {
    position: absolute;
    border: 1px solid rgba(var(--moon-glow), .16);
    border-radius: 50%;
    transform: rotate(-28deg) scaleY(.75);
}
.portal-moon__orbit--outer { inset: 4%; }
.portal-moon__orbit--inner { inset: 9%; border-style: dashed; border-color: rgba(var(--moon-glow), .08); transform: rotate(30deg) scaleY(.84); }
.portal-moon__satellite {
    position: absolute;
    inset: 5%;
    animation: portal-lunar-orbit 42s linear infinite;
}
.portal-moon__satellite::before {
    content: "";
    position: absolute;
    top: 18%;
    left: 10%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(var(--moon-glow), .8);
    box-shadow: 0 0 8px rgba(var(--moon-glow), .7);
}
.portal-moon__star {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(var(--moon-glow), .7);
    box-shadow: 0 0 6px rgba(var(--moon-glow), .3);
    animation: portal-lunar-starlight 6s ease-in-out infinite alternate;
}
.portal-moon__star--one { left: 12%; top: 29%; }
.portal-moon__star--two { right: 12%; top: 20%; width: 2px; height: 2px; animation-delay: -2s; }
.portal-moon__star--three { right: 9%; bottom: 28%; animation-delay: -4s; }
.portal-moon__star--four { left: 24%; bottom: 12%; width: 2px; height: 2px; animation-delay: -1s; }
.is-paused .portal-moon *, .portal-moon.is-paused * { animation-play-state: paused; }
@keyframes portal-lunar-drift { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes portal-lunar-phase-dark { from { transform: translateX(15%); } to { transform: translateX(35%); } }
@keyframes portal-lunar-phase-bright { from { transform: translateX(54%); } to { transform: translateX(76%); } }
@keyframes portal-lunar-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes portal-lunar-starlight { from { transform: scale(.65); } to { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) {
    .portal-moon *, .portal-moon *::before { animation: none !important; }
}