.mh-iso-sep__stars {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  animation: mh-iso-stars-fade var(--mh-iso-cycle-duration, 120s) linear infinite;
  animation-delay: var(--mh-iso-cycle-delay, 0s);
  --mh-iso-stars-solid-end: clamp(18%, calc(var(--mh-iso-top-dark-fade, 32%) + 12%), 68%);
  --mh-iso-stars-fade-end: calc(var(--mh-iso-stars-solid-end) + 22%);
  -webkit-mask-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) var(--mh-iso-stars-solid-end),
      rgba(0, 0, 0, 0.6) calc(var(--mh-iso-stars-solid-end) + 10%),
      rgba(0, 0, 0, 0) var(--mh-iso-stars-fade-end)
    );
  mask-image:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) var(--mh-iso-stars-solid-end),
      rgba(0, 0, 0, 0.6) calc(var(--mh-iso-stars-solid-end) + 10%),
      rgba(0, 0, 0, 0) var(--mh-iso-stars-fade-end)
    );
}

.mh-iso-sep__stars-rotor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% * var(--mh-iso-stars-rotor-scale, 1.9));
  height: calc(100% * var(--mh-iso-stars-rotor-scale, 1.9));
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  pointer-events: none;
  animation: mh-iso-stars-rotate var(--mh-iso-cycle-duration-2, 240s) linear infinite;
  animation-delay: var(--mh-iso-cycle-delay-2, 0s);
}

.mh-iso-sep__stars-rotor--png {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.mh-iso-sep__celestial {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
  opacity: var(--mh-iso-show-celestial, 1);
}

.mh-iso-sep__orbiter {
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 0;
  height: var(--mh-iso-celestial-orbit-height, 124%);
  transform-origin: 50% 100%;
  will-change: transform;
}

.mh-iso-sep__orbiter--sun {
  animation: mh-iso-sun-orbit var(--mh-iso-cycle-duration, 120s) linear infinite;
  animation-delay: var(--mh-iso-cycle-delay, 0s);
}

.mh-iso-sep__orbiter--moon {
  animation: mh-iso-moon-orbit var(--mh-iso-cycle-duration, 120s) linear infinite;
  animation-delay: var(--mh-iso-cycle-delay, 0s);
}

.mh-iso-sep__body {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  border-radius: 50%;
  will-change: transform, opacity;
}

.mh-iso-sep__body--sun {
  width: clamp(26px, 4.4vw, 58px);
  height: clamp(26px, 4.4vw, 58px);
  background:
    radial-gradient(circle at 34% 34%, rgba(255, 251, 232, 0.98) 0%, rgba(255, 231, 129, 0.94) 36%, rgba(255, 187, 61, 0.92) 72%, rgba(233, 133, 15, 0.86) 100%);
  box-shadow:
    0 0 0 0.8px rgba(255, 243, 189, 0.74),
    0 0 18px rgba(255, 198, 82, 0.58),
    0 0 36px rgba(255, 169, 44, 0.35);
  animation:
    mh-iso-sun-visibility var(--mh-iso-cycle-duration, 120s) linear infinite,
    mh-iso-celestial-pulse 7.8s ease-in-out infinite;
  animation-delay: var(--mh-iso-cycle-delay, 0s), 0s;
}

.mh-iso-sep__body--moon {
  width: clamp(22px, 3.9vw, 52px);
  height: clamp(22px, 3.9vw, 52px);
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.98) 0%, rgba(230, 238, 255, 0.94) 48%, rgba(171, 185, 220, 0.9) 100%);
  box-shadow:
    0 0 0 0.8px rgba(214, 224, 245, 0.65),
    0 0 14px rgba(166, 184, 232, 0.46),
    0 0 28px rgba(113, 139, 215, 0.28);
  animation:
    mh-iso-moon-visibility var(--mh-iso-cycle-duration, 120s) linear infinite,
    mh-iso-celestial-pulse 9.4s ease-in-out infinite;
  animation-delay: var(--mh-iso-cycle-delay, 0s), 0s;
}

.mh-iso-sep__body--moon::after {
  content: '';
  position: absolute;
  inset: 22% 28% 34% 24%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(145, 160, 196, 0.38), rgba(145, 160, 196, 0.06));
}

@keyframes mh-iso-sun-orbit {
  from { transform: translateX(-50%) rotate(-135deg); }
  to { transform: translateX(-50%) rotate(225deg); }
}

@keyframes mh-iso-moon-orbit {
  from { transform: translateX(-50%) rotate(45deg); }
  to { transform: translateX(-50%) rotate(405deg); }
}

@keyframes mh-iso-sun-visibility {
  0% { opacity: 0; }
  12% { opacity: 0; }
  22% { opacity: 0.82; }
  34% { opacity: 0.98; }
  62% { opacity: 0.98; }
  74% { opacity: 0.18; }
  82% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes mh-iso-moon-visibility {
  0% { opacity: 0.95; }
  16% { opacity: 0.95; }
  28% { opacity: 0.25; }
  36% { opacity: 0; }
  64% { opacity: 0; }
  74% { opacity: 0.35; }
  86% { opacity: 0.95; }
  100% { opacity: 0.95; }
}

@keyframes mh-iso-celestial-pulse {
  0% { transform: translateX(-50%) scale(0.98); }
  50% { transform: translateX(-50%) scale(1.03); }
  100% { transform: translateX(-50%) scale(0.98); }
}

@keyframes mh-iso-stars-fade {
  0% { opacity: 1; }
  12% { opacity: 0.94; }
  24% { opacity: 0.3; }
  38% { opacity: 0.06; }
  62% { opacity: 0.06; }
  76% { opacity: 0.34; }
  88% { opacity: 0.9; }
  100% { opacity: 1; }
}

@keyframes mh-iso-stars-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  to { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}

.mh-iso-sep__star {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(221, 235, 255, 0.82) 58%, rgba(200, 220, 255, 0) 100%);
  box-shadow: 0 0 4px rgba(189, 213, 255, 0.42);
  animation: mh-iso-star-twinkle var(--mh-iso-star-twinkle-duration, 3.2s) ease-in-out infinite;
  animation-delay: var(--mh-iso-star-twinkle-delay, 0s);
}

.mh-iso-sep__star--bright {
  box-shadow:
    0 0 5px rgba(229, 240, 255, 0.55),
    0 0 9px rgba(197, 218, 255, 0.38);
}

@keyframes mh-iso-star-twinkle {
  0% { transform: scale(0.88); }
  40% { transform: scale(1.15); }
  100% { transform: scale(0.9); }
}