/* mouseEffect.css */

/* Hero section with the background image */
.hero {
    background: url('background.png') center center / cover no-repeat;
    background-attachment: fixed; /* Keeps the background fixed when scrolling */
    position: relative;
    overflow: hidden; /* Ensures child elements like ripples stay contained */
    z-index: 1; /* Ensure it's behind the content */
  }
  
  /* Default ripple effect */
.ripple-wave {
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.4); /* White-ish ripple */
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    animation: ripple-animation 1s ease-out forwards;
    z-index: 2; /* Above background, behind text */
  }
  
  /* Stronger ripple effect for hidden logo button */
  .ripple-strong {
    animation: ripple-animation-strong 1s ease-out forwards;
  }
  
  /* Default ripple animation */
  @keyframes ripple-animation {
    to {
      transform: translate(-50%, -50%) scale(10);
      opacity: 0;
    }
  }
  
  /* Stronger ripple animation (larger scale) */
  @keyframes ripple-animation-strong {
    to {
      transform: translate(-50%, -50%) scale(15); /* Larger ripple */
      opacity: 0;
    }
  }