/* Wave Animation Styles */

/* Make the body background transparent so our canvas shows through */
body {
  background: transparent !important;
}

/* Override original background styles that might interfere */
#hero, #om-oss, footer {
  background: transparent !important;
}

/* Add a subtle transition for elements that appear as you scroll */
.animate-section {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Add depth to feature cards - make them stand out from the wave background */
#funksjoner .bg-white {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#funksjoner .bg-white:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* Enhance arc elements to work well with the wave background */
.arc {
  opacity: 0.15; /* More subtle opacity */
  mix-blend-mode: soft-light; /* Softer blending mode */
}

/* Add a subtle shadow to text elements to improve readability over the wave background */
h1, h2, h3, p, a, li {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}