/* Landing page layout */

.landing {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* fill the screen height */
}

/* Wraps the title + image */
.hero-content {
  text-align: center;
  padding: 6rem 1rem; /* space above/below the content */
}

/* Huge name heading */
.hero-title {
  font-size: clamp(3.2rem, 14.4vw, 11.2rem); /* 20% smaller across breakpoints */
  font-weight: 900;
  letter-spacing: 0.05em;
  color: white;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  white-space: nowrap; /* keep name on one line */
  
  /* fade in after image */
  opacity: 0;
  animation: titleFadeIn 1s ease-in forwards;
  animation-delay: 1s; /* wait for image to appear first */
}

.hero-title:hover {
  /* Letters follow mouse movement */
  cursor: pointer;
}

/* Earth artwork under the heading */
.earth-image {
  display: block;
  width: min(520px, 56vw); /* 20% smaller */
  max-width: 100%;
  margin: -8rem auto 0; /* lowered by ~20% from previous position */
  
  /* image appears first */
  opacity: 0;
  animation: imageFadeIn 1s ease-in forwards;
  animation-delay: 0s; /* starts immediately */
  
  /* hover effect */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.earth-image:hover {
  transform: scale(1.03); /* grow slightly */
  filter: brightness(1.1); /* make it brighter */
}

/* Image fades in first */
@keyframes imageFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px); /* start slightly above */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* move to normal position */
  }
}

/* Text fades in after image */
@keyframes titleFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px); /* start slightly below */
  }
  to {
    opacity: 1;
    transform: translateY(0); /* move to normal position */
  }
}

@media (max-width: 768px) {
  /* Reduce padding on small screens */
  .hero-content {
    padding: 4rem 1rem 5rem;
  }

  /* Smaller heading for mobile */
  .hero-title {
    font-size: clamp(2rem, 12.8vw, 6.4rem); /* 20% smaller */
  }

  /* Narrower earth image on mobile */
  .earth-image {
    width: min(336px, 64vw); /* 20% smaller */
    margin-top: 2.4rem; /* 20% lower on mobile */
  }
}