/* Pure CSS for Vanilla JS Waves Implementation */

.waves-bg {
  position: fixed;
  inset: 0;
  z-index: -1; /* ✅ Background layer */
  pointer-events: none;
  background: transparent;
  overflow: hidden;
}

.waves-canvas {
  display: block !important;
  width: 100%;
  height: 100%;
  background: transparent;
  pointer-events: none !important;
  touch-action: pan-y; /* Allow vertical scrolling */
  image-rendering: optimizeSpeed;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  z-index: -1; /* ✅ Same as container - background layer */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optional: Add a subtle cursor indicator */
.waves-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: rgba(37, 99, 235, 0.4);
  border-radius: 50%;
  transform: translate3d(calc(var(--x, 0px) - 0.25rem), calc(var(--y, 0px) - 0.25rem), 0);
  will-change: transform;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.waves-bg:hover::before {
  opacity: 1;
}