.home-page .hero {
  background:
    radial-gradient(ellipse at 78% 52%, #152550 0%, transparent 59%),
    linear-gradient(125deg, #070a19 18%, #0c1128 69%, #100d2b);
}

.hero-motion {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}

.hero-motion::before {
  position: absolute;
  top: 50%;
  left: 76%;
  width: min(70vw, 880px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #6b75ff69, #3271fd29 33%, transparent 62%);
  content: "";
}

.hero-motion::after {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 58% 19%, #c7d7ff 0 1px, transparent 2px),
    radial-gradient(circle at 90% 25%, #a892fa 0 1px, transparent 2px),
    radial-gradient(circle at 65% 82%, #9bc8feba 0 1px, transparent 2px),
    radial-gradient(circle at 88% 72%, #bcecff9e 0 1px, transparent 2px),
    radial-gradient(circle at 95% 44%, #bac1ef78 0 1px, transparent 2px);
  content: "";
}

.hero-orbit-system {
  position: absolute;
  top: 51%;
  left: 76%;
  width: clamp(310px, 48vw, 670px);
  aspect-ratio: 1.43;
  transform: translate(-50%, -50%);
}

.hero-orbit {
  --tilt: -27deg;
  --plane: .4;
  --orbit-period: 9s;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 96%;
  aspect-ratio: 1;
  border: 1px solid #779bffd1;
  border-radius: 50%;
  box-shadow: 0 0 13px #4987ffab, inset 0 0 10px #557bff41;
  transform: translate(-50%, -50%) rotate(var(--tilt)) scaleY(var(--plane));
  animation: hero-orbit-tilt var(--orbit-period) ease-in-out infinite alternate;
}

.hero-orbit::before {
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-top-color: #e5f5ff;
  border-bottom-color: #81a6ff;
  border-radius: inherit;
  content: "";
}

.hero-orbit::after {
  position: absolute;
  inset: -11px;
  transform: rotate(var(--spark-angle, 43deg));
  background: radial-gradient(
    ellipse 14px 18px at 50% 11px,
    #f2fcff 0 20%,
    #8bc7ffd1 28%,
    #4079f860 58%,
    transparent 100%
  );
  content: "";
  animation: hero-orbit-spark var(--orbit-period) linear infinite;
}

.hero-orbit:nth-child(2) {
  --tilt: 32deg;
  --plane: .29;
  --orbit-period: 12s;
  --spark-angle: 172deg;
  width: 89%;
  border-color: #a497faad;
  animation-direction: alternate-reverse;
}

.hero-orbit:nth-child(2)::after {
  animation-direction: reverse;
}

.hero-orbit:nth-child(3) {
  --tilt: 86deg;
  --plane: .54;
  --orbit-period: 14s;
  --spark-angle: 263deg;
  width: 61%;
  border-color: #61c4efbd;
}

.hero-light {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 30%;
  aspect-ratio: 1;
  border: 1px solid #bddaffc2;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at 37% 28%,
    #fff 0%,
    #ebfdff 10%,
    #bbdfff 31%,
    #869af2 58%,
    #4a64b8 85%,
    #dae2ff 100%
  );
  box-shadow: 0 11px 40px #5f7aff72, 0 0 82px #638cff8f, inset 0 -8px 25px #8caeffb3;
  animation: hero-light-glow 7s ease-in-out infinite alternate;
}

.hero-light::before {
  position: absolute;
  inset: 5%;
  border-radius: inherit;
  background: radial-gradient(ellipse at 27% 33%, #fff9 0, transparent 43%);
  content: "";
}

@keyframes hero-orbit-spark {
  to { transform: rotate(calc(var(--spark-angle, 43deg) + 1turn)); }
}

@keyframes hero-orbit-tilt {
  to { transform: translate(-50%, -50%) rotate(calc(var(--tilt) + 9deg)) scaleY(var(--plane)); }
}

@keyframes hero-light-glow {
  from { filter: brightness(.98); }
  to { filter: brightness(1.11); }
}

@media (max-width: 700px) {
  .home-page .hero {
    background: radial-gradient(ellipse at 51% 24%, #182a58 0%, #0a1026 49%, #070a19 79%);
  }

  .hero-motion {
    mask-image: linear-gradient(#000 48%, #0007 64%, transparent 82%);
  }

  .hero-orbit-system,
  .hero-motion::before {
    top: var(--hero-motion-mobile-center, 25%);
    left: 50%;
  }

  .hero-orbit-system {
    width: clamp(240px, 67vw, 425px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-light, .hero-orbit, .hero-orbit::after { animation: none; }
}