/* Saturn container */
.saturn-container {
  width: fit-content;
  height: 96px;
  display: grid;
  place-content: center;
  /* overflow: hidden; */
}

/* Main saturn element */
.saturn {
  transform: rotate(-15deg) scale(0.32);
  height: fit-content;
  width: fit-content;
  display: grid;
  justify-content: center;
  margin: -38px -75px;
}

/* Planet sections (top and bottom halves) */
.saturn .planet_top,
.saturn .planet_bottom {
  width: 300px;
  height: 150px;
  position: relative;
  display: flex;
  overflow: hidden;
}

.saturn .planet_top {
  z-index: 3;
  transform: translateY(2px);
}

.saturn .planet_top .planet {
  top: 100%;
}

.saturn .planet_bottom {
  z-index: 1;
}

.saturn .planet_bottom .planet {
  top: 0%;
}

/* Ring container */
.saturn .ring-container {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%);
}

/* CSS custom property for animation angle */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* Planet sphere */
.planet {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: linear-gradient(
    0deg,
    rgba(255, 199, 200, 1) 0%,
    rgba(253, 227, 195, 1) 14%,
    rgba(214, 255, 199, 1) 28%,
    rgba(199, 232, 255, 1) 42%,
    rgba(197, 233, 255, 1) 56%,
    rgba(220, 199, 255, 1) 70%,
    rgba(220, 200, 253, 1) 84%
  );
  box-shadow: 0px 0px 14px 4px #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Ring container */
.ring {
  position: relative;
  width: 400px;
  height: 105px;
  display: flex;
  justify-content: center;
}

/* Ring glow effect */
.middle_glow {
  width: 440px;
  height: 110px;
  border: 8px solid white;
  border-radius: 50%;
  position: absolute;
  filter: blur(20px);
  z-index: 1;
}

/* Ring background to hide planet behind */
.middle_back {
  width: 400px;
  height: 156px;
  transform: translateY(-30px);
  border: 45px solid #131313;
  border-radius: 50%;
  position: absolute;
  z-index: 0;
}

/* Animated ring segments */
.middle {
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  border: 5px solid transparent;
  background-image: conic-gradient(
    from var(--angle),
    rgba(154, 118, 180, 1) 0%,
    rgba(221, 134, 185, 1) 10%,
    rgba(244, 151, 170, 1) 20%,
    rgba(249, 180, 139, 1) 30%,
    rgba(253, 205, 121, 1) 40%,
    rgba(255, 244, 145, 1) 50%,
    rgba(184, 216, 130, 1) 60%,
    rgba(131, 204, 178, 1) 70%,
    rgba(106, 203, 222, 1) 80%,
    rgba(115, 171, 222, 1) 90%,
    rgba(154, 118, 180, 1) 100%
  );
  background-origin: border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate-ring 2s linear infinite;
}

/* Ring sizing variants */
.middle.bottom {
  width: 490px;
  aspect-ratio: 400/95;
}

.middle.top {
  width: 370px;
  height: 98px;
  aspect-ratio: 370/98;
}

/* Ring rotation animation */
@keyframes rotate-ring {
  to {
    --angle: 360deg;
  }
}