/* Fixed 3D wave canvas — sits behind all page content, unaffected by scroll.
   `inset: 0` alone stretches a fixed element to the viewport; explicit
   100vw/100vh units are deliberately avoided here since mobile browsers
   recompute `vh` as their address bar hides/shows while scrolling, which
   reads as the canvas visibly jumping. */
#wave-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block;
}

/* Sits directly above the wave (same fixed band, same z-index so paint
   order follows DOM order) and dims it right where plain text is most
   likely to cross it — the vertical middle of the viewport — so copy
   stays readable without boxing every paragraph in a card. Feathered,
   not a hard edge, so it reads as fog rather than a stripe. */
.wave-fog {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 26%,
    rgba(5, 6, 11, 0.55) 40%,
    rgba(5, 6, 11, 0.72) 50%,
    rgba(5, 6, 11, 0.55) 60%,
    transparent 74%,
    transparent 100%
  );
}

/* Mobile: skip the fog entirely and keep the wave at its original
   brightness — the dimmed band was requested for desktop only. */
@media (max-width: 767px) {
  .wave-fog { display: none; }
}

/* Let the wave read through every section as the page's continuous
   background: solid surfaces become translucent, blurred panels instead
   of flat opaque blocks. */
.bg-ink { background-color: rgba(5,6,11,.72) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.bg-inkalt { background-color: rgba(10,13,24,.78) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.bg-surface { background-color: rgba(16,21,42,.8) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bg-surfacehi { background-color: rgba(23,28,54,.82) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }