/* public/styles.css
   Continuous, organic wave utilities with smooth blending.
   Optimized for both light and dark themes using transparent backgrounds.
*/

.bg-waves {
  /* Inherit the page's native background gradient */
  background-color: transparent;

  /* Layer two continuous sine waves with different scales and opacities */
  background-image:
    /* Layer 1: Smaller, slightly more visible */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'%3E%3Cpath d='M0 20 Q 50 -10 100 20 T 200 20' fill='none' stroke='%232dd4bf' stroke-width='1' stroke-opacity='0.08'/%3E%3C/svg%3E"),
    /* Layer 2: Larger, softer, offset */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'%3E%3Cpath d='M0 20 Q 50 -10 100 20 T 200 20' fill='none' stroke='%232dd4bf' stroke-width='1.5' stroke-opacity='0.04'/%3E%3C/svg%3E");

  background-repeat: repeat;

  /* Vary the sizes and offset the positions to create organic depth */
  background-size:
    240px 80px,
    400px 120px;
  background-position:
    0 0,
    120px 40px;

  /* Smoothly fade the waves out at the edges so they blend flawlessly into the section */
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* Because the background is now transparent, we just let it be for dark mode */
.dark .bg-waves {
  background-color: transparent;
}

/* Updated pure CSS ripple fallback to match the transparent/blended aesthetic */
.bg-ripples {
  background-color: transparent;
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(45, 212, 191, 0.05) 1%,
    transparent 60%
  );
  background-size: 160px 160px;
  background-repeat: repeat;
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* A single-layer, wider version for when you just want a whisper of a wave */
.bg-waves-soft {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'%3E%3Cpath d='M0 20 Q 50 -10 100 20 T 200 20' fill='none' stroke='%232dd4bf' stroke-width='1' stroke-opacity='0.035'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 320px 100px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 50%, transparent 90%);
  mask-image: radial-gradient(ellipse at center, black 50%, transparent 90%);
}