/* Advanced Hero Animation Styles for SolanaForge */
#hero-animation-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none; /* Allow clicking through the canvas */
  opacity: 0.9; /* Slightly reduce opacity to blend with background */
}

/* Ensure hero section is set up to contain the animation */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #030d43 0%, #02072b 50%, #061254 100%);
}

/* Make sure hero content stays on top of animation */
.hero .container {
  position: relative;
  z-index: 3;
}

/* Enhanced text styles for better readability over the animation */
.hero h1, 
.hero h2,
.hero p,
.hero .button {
  position: relative;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Add a subtle overlay to ensure text readability */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(3, 13, 67, 0) 30%, rgba(2, 7, 43, 0.5) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Add subtle glow to important UI elements */
.hero .button {
  position: relative;
  z-index: 5;
  transition: all 0.3s ease;
}

.hero .button:hover {
  box-shadow: 0 0 15px rgba(73, 98, 233, 0.6);
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .hero::before {
    background: radial-gradient(circle at center, rgba(3, 13, 67, 0.1) 10%, rgba(2, 7, 43, 0.6) 100%);
  }
  
  /* Increase text shadow on mobile for better readability */
  .hero h1, 
  .hero h2,
  .hero p {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  }
}