/********************************************************
  1) Planet Reverse Arrival
     - We override the transform from home.css on load
       to start bigger (scale 3).
     - Then, when we add the ".reverse" class, we revert
       to the normal scale(1.5) from home.css.
********************************************************/
#planetSpline {
  transform: scale(3) !important;
  /* start bigger */
  transition: transform 2.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#planetSpline.reverse {
  transform: scale(1.2) !important;
  /* match home.css final */
}

/********************************************************
    2) Purple Overlay
       - Fullscreen overlay, starts fully opaque (opacity: 1).
       - When ".reverse" is added, fades out to 0.
  ********************************************************/
.space-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;

  /* Fully opaque deep-purple gradient */
  background: radial-gradient(circle at center,
      #1a001a 0%,
      #000000 100%);

  opacity: 1;
  transition: opacity 2.5s ease-in-out;
}

.space-overlay.reverse {
  opacity: 0;
}

/********************************************************
    3) Hero Text Fade-In (Optional)
       - If you want the text hidden at first, fade in
         once ".reverse" is triggered.
       - If you prefer the text always visible, remove this.
  ********************************************************/
.hero-text {
  opacity: 0;
  /* start hidden */
  transition: opacity 2.5s ease-in-out;
}

.hero-text.reverse {
  opacity: 1;
}