/* author: https://codepen.io/pavlovsk/pen/jOjKEJq
Mustafa Enes
 */

:root {
    --day: 14s;
    --sun-orbit-progress: -10s;
    --circle-delay: calc(var(--day) / 3.97);
    --circular-ease: cubic-bezier(.37, 0, .63, 1);
    --pov: 66deg;
    --bg-color: #111;
    --orbit-sphere-color: hsla(260, 80%, 60%, .6);
    --orbit-line-color: hsl(260 50% 66%);
    --orbit-line-thickness: .15rem;
    --orbit-plane-color: radial-gradient( circle at center, hsla(250, 70%, 75%, .025), hsla(250, 70%, 75%, .15));
    --moon-orbit-size: 12dvmin;
    --mercury-orbit-size: 24dvmin;
    --venus-orbit-size: 36dvmin;
    --sun-orbit-size: 48dvmin;
    --mars-orbit-size: 60dvmin;
    --jupiter-orbit-size: 72dvmin;
    --saturn-orbit-size: 84dvmin;
    --stars-orbit-size: 96dvmin;
    --number-of-bodies: 10;
}

body {
    height: 100dvh;
    margin: 0;
    background: var(--bg-color);
    overflow: hidden;
}

.universe {
    height: 100%;
    perspective: 50000px;
    translate: 0 -5%;
    position: relative;
}


/* orbit line */

.orbit {
    --enter-delay: calc(.1s + var(--i) * (1s / 6));
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size, 30dvmin);
    height: var(--size, 30dvmin);
    border-radius: 50%;
    background: var(--orbit-plane-color);
    box-shadow: 0 0 0 var(--orbit-line-thickness) var(--orbit-line-color);
    transform-style: preserve-3d;
    rotate: x var(--pov);
    translate: -50% -40%;
    opacity: 0;
    animation: orbit-appear 1.5s var(--enter-delay, .1s) forwards;
}

 :nth-child(1 of :is(.orbit)) {
    --i: 0;
}

 :nth-child(2 of :is(.orbit)) {
    --i: 1;
}

 :nth-child(3 of :is(.orbit)) {
    --i: 2;
}

 :nth-child(4 of :is(.orbit)) {
    --i: 3;
}

 :nth-child(5 of :is(.orbit)) {
    --i: 4;
}

 :nth-child(6 of :is(.orbit)) {
    --i: 5;
}

 :nth-child(7 of :is(.orbit)) {
    --i: 6;
}

 :nth-child(8 of :is(.orbit)) {
    --i: 7;
}

@keyframes orbit-appear {
    to {
        opacity: 1;
        translate: -50% -50%;
    }
}


/* orbit semi-sphere */

.orbit::after {
    --cutout: calc(var(--size) / 2 + var(--orbit-line-thickness));
    content: "";
    position: absolute;
    top: -75%;
    left: calc(-1 * var(--orbit-line-thickness));
    width: calc(100% + var(--orbit-line-thickness) * 2);
    height: 250%;
    background: radial-gradient( circle var(--cutout) at center, #0000 99.9%, var(--orbit-sphere-color));
    border-radius: 50%;
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

.orbit.moon {
    --size: var(--moon-orbit-size);
}

.orbit.mercury {
    --size: var(--mercury-orbit-size);
}

.orbit.venus {
    --size: var(--venus-orbit-size);
}

.orbit.sun {
    --size: var(--sun-orbit-size);
}

.orbit.mars {
    --size: var(--mars-orbit-size);
}

.orbit.jupiter {
    --size: var(--jupiter-orbit-size);
}

.orbit.saturn {
    --size: var(--saturn-orbit-size);
}

.orbit.stars {
    --size: var(--stars-orbit-size);
    --orbit-sphere-color: hsla(260, 80%, 20%, .6);
    --orbit-line-color: hsl(260 50% 60%);
}

.orbit.stars .star {
    --size: 8dvmin;
    --astronomical-unit: calc( var(--stars-orbit-size) / 2 - (var(--y) * var(--y)) * 14dvmin);
    --star-x-delay: calc(var(--j) * -.5s);
    content: "";
    position: absolute;
    z-index: 1;
    bottom: -8%;
    left: calc(50% + var(--astronomical-unit));
    width: calc(var(--size) * cos(var(--pov)));
    height: var(--size);
    background: #fff0ea99;
    mix-blend-mode: color-dodge;
    clip-path: polygon( 50% 0, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0% 50%, 45% 45%);
    translate: -50% calc(-50% + var(--y) * 800%);
    rotate: x calc(var(--y) * 80deg);
    scale: calc(1 - var(--y) / 1.5) calc(1 - var(--y) / 2);
    transform-style: preserve-3d;
    animation: star-rise-and-shine var(--day) var(--star-x-delay) infinite, star-move-x var(--day) var(--star-x-delay) infinite var(--circular-ease), star-move-y var(--day) calc(0s - var(--circle-delay) + var(--star-x-delay)) infinite var(--circular-ease);
}

@keyframes star-rise-and-shine {
    from,
    52%,
    to {
        opacity: 0;
    }
    60%,
    93% {
        opacity: 1;
    }
    63%,
    67%,
    71%,
    76%,
    81%,
    86%,
    91% {
        opacity: 1;
    }
    61%,
    65%,
    69%,
    73%,
    78%,
    83%,
    89% {
        opacity: max(.3, sin(var(--j)));
    }
}

@keyframes star-move-x {
    from,
    to {
        transform: rotateY(-70deg);
    }
    50% {
        transform: rotateY(70deg);
        left: calc(50% - var(--astronomical-unit));
    }
}

@keyframes star-move-y {
    50% {
        bottom: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
    }
}

.body,
.body-container {
    --orbit-progress: 0s;
    --inverse-index: calc(var(--number-of-bodies) - var(--i));
    /* needs better formulation. works by chance atm */
    --shine-delay: calc( var(--sun-orbit-progress) + var(--orbit-progress));
    --anim-body-reveal: body-reveal 1.5s calc(1s + .09s * var(--i)) forwards;
    --anim-body-index: body-index var(--day) var(--orbit-progress) infinite;
    --anim-body-shine: body-shine var(--day) var(--shine-delay) linear infinite;
    --anim-body-move-x: body-move-x var(--day) calc(var(--orbit-progress)) infinite var(--circular-ease);
    --anim-body-move-y: body-move-y var(--day) calc(var(--orbit-progress) - var(--circle-delay)) infinite var(--circular-ease);
    position: absolute;
    left: calc(50% + var(--astronomical-unit));
    top: 0;
    opacity: 0;
    translate: -50% calc(-50% - (50% * sin(var(--pov))));
    width: var(--size);
    height: var(--size);
    background: radial-gradient( circle at center, var(--color-1, darkgray), var(--color-2, #333) 60%);
    background-size: 300%;
    background-position: center;
    border-radius: 50%;
    animation: var(--anim-body-reveal), var(--anim-body-index), var(--anim-body-shine), var(--anim-body-move-x), var(--anim-body-move-y);
}

 :nth-child(1 of :is(.body, .body-container)) {
    --i: 0;
}

 :nth-child(2 of :is(.body, .body-container)) {
    --i: 1;
}

 :nth-child(3 of :is(.body, .body-container)) {
    --i: 2;
}

 :nth-child(4 of :is(.body, .body-container)) {
    --i: 3;
}

 :nth-child(5 of :is(.body, .body-container)) {
    --i: 4;
}

 :nth-child(6 of :is(.body, .body-container)) {
    --i: 5;
}

 :nth-child(7 of :is(.body, .body-container)) {
    --i: 6;
}

 :nth-child(8 of :is(.body, .body-container)) {
    --i: 7;
}

 :nth-child(9 of :is(.body, .body-container)) {
    --i: 8;
}

 :nth-child(10 of :is(.body, .body-container)) {
    --i: 9;
}

@keyframes body-reveal {
    to {
        top: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
        opacity: 1;
    }
}

@keyframes body-index {
    from,
    49% {
        z-index: var(--inverse-index);
    }
    50%,
    to {
        z-index: 0;
    }
}

@keyframes body-shine {
    to {
        background-position-x: -100%;
    }
}

@keyframes body-move-x {
    50% {
        left: calc(50% - var(--astronomical-unit));
    }
}

@keyframes body-move-y {
    50% {
        top: calc(50% - var(--astronomical-unit) * cos(var(--pov)));
    }
}

.body-container.earth {
    --size: 4dvmin;
    --color-1: #67aecb;
    --color-2: mediumblue;
    --astronomical-unit: 0%;
    --orbit-progress: calc(-1 * var(--circle-delay));
    animation: var(--anim-body-reveal), var(--anim-body-index), var(--anim-body-shine), earth-night var(--day) var(--shine-delay) linear infinite;
}

@keyframes earth-night {
    50% {
        box-shadow: inset 0 0 var(--size) calc(var(--size) / 5) #000b;
    }
}

.body-container.earth .human-lights {
    --color: #fd08;
    --px: .7em;
    --light: 0 var(--px) var(--color);
    --this-mad-city: 0 var(--px) palevioletred;
    font-size: calc(var(--size) / 50);
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 1em;
    height: 1em;
    translate: -50% -50%;
    border-radius: 50%;
    opacity: 0;
    mix-blend-mode: difference;
    box-shadow: -5em -17em var(--light), -3em -15em var(--light), -2em -16em var(--light), -5em -14em var(--light), -6em -13em var(--light), -2em -13em var(--light), 0em -15em var(--light), -2em -18em var(--light), 1em -17em var(--light), 1em -15em var(--light), 3em -14em var(--light), 6em -9em var(--light), 4em -9em var(--light), 6em -7em var(--light), 7em -5em var(--light), 6em -13em var(--this-mad-city), 4em -16em var(--light), 3em -17em var(--light), 5em -19em var(--light), 9em -17em var(--light), 1em -19em var(--light), 10em -12em var(--light), 15em -9em var(--light), 20em -6em var(--light), 19em -8em var(--light), -3em 1em var(--light), 1em 4em var(--light), 7em 2em var(--light), 2em 1em var(--light), 5em 10em var(--light);
    animation: earth-human-lights var(--day) var(--shine-delay) linear infinite;
}

@keyframes earth-human-lights {
    50% {
        opacity: 1;
    }
}

.body-container.earth::before,
.body-container.earth::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
}


/* continent */

.body-container.earth::before {
    translate: -45% -40%;
    width: calc(var(--size) / 2);
    height: calc(var(--size) / 1.8);
    border-radius: 50% 100%;
    clip-path: polygon( 0 0, 100% 0, 70% 100%, 30% 100%, 25% 40%, 3% 35%, 0 30%, 3% 10%, 4% 0);
    background: linear-gradient( to bottom, palegoldenrod 30%, darkgreen 60%, sienna);
    mix-blend-mode: soft-light;
    filter: blur(.1dvmin);
}


/* clouds */

.body-container.earth::after {
    width: 100%;
    height: 100%;
    translate: -50% -50%;
    border-radius: 50%;
    background: repeating-radial-gradient( circle at 50% 0%, #fff4 3%, #fff4 10%, #0000 11%, #0000 40%, #fff4 60%, #0000 80%, #0000 100%), repeating-radial-gradient( ellipse calc(var(--size) / 1.5) calc(var(--size) / 6) at 30% 90%, #fff4, #fffa 1%, transparent 3%, #fff9 5%, transparent 7%, #fff4 9%, transparent 11%, transparent 100%);
    background-size: 200% 100%;
    background-position: right center;
    filter: blur(.1dvmin);
    mix-blend-mode: hard-light;
    animation: earth-clouds calc(var(--day) * 3.1) linear infinite;
}

@keyframes earth-clouds {
    to {
        background-position-x: -100%;
    }
}

.body-container.moon {
    --size: 2dvmin;
    --color-1: #eee;
    --color-2: #333;
    --astronomical-unit: calc(var(--moon-orbit-size) / 2);
    --orbit-progress: -3s;
    overflow: hidden;
}

.body-container.moon .crater {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 1;
    translate: 0 -50%;
    width: calc(var(--size) * 100%);
    height: calc(var(--size) * 100%);
    background: #0003;
    transform-style: preserve-3d;
    transform-origin: left center;
    rotate: x calc(90deg - var(--pov));
    border-radius: 50%;
    box-shadow: .1dvmin .1dvmin .1dvmin #fff7, -.1dvmin -.1dvmin .1dvmin #0009;
    animation: moon-crater var(--day) calc(var(--day) / -2.2) linear infinite;
}

@keyframes moon-crater {
    from {
        z-index: 1;
        transform: translateX( calc(1 / var(--size) * -100%)) rotateY(-90deg);
    }
    99.9% {
        z-index: 1;
        transform: translateX( calc(1 / var(--size) * 100%)) rotateY(90deg);
    }
    to {
        z-index: 0;
    }
}

.body-container.moon .crater-1 {
    --size: .3;
    --x: 30%;
    --y: 20%;
}

.body-container.moon .crater-2 {
    --size: .2;
    --x: 66%;
    --y: 55%;
}

.body-container.moon .crater-3 {
    --size: .15;
    --x: 55%;
    --y: 40%;
}

.body-container.moon .crater-4 {
    --size: .25;
    --x: 27%;
    --y: 50%;
}

.body-container.moon .crater-5 {
    --size: .1;
    --x: 60%;
    --y: 70%;
}

.body-container.moon .crater-6 {
    --size: .1;
    --x: 20%;
    --y: 40%;
}

.body-container.mercury {
    --size: 2dvmin;
    --color-1: #eed;
    --color-2: #443;
    --astronomical-unit: calc(var(--mercury-orbit-size) / 2);
    --orbit-progress: -5s;
    overflow: hidden;
}

.body-container.mercury .crater {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 1;
    rotate: x calc(90deg - var(--pov));
    translate: 0 -50%;
    transform-style: preserve-3d;
    transform-origin: left center;
    width: calc(var(--size) * 100%);
    height: calc(var(--size) * 100%);
    background: #fff7;
    border-radius: 50%;
    box-shadow: inset 0 0 .1dvmin .02dvmin #0009;
    animation: mercury-crater var(--day) calc(var(--day) / -2) linear infinite;
}

@keyframes mercury-crater {
    from {
        z-index: 1;
        transform: translateX( calc(1 / var(--size) * -100%)) rotateY(-90deg);
    }
    99.9% {
        z-index: 1;
        transform: translateX( calc(1 / var(--size) * 100%)) rotateY(90deg);
    }
    to {
        z-index: 0;
    }
}

.body-container.mercury .crater-1 {
    --size: .1;
    --x: 35%;
    --y: 21%;
}

.body-container.mercury .crater-2 {
    --size: .15;
    --x: 68%;
    --y: 35%;
}

.body-container.mercury .crater-3 {
    --size: .17;
    --x: 50%;
    --y: 42%;
}

.body-container.mercury .crater-4 {
    --size: .12;
    --x: 22%;
    --y: 75%;
}

.body-container.mercury .crater-5 {
    --size: .2;
    --x: 37%;
    --y: 53%;
}

.body-container.mercury .crater-6 {
    --size: .16;
    --x: 17%;
    --y: 79%;
}

.body-container.mercury .crater-7 {
    --size: .13;
    --x: 18%;
    --y: 23%;
}

.body-container.mercury .crater-8 {
    --size: .17;
    --x: 83%;
    --y: 38%;
}

.body-container.mercury .crater-9 {
    --size: .11;
    --x: 60%;
    --y: 18%;
}

.body-container.mercury .crater-10 {
    --size: .1;
    --x: 42%;
    --y: 70%;
}

.body-container.mercury .crater-11 {
    --size: .14;
    --x: 75%;
    --y: 65%;
}

.body-container.mercury .crater-12 {
    --size: .2;
    --x: 86%;
    --y: 60%;
}

.body-container.mercury .crater-13 {
    --size: .15;
    --x: 76%;
    --y: 73%;
}

.body-container.mercury .crater-14 {
    --size: .14;
    --x: 20%;
    --y: 50%;
}

.body-container.mercury .crater-15 {
    --size: .17;
    --x: 27%;
    --y: 22%;
}

.body-container.mercury .crater-16 {
    --size: .11;
    --x: 16%;
    --y: 73%;
}

.body.venus {
    --size: 4dvmin;
    --color-1: #eed;
    --color-2: #553;
    --astronomical-unit: calc(var(--venus-orbit-size) / 2);
    --orbit-progress: -4s;
}

.body.sun {
    --size: 6dvmin;
    --color-1: #fb3;
    --color-2: yellow;
    --astronomical-unit: calc(var(--sun-orbit-size) / 2);
    --orbit-progress: var(--sun-orbit-progress);
    box-shadow: 0 0 1dvmin .2dvmin #ffd, 0 0 3dvmin 1dvmin #fa3;
    animation: var(--anim-body-reveal), var(--anim-body-index), var(--anim-body-move-x), var(--anim-body-move-y);
}

.body-container.mars {
    --size: 3dvmin;
    --color-1: darkorange;
    --color-2: #750;
    --astronomical-unit: calc(var(--mars-orbit-size) / 2);
    --orbit-progress: -8s;
    overflow: hidden;
}

.body-container.mars .ice-cap {
    position: absolute;
    width: calc(var(--size) / 2.5);
    height: calc(var(--size) / 2.5);
    top: 0;
    left: 50%;
    translate: -50% -40%;
    rotate: x var(--pov);
    background: radial-gradient( circle at center, #fff8, transparent);
    mix-blend-mode: overlay;
    border-radius: 50%;
    clip-path: polygon( 0 0, 30% 0, 32% 40%, 34% 0, 60% 0, 82% 60%, 84% 5%, 90% 25%, 70% 27%, 88% 30%, 95% 70%, 60% 71%, 93% 76%, 100% 100%, 66% 66%, 33% 90%, 0 100%);
    animation: mars-ice-cap var(--day) linear infinite;
}

@keyframes mars-ice-cap {
    to {
        transform: rotate(-1turn);
    }
}

.body-container.mars::before,
.body-container.mars::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    filter: blur(1.33dvmin);
    background: #1a1300ff;
    mix-blend-mode: hard-light;
    animation: mars-surface var(--day) linear infinite;
}

@keyframes mars-surface {
    from {
        transform: translateX(-200%);
    }
    to {
        transform: translateX(200%);
    }
}

.body-container.mars::before {
    translate: -10% -20%;
    width: calc(var(--size) / 3.5);
    height: calc(var(--size) / 1.8);
    clip-path: polygon( 5% 19%, 32% 32%, 65% 39%, 83% 38%, 98% 48%, 90% 65%, 78% 64%, 66% 77%, 56% 69%, 47% 67%, 32% 72%, 19% 76%, 8% 68%, 4% 53%, 2% 39%);
}

.body-container.mars::after {
    translate: -70% -40%;
    width: calc(var(--size) / 2.6);
    height: calc(var(--size) / 3.5);
    clip-path: polygon( 5% 19%, 32% 32%, 65% 39%, 83% 38%, 98% 48%, 90% 65%, 78% 64%, 66% 77%, 56% 69%, 47% 67%, 32% 72%, 19% 76%, 8% 68%, 4% 53%, 2% 39%);
}

.body.jupiter {
    --size: 5dvmin;
    --color-1: #cfbfaa;
    --color-2: #321;
    --astronomical-unit: calc(var(--jupiter-orbit-size) / 2);
    --orbit-progress: -6s;
}

.body.jupiter::after {
    --great-red-spot-width: calc(var(--size) / 8);
    --great-red-spot-height: calc(var(--size) / 10);
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 calc(var(--size) / 5) var(--color-1);
    background: linear-gradient( to bottom, transparent 16%, #6526 22%, #6526 26%, transparent 30%, #652a 32%, #652a 42%, transparent 44%, transparent 53%, #652a 58%, #652a 70%, transparent 71%), radial-gradient( ellipse var(--great-red-spot-width) var(--great-red-spot-height) at 70% 68%, #420b, transparent), radial-gradient( ellipse calc(var(--great-red-spot-width) / 2.5) calc(var(--great-red-spot-height) / 2.5) at 80% 38%, #febb, transparent), radial-gradient( ellipse calc(var(--great-red-spot-width) / 2) calc(var(--great-red-spot-height) / 2) at 45% 40%, #febb, transparent), radial-gradient( ellipse calc(var(--great-red-spot-width) / 1.8) calc(var(--great-red-spot-height) / 1.8) at 30% 36%, #feba, transparent);
    background-size: 200% 100%;
    background-position: center center;
    mix-blend-mode: overlay;
    animation: jupiter-clouds var(--day) -12.5s linear infinite;
}

@keyframes jupiter-clouds {
    from {
        background-position-x: left;
    }
    to {
        background-position-x: -200%;
    }
}

.body-container.saturn {
    --size: 5dvmin;
    --color-1: #cb9;
    --color-2: #531;
    --astronomical-unit: calc(var(--saturn-orbit-size) / 2);
    --orbit-progress: -1.5s;
    --ring-a-size: 180%;
    --ring-a-color: var(--color-1);
    --ring-b-size: 200%;
    --ring-b-color: var(--color-1);
}

.body-container.saturn .body-copy,
.body-container.saturn .storms {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
}

.body-container.saturn .storms {
    overflow: hidden;
}

.body-container.saturn .storm {
    position: absolute;
    width: var(--size);
    height: var(--size);
    top: 0;
    left: 50%;
    translate: -50% var(--y);
    rotate: x var(--pov);
    border-radius: inherit;
    mix-blend-mode: overlay;
    clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
    background: var(--bg);
    filter: blur(var(--fuzz));
}

.body-container.saturn .storm:nth-child(1) {
    --y: -60%;
    --fuzz: .1dvmin;
    --bg: radial-gradient( circle at center, transparent 20%, #1323 40%, transparent);
}

.body-container.saturn .storm:nth-child(2) {
    --y: -35%;
    --fuzz: .1dvmin;
    --bg: radial-gradient( circle at center, transparent 55%, #3213);
}

.body-container.saturn .storm:nth-child(3) {
    --y: -15%;
    --fuzz: .25dvmin;
    --bg: radial-gradient( circle at center, transparent 25%, #fed2);
}

.body-container.saturn::before,
.body-container.saturn::after,
.body-container.saturn .ring-far {
    position: absolute;
    top: 50%;
    left: 50%;
    rotate: x var(--pov);
    border-radius: 50%;
}

.body-container.saturn::before,
.body-container.saturn::after {
    content: "";
    z-index: 1;
    translate: -50% -50%;
    clip-path: polygon( 0 100%, 100% 100%, 100% 50%, 0 50%);
}

.body-container.saturn .ring-far {
    translate: -50% -49%;
    clip-path: polygon( 0 0, 100% 0, 100% 50%, 0 50%);
}

.body-container.saturn::before,
.body-container.saturn .ring-far.a {
    width: var(--ring-a-size);
    height: var(--ring-a-size);
    background: radial-gradient( circle calc(var(--size) / 1.5) at center, #0000 99.9%, var(--ring-a-color));
}

.body-container.saturn::after,
.body-container.saturn .ring-far.b {
    width: var(--ring-b-size);
    height: var(--ring-b-size);
    background: radial-gradient( circle calc(var(--size) / 1.05) at center, #0000 99.9%, var(--ring-b-color));
}

.body-container.saturn .shadow {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    background: radial-gradient( ellipse calc(var(--size) / 1.4) calc(var(--size) / 1.4 * 3) at center, #0000 18%, #000 18.1%);
    width: 100%;
    height: 75%;
    transform-style: preserve-3d;
    transform-origin: left center;
    rotate: x var(--pov);
    translate: 0 -50%;
    border-radius: 30%;
    border-top-right-radius: 50% 90%;
    border-bottom-right-radius: 50% 90%;
    clip-path: polygon( 50% 0, 100% 0, 100% 100%, 50% 100%);
    animation: saturn-shadow var(--day) -2s linear infinite;
}

@keyframes saturn-shadow {
    from,
    40%,
    to {
        opacity: 0.8;
    }
    50%,
    90% {
        opacity: 0.7;
    }
    to {
        transform: rotateZ(-1turn);
    }
    7.8%,
    43.5% {
        z-index: 0;
    }
    43.6% {
        z-index: 2;
    }
}

.body-container.nebula {
    --size: .25dvmin;
    --color-1: white;
    --color-2: white;
    --astronomical-unit: calc(var(--stars-orbit-size) / 2);
    --orbit-progress: -12s;
    --part-width: calc(var(--size) * 30);
    --part-height: calc(var(--size) * 20);
    --center-size: calc(var(--size) * 40);
    --part-bg-1: #4ad8;
    --part-bg-2: #b50a;
    --part-bg-3: #ec2a;
}

.body-container.nebula .body-copy {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: inherit;
    width: 100%;
    height: 100%;
    width: var(--center-size);
    height: var(--center-size);
    translate: -50% -50%;
    background: inherit;
    background: radial-gradient( ellipse calc(var(--center-size) / 1.25) calc(var(--center-size) / 2) at center, transparent 20%, #fff3, transparent 60%);
}

.body-container.nebula .body-copy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--size));
    height: calc(var(--size));
    animation: nebula-stars-twinkle 3s linear infinite;
}

@keyframes nebula-stars-twinkle {
    from,
    27%,
    40%,
    60%,
    73%,
    to {
        box-shadow: -2dvmin -1.1dvmin 0 #fff2, -3.4dvmin -1dvmin 0 #fff4, -1.5dvmin -.5dvmin 0 #fff3, -1dvmin 1.3dvmin 0 #fff4, -4.2dvmin 1dvmin 0 #fff1, -1.5dvmin .5dvmin 0 #fff1, .6dvmin -.6dvmin 0 #fff2, 1.9dvmin -1.4dvmin 0 #fff3, 2.5dvmin -1dvmin 0 #fff4, 1.5dvmin .5dvmin 0 #fff5, 1.8dvmin 1.25dvmin 0 #fff2, 3dvmin .9dvmin 0 #fff3;
    }
    33%,
    66% {
        box-shadow: -2dvmin -1.1dvmin 0 #fff4, -3.4dvmin -1dvmin 0 #fff5, -1.5dvmin -.5dvmin 0 #fff4, -1dvmin 1.3dvmin 0 #fff2, -4.2dvmin 1dvmin 0 #fff2, -1.5dvmin .5dvmin 0 #fff4, .6dvmin -.6dvmin 0 #fff6, 1.9dvmin -1.4dvmin 0 #fff4, 2.5dvmin -1dvmin 0 #fff5, 1.5dvmin .5dvmin 0 #fff3, 1.8dvmin 1.25dvmin 0 #fff4, 3dvmin .9dvmin 0 #fff7;
    }
}

.body-container.nebula .part {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: calc(-50% + var(--part-distance)) -50%;
    width: var(--part-width);
    height: var(--part-height);
    border-radius: 100%;
    filter: blur(.2dvmin);
    background: linear-gradient( var(--part-side), var(--part-bg-1) 15%, var(--part-bg-2), transparent), linear-gradient( to bottom, var(--part-bg-3), transparent 20%, transparent 80%, var(--part-bg-3)), radial-gradient( circle at center, transparent 50%, var(--part-bg-3));
}

.body-container.nebula .part.a {
    --part-side: to left;
    --part-distance: -20%;
}

.body-container.nebula .part.b {
    --part-side: to right;
    --part-distance: 20%;
}

.body-container.galaxy {
    --size: .5dvmin;
    --color-1: white;
    --color-2: white;
    --astronomical-unit: calc(var(--stars-orbit-size) / 2);
    --orbit-progress: -5s;
    --evolution-speed: calc(var(--day) / 3);
    --arm-thickness: .6dvmin;
}

.body-container.galaxy .arms {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    animation: galaxy-rotation 5s linear infinite;
}

@keyframes galaxy-rotation {
    to {
        transform: rotate(1turn);
    }
}

.body-container.galaxy .arm {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: calc(-42% + var(--i) * -15%) calc(-42% + var(--i) * -15%);
    rotate: calc(var(--i) * 180deg);
}

 :nth-child(1 of :is(.body-container.galaxy .arm)) {
    --i: 0;
}

 :nth-child(2 of :is(.body-container.galaxy .arm)) {
    --i: 1;
}

.body-container.galaxy .arm-depth {
    width: calc(var(--size) * 15);
    height: calc(var(--size) * 15);
    position: relative;
    transform: rotate(.4turn);
    animation: galaxy-evolution var(--evolution-speed) ease-in-out infinite;
}

@keyframes galaxy-evolution {
    50% {
        transform: rotate(.6turn);
    }
}

.body-container.galaxy .arm-depth::before {
    --arm-color: hsl( calc(245 + var(--d) * 20), 30%, calc(60% + var(--d) * 5%));
    content: "";
    position: absolute;
    inset: 0;
    border-top: var(--arm-thickness) solid var(--arm-color);
    border-right: var(--arm-thickness) solid var(--arm-color);
    border-radius: 100%;
    filter: blur(.2dvmin);
}

.body-container.galaxy .arm-depth::after {
    content: "";
    position: absolute;
    width: calc(var(--size) / 3);
    height: calc(var(--size) / 3);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    box-shadow: .8dvmin 0 2dvmin 0 brown, -.8dvmin 0 2dvmin 0 brown, 0 1.6dvmin 1dvmin 0 orange, 0 -1.6dvmin 1dvmin 0 orange, 2.4dvmin 0 .15dvmin 0 white, -2.4dvmin 0 .15dvmin 0 #fe9, 0 3.2dvmin .15dvmin 0 white, 0 -3.2dvmin .15dvmin 0 #aaf;
    animation: galaxy-stars-dim var(--evolution-speed) ease-in-out infinite;
}

@keyframes galaxy-stars-dim {
    15%,
    35%,
    65%,
    85% {
        opacity: .6;
    }
    25%,
    75% {
        opacity: 0;
    }
}

.body-container.galaxy .arm-depth .arm-depth {
    position: absolute;
    width: 61.8%;
    height: 61.8%;
    bottom: 6%;
    right: 5%;
}