/* --- 1. Base and Initial State Styles --- */
#hero-image-1,
#hero-image-2,
#hero-image-3,
#hero-image-4,
#hero-image-5 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 50;
  cursor: pointer;

  /* This is now the INITIAL state of the animation */
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) rotate(0deg);

  /* This creates the smooth 1.2s animation for the transform property */
  transition:
    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.5s ease-in-out;
}

/* The star and planet are not clickable, so remove the pointer */
#hero-image-4,
#hero-image-5 {
  cursor: default;
}

#hero-image-6 {
  position: absolute;
  opacity: 0;
  transform: translateX(450px) translateY(50vw) rotate(0deg);
  transition:
    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
    opacity 0.5s ease-in-out;
}

/* --- 2. Final State Styles (Triggered by adding the 'animate-in' class) --- */

/* Base (Mobile) */
#hero-image-1.animate-in {
  opacity: 1;
  --tw-translate-x: -200px;
  --tw-translate-y: -330px;
  --tw-rotate: -10deg;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
    rotate(var(--tw-rotate));
}

#hero-image-2.animate-in {
  opacity: 1;
  --tw-translate-x: 40px;
  --tw-translate-y: 50px;
  --tw-rotate: 13deg;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
    rotate(var(--tw-rotate));
}

#hero-image-3.animate-in {
  opacity: 1;
  display: none;
  --tw-translate-x: 170px;
  --tw-translate-y: -180px;
  --tw-rotate: 7deg;
  transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
    rotate(var(--tw-rotate));
}

#hero-image-4.animate-in {
  opacity: 1;
  --tw-translate-x: 120px;
  --tw-translate-y: -160px;
  --tw-rotate: -5deg;
  transform: translateX(calc(-50% + var(--tw-translate-x)))
    translateY(calc(-50% + var(--tw-translate-y))) rotate(var(--tw-rotate));
}

#hero-image-5.animate-in {
  opacity: 1;
  --tw-translate-x: -130px;
  --tw-translate-y: 240px;
  --tw-rotate: 8deg;
  transform: translateX(calc(-50% + var(--tw-translate-x)))
    translateY(calc(-50% + var(--tw-translate-y))) rotate(var(--tw-rotate));
}

@media screen and (max-width: 639px) {
  #hero-image-6.animate-in {
    display: none;
  }
}

/* --- 3. Responsive Final State Styles (Media Queries) --- */

/* Small screens and up (640px) */
@media (min-width: 640px) {
  #hero-image-1.animate-in {
    --tw-translate-x: -300px;
    --tw-translate-y: -350px;
  }

  #hero-image-2.animate-in {
    --tw-translate-x: -260px;
    --tw-translate-y: 20px;
  }

  #hero-image-3.animate-in {
    display: block;
  }

  #hero-image-4.animate-in {
    --tw-translate-x: 150px;
    --tw-translate-y: -190px;
  }

  #hero-image-5.animate-in {
    --tw-translate-x: -250px;
    --tw-translate-y: -60px;
  }

  #hero-image-6.animate-in {
    opacity: 1;
    --tw-translate-x: 190px;
    --tw-translate-y: 170px;
    --tw-rotate: 0deg;
    transform: translateX(var(--tw-translate-x))
      translateY(var(--tw-translate-y)) rotate(var(--tw-rotate));
  }
}

/* Medium screens and up (768px) */
@media (min-width: 768px) {
  #hero-image-1.animate-in {
    --tw-translate-x: -410px;
    --tw-translate-y: -350px;
  }

  #hero-image-2.animate-in {
    --tw-translate-x: -350px;
    --tw-translate-y: 50px;
  }

  #hero-image-3.animate-in {
    --tw-translate-x: 250px;
    --tw-translate-y: -30px;
  }

  #hero-image-4.animate-in {
    --tw-translate-x: 190px;
    --tw-translate-y: -280px;
  }

  #hero-image-5.animate-in {
    --tw-translate-x: -350px;
  }

  #hero-image-6.animate-in {
    --tw-translate-x: 190px;
    --tw-translate-y: 250px;
    --tw-rotate: 0deg;
  }
}

/* Large screens and up (1024px) */
@media (min-width: 1024px) {
  #hero-image-1.animate-in {
    --tw-translate-y: -360px;
    --tw-translate-x: -450px;
  }

  #hero-image-2.animate-in {
    --tw-translate-x: -440px;
  }

  #hero-image-3.animate-in {
    --tw-translate-x: 340px;
    --tw-translate-y: -180px;
  }

  #hero-image-4.animate-in {
    --tw-translate-y: -300px;
  }

  #hero-image-5.animate-in {
    --tw-translate-x: -425px;
  }

  #hero-image-6.animate-in {
    --tw-translate-x: 320px;
    --tw-translate-y: 250px;
    --tw-rotate: 0deg;
  }
}