/* Hero Section Styles */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-light);
  position: relative;
  overflow: hidden;
  padding-left: 200px; /* Add left padding to prevent TOC overlap */
  padding-right: 100px; /* Add right to center content on page */
}

.hero > .container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.hero-content {
  padding: 2rem 1rem;
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}

.cta-buttons {
  margin: 2rem auto 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 400px;
}

/* Hero constellation container */
.hero-constellation {
  flex: 1;
  min-width: 300px;
  min-height: 400px;
  position: relative;
  overflow: visible;
}

/* Component positioning and animation */
.component-item {
  position: absolute;
  transition: transform 0.3s ease;
  animation: float 6s ease-in-out infinite;
}

/* Floating animation for components with random delays and durations */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(1deg); }
}

/* Apply unique animation to each component */
.component-item {
  animation: float var(--float-duration, 6s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

/* Individual component animations */
.component-item:nth-child(1) { --float-duration: 8s; --float-delay: -1s; }
.component-item:nth-child(2) { --float-duration: 7s; --float-delay: -2s; }
.component-item:nth-child(3) { --float-duration: 9s; --float-delay: -3s; }
.component-item:nth-child(4) { --float-duration: 8.5s; --float-delay: -1.5s; }
.component-item:nth-child(5) { --float-duration: 7.5s; --float-delay: -2.5s; }
.component-item:nth-child(6) { --float-duration: 6.5s; --float-delay: -3.5s; }
.component-item:nth-child(7) { --float-duration: 6s; --float-delay: -0.5s; }
.component-item:nth-child(8) { --float-duration: 4s; --float-delay: -4; }
.component-item:nth-child(9) { --float-duration: 5s; --float-delay: -3.5s; }
.component-item:nth-child(10) { --float-duration: 4.5s; --float-delay: -4.5s; }

/* Mobile responsive adjustments for hero */
@media (max-width: 768px) {
  .hero {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .hero-constellation {
    min-height: 300px;
  }
}