@charset "UTF-8";
/* =========================================================
   WAVE ANIM — KV 下端の波を GSAP(MorphSVG) で揺らすための
   インライン SVG 配置スタイル。
   ※ transplant.css の後に読み込むこと。
   ========================================================= */

/* 旧・静的背景の波（transplant.css の .cover::after）は無効化し、
   インライン SVG の波に置き換える */
.cover::after {
  display: none !important;
}

.cover {
  position: relative;
}

/* インライン SVG の波コンテナ（KV 下端に重ねる） */
.wave-anim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 90px;
  z-index: 3;
  pointer-events: none;
  line-height: 0;
}

.wave-anim svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 3層構成：全層 #d4edfb。手前ほど不透明にして奥行き（レイヤー感）を出す。
   ・一層目（最前面 = メニューに接する waveFront）は opacity 1 で継ぎ目なし
   ・奥に向かって 0.8 → 0.6 と薄くする */
.wave-anim #waveFront {
  opacity: 1;
}
.wave-anim #waveMid {
  opacity: 0.6;
}
.wave-anim #waveBack {
  opacity: 0.4;
}

/* SP では波を少し低めに（KV を広く見せる） */
@media (max-width: 767px) {
  .wave-anim {
    height: 60px;
  }
}

/* モーション抑制環境では波形を初期状態のまま静止表示 */
@media (prefers-reduced-motion: reduce) {
  .wave-anim svg {
    /* JS 側でアニメーションを生成しないため CSS 追記は不要だが、
       明示的に静止であることを示す */
  }
}