.home-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.home-hero__copy {
  z-index: 3;
}

.hero-scene {
  pointer-events: none;
}

.space-scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.space-scene::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 7% 72%, rgba(234, 251, 255, 0.72) 0 0.06rem, transparent 0.09rem),
    radial-gradient(circle at 16% 38%, rgba(103, 234, 255, 0.5) 0 0.05rem, transparent 0.09rem),
    radial-gradient(circle at 32% 83%, rgba(149, 104, 255, 0.62) 0 0.06rem, transparent 0.1rem),
    radial-gradient(circle at 46% 23%, rgba(234, 251, 255, 0.56) 0 0.05rem, transparent 0.08rem),
    radial-gradient(circle at 58% 68%, rgba(103, 234, 255, 0.42) 0 0.05rem, transparent 0.09rem),
    radial-gradient(circle at 72% 13%, rgba(234, 251, 255, 0.68) 0 0.06rem, transparent 0.1rem),
    radial-gradient(circle at 84% 78%, rgba(149, 104, 255, 0.5) 0 0.06rem, transparent 0.1rem),
    radial-gradient(circle at 94% 34%, rgba(234, 251, 255, 0.46) 0 0.05rem, transparent 0.09rem);
  content: "";
  opacity: 0.72;
}

#particle-flow {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.88;
}

.particle-fallback #particle-flow {
  display: none;
}

.saturn-system {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: clamp(-3rem, -1vw, 0rem);
  width: clamp(21rem, 40vw, 35rem);
  aspect-ratio: 1;
  --saturn-equator-angle: -10deg;
  --planet-layout-mode: desktop;
  transform: translateY(-50%);
}

.saturn-halo {
  position: absolute;
  z-index: 0;
  top: 16%;
  left: 19%;
  width: 62%;
  aspect-ratio: 43 / 38;
  border-radius: 50%;
  background: radial-gradient(ellipse at 28% 30%, rgba(104, 217, 244, 0.11), rgba(22, 58, 87, 0.04) 42%, transparent 70%);
  filter: blur(1.25rem);
  transform: scale(1.08);
}

.saturn {
  position: absolute;
  z-index: 2;
  top: 16%;
  left: 19%;
  width: 62%;
  aspect-ratio: 43 / 38;
  overflow: hidden;
  border-radius: 50%;
  background: #17132c;
  box-shadow: inset -1.1rem -0.7rem 2.7rem rgba(7, 9, 20, 0.78);
}

.planet-static-surface,
#planet-surface,
.saturn-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.planet-static-surface {
  z-index: 1;
  background:
    radial-gradient(ellipse 32% 16% at 43% 38%, rgba(91, 87, 157, 0.22) 0%, rgba(70, 72, 141, 0.15) 45%, rgba(34, 46, 104, 0.08) 72%, transparent 100%),
    repeating-linear-gradient(180deg, rgba(70, 72, 141, 0.72) 0 6%, rgba(58, 66, 132, 0.74) 9% 14%, rgba(43, 57, 117, 0.8) 17% 23%, rgba(72, 64, 133, 0.7) 26% 31%, rgba(29, 42, 94, 0.84) 35% 41%);
  transform: rotate(var(--saturn-equator-angle)) scale(1.08);
}

#planet-surface {
  z-index: 2;
  display: block;
  opacity: 0;
  --planet-equator-angle: var(--saturn-equator-angle);
  transition: opacity 200ms ease-out;
}

.planet-ready #planet-surface { opacity: 1; }
.planet-fallback #planet-surface { display: none; }

.saturn-light {
  z-index: 3;
  background:
    radial-gradient(ellipse at 24% 25%, rgba(146, 166, 232, 0.18), transparent 29%),
    radial-gradient(ellipse at 27% 37%, transparent 0 25%, rgba(7, 9, 20, 0.15) 54%, rgba(7, 9, 20, 0.93) 100%),
    linear-gradient(112deg, rgba(7, 9, 20, 0.18), transparent 31% 58%, rgba(7, 9, 20, 0.55));
  box-shadow: inset 0.13rem 0.1rem 0 rgba(104, 217, 244, 0.38), inset -0.2rem -0.15rem 0.5rem rgba(7, 9, 20, 0.7);
}

.saturn-ring {
  position: absolute;
  left: -9%;
  width: 118%;
  height: 23%;
  --ring-inner-stop: 90.5%;
  border-radius: 50%;
  background: radial-gradient(ellipse closest-side,
    transparent 0 var(--ring-inner-stop),
    rgba(23, 19, 44, 0.58) 91%,
    rgba(86, 52, 89, 0.24) 93%,
    rgba(105, 94, 164, 0.1) 94.2%,
    rgba(22, 58, 87, 0.5) 96%,
    rgba(23, 19, 44, 0.46) 98%,
    rgba(104, 217, 244, 0.24) 99.2%,
    transparent 100%);
  transform: rotate(var(--saturn-equator-angle));
}

.saturn-ring--back {
  z-index: 1;
  top: 40%;
  clip-path: inset(0 0 49% 0);
  opacity: 0.7;
}

.saturn-ring--front {
  z-index: 3;
  top: 40%;
  clip-path: inset(51% 0 0 0);
  opacity: 0.86;
}

@media (max-width: 760px) {
  .home-hero__copy {
    max-width: min(92%, 33rem);
  }

  .saturn-system {
    top: auto;
    right: clamp(-8rem, -18vw, -3.5rem);
    bottom: -2rem;
    width: clamp(19rem, 86vw, 28rem);
    --planet-layout-mode: mobile;
    transform: none;
  }

  #particle-flow {
    opacity: 0.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  #planet-surface {
    transition: none;
  }
}