/* ---- wave（section 内 absolute・canvas アニメ） ---- */

/*
  周波数・アニメ速度など（レイヤー別）
  ─────────────────────────────────
  ベース .wave          … --wave-frequency, --wave-speed, --wave-amplitude, --wave-direction, --wave-phase
  中間   .wave.color1   … --wave1-frequency, --wave1-speed, --wave1-amplitude, --wave1-direction, --wave1-phase
  背面   .wave.color2   … --wave2-frequency, --wave2-speed, --wave2-amplitude, --wave2-direction, --wave2-phase

  --wave-frequency   … 横幅に入る波の数（大きいほど細かい波）例: 2 = 2周期
  --wave-speed       … 横方向の流れる速さ（周期/秒・大きいほど速い）例: 0.4
  --wave-amplitude   … 高さに対する振幅比 0〜1 例: 0.18
  --wave-direction   … 流れる向き 1 または -1
  --wave-phase       … 初期位相（ラジアン）
  --wave-animate     … 1（既定）でアニメ、0 / none で停止

  スクロール連動（wave.js・親 section に指定すると子 .wave に継承）:
  ※ 現在 wave.js の YAB_WAVE_SCROLL_LINK = false で全体停止中（下記変数は効かない）。
     再開する場合は wave.js のフラグを true に戻す。
  --wave-scroll-link          … 1 で有効（既定 0）
  --wave-scroll-velocity-ref  … この px/s で最大ブーストに近づく（既定 1200）
  --wave-scroll-speed-gain    … 速さへの効き（既定 0.4 → 最大で約 +40%）
  --wave-scroll-amp-gain      … 高さへの効き（既定 0.25）
  --wave-scroll-max-boost     … 正規化後の上限（既定 1.2）
  --wave-scroll-link-force    … 1 なら prefers-reduced-motion でも連動

  デバッグ（wave.js）: URL に `?yab_wave_scroll_debug=1` または
  `localStorage.setItem('yab_wave_scroll_debug','1')` → コンソールに
  `[yab_wave_scroll]` で velocityPxS / speedMul / ampMul 等を約 400ms 間隔で出力

  section または #works など親に書けば3層まとめて指定可能:
  #works {
    --wave-height: 8vh;
    --wave-frequency: 2;
    --wave1-frequency: 2.5;
    --wave2-frequency: 3;
    --wave-speed: 0.4;
    --wave1-speed: 0.55;
    --wave2-speed: 0.7;
  }

  .wave_mask … セクション下端に重ね、波の上辺より下を塗って上のコンテンツをマスク
*/

.wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--wave-height);
  pointer-events: none;
  overflow: hidden;
}

.wave canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.wave_top {
  bottom: 100%;
}

.wave_bottom {
  top: 100%;
}

.wave {
  z-index: 4;
  --wave-height: 6vh;
  --wave-color: #e8e8e8;
  --wave-frequency: 1;
  --wave-speed: 0.4;
  --wave-amplitude: 0.18;
  --wave-direction: 1;
}

.wave.color1 {
  z-index: 3;
  --wave-height: 7vh;
  --wave-gradient-from: rgba(0, 146, 219, 0.5);
  --wave-gradient-to: rgba(0, 146, 219, 0.5);
  --wave1-frequency: 0.5;
  --wave1-speed: 0.05;
  --wave1-amplitude: 0.5;
  --wave1-direction: 1;
}

.wave.color2 {
  z-index: 2;
  --wave-height: 6vh;
  --wave-gradient-from: rgba(139, 193, 31, 0.5);
  --wave-gradient-to: rgba(139, 193, 31, 0.5);
  --wave2-frequency: 1;
  --wave2-speed: 0.1;
  --wave2-amplitude: 0.5;
  --wave2-direction: -1;
}

/* マスク / bottom 3層スタック（#top #works 等） */
.wave.wave_mask.color2,
.wave.wave_bottom.color2 {
  z-index: 6;
}

.wave.wave_mask.color1,
.wave.wave_bottom.color1 {
  z-index: 7;
}

.wave.wave_mask:not(.color1):not(.color2),
.wave.wave_bottom:not(.color1):not(.color2) {
  z-index: 8;
  --wave-height: var(--wave-mask-height, 4.5vh);
}