/* ════════════════════════════════════════════════════════════════
   DYNAMISCHE WELLE — WebGL Energy-Flow Background
   Für: Hero-Sections, Deckblätter, Report-Cover
   Brand-Farben: Dark Navy → Deep Blue BG, Cyan → Light Cyan Linien
   
   Einbindung:
   1. CSS: Diese Datei laden
   2. HTML: <canvas id="hero-canvas"></canvas> in den Container
   3. JS:  dynamic-wave.js laden + initWaveShader('hero-canvas') aufrufen
   
   © Dipl.-Ing. Rolf Krause seit 2024
   ════════════════════════════════════════════════════════════════ */

/* Container muss position:relative haben */
.wave-container {
  position: relative;
  overflow: hidden;
  background: var(--dark-navy, #0D3A5C);
}

/* Canvas füllt den Container mit Überstand für weiche Ränder */
.wave-canvas {
  position: absolute;
  top: -40px;
  left: -60px;
  width: calc(100% + 120px);
  height: calc(100% + 80px);
  pointer-events: none;
  z-index: 0;
  border-radius: 32px;
  mask-image: radial-gradient(ellipse 85% 80% at 50% 50%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 50% 50%, black 40%, transparent 100%);
}

/* Variante: Volle Breite ohne Maske (z.B. für schmale Streifen) */
.wave-canvas--full {
  mask-image: none;
  -webkit-mask-image: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* Variante: Nur untere Hälfte (z.B. für Section-Trenner) */
.wave-canvas--bottom {
  top: auto;
  bottom: -20px;
  left: -30px;
  width: calc(100% + 60px);
  height: 50%;
  mask-image: linear-gradient(to top, black 20%, transparent 100%);
  -webkit-mask-image: linear-gradient(to top, black 20%, transparent 100%);
}

/* Inhalte über der Welle */
.wave-content {
  position: relative;
  z-index: 1;
}

/* Reduced Motion: Animation stoppen */
@media (prefers-reduced-motion: reduce) {
  .wave-canvas {
    display: none;
  }
}