/* ---------- Types ---------- */

.rotating-planets--type-1 .rotating-planets__planet-1 {
    right: 20%;
    bottom: 20%;
}

.rotating-planets--type-1 .rotating-planets__planet-2 {
    left: 10%;
    top: 30%;
}

.rotating-planets--type-1 .rotating-planets__planet-3 {
    right: 20%;
    top: 20%;
}

/* -- */

.rotating-planets--type-2 .rotating-planets__planet-1 {
    right: 20%;
    top: 20%;
}

.rotating-planets--type-2 .rotating-planets__planet-2 {
    left: 20%;
    top: 20%;
}

.rotating-planets--type-2 .rotating-planets__planet-3 {
    left: 20%;
    top: 60%;
    animation: planet-3--counter-clockwise 45s linear infinite;
}

body.home .rotating-planets__planet-3 {
    display: none;
}

/* -- */

.rotating-planets--type-3 .rotating-planets__planet-1 {
    left: 20%;
    bottom: 25%;
    animation: planet-1--counter-clockwise 45s linear infinite;
}

.rotating-planets--type-3 .rotating-planets__planet-2 {
    right: 20%;
    top: 60%;
    animation: planet-2--counter-clockwise 45s linear infinite;
}

.rotating-planets--type-3 .rotating-planets__planet-3 {
    left: 20%;
    top: 20%;
}


/* ---------- Planets ---------- */

.rotating-planets__planet-1 {
    position: absolute;
    width: 32px;
    height: 32px;
    background: #00F0B3;
    border-radius: 100%;
    z-index: 1;

    animation: planet-1 20s linear infinite;
}

.rotating-planets__planet-2 {
    position: absolute;
    width: 64px;
    height: 64px;
    background: #00F0B3;
    border-radius: 100%;
    z-index: 1;

    animation: planet-2 25s linear infinite;
}

.rotating-planets__planet-3 {
    position: absolute;
    width: 128px;
    height: 128px;
    background: #00F0B3;
    border-radius: 100%;
    z-index: 1;
    animation: planet-3 45s linear infinite;
}


/* ---------- Animation ---------- */
@keyframes planet-1 {
    from { transform: rotate(0deg) translateX(64px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(64px) rotate(-360deg); }
}

@keyframes planet-2 {
    from { transform: rotate(0deg) translateX(64px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(64px) rotate(-360deg); }
}

@keyframes planet-3 {
    from { transform: rotate(0deg) translateX(64px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(64px) rotate(-360deg); }
}

@keyframes planet-1--counter-clockwise {
    from { transform: rotate(360deg) translateX(64px) rotate(0deg); }
    to   { transform: rotate(0deg) translateX(64px) rotate(-360deg); }
}

@keyframes planet-2--counter-clockwise {
    from { transform: rotate(360deg) translateX(64px) rotate(0deg); }
    to   { transform: rotate(0deg) translateX(64px) rotate(-360deg); }
}

@keyframes planet-3--counter-clockwise {
    from { transform: rotate(360deg) translateX(64px) rotate(0deg); }
    to   { transform: rotate(0deg) translateX(64px) rotate(-360deg); }
}