/* ================================
   Wave Runner (船 × 波線)
   - wrapper: パス上の位置決め（GSAPが動かす）
   - ship   : 画像の見た目調整（上下ゆれ等）
   ================================ */

/* セクション本体：高さは旧実装 5vw に合わせる */
.wave-anim {
    position: relative;
    width: 100%;
    height: 5vw;
    /* お好みで */
    min-height: 80px;
    /* 船が大きいので少し余裕 */
    overflow: visible;
    /* 船がはみ出しても見えるように */
}

/* 背景SVGは全域フィット */
.wave-anim__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* 波の塗り色（任意） */
.wave-anim__fill {
    fill: #05BDF7;
}

/* ---- ガイド用ドット（使わないなら残してもOK） ---- */
.wave-anim__dot {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    font-size: 14px;
    line-height: 1;
    will-change: transform;
    pointer-events: none;
}

/* ---- ここからが要：wrapper/ship の責務分離 ---- */

/* wrapper：GSAPの motionPath で動かす“器” */
.ship-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform;
    visibility: hidden;
    /* 初期は隠す（JSの onStart で visible に） */
    z-index: 1;
}

/* ship：画像そのもの。wrapper内で中央基準に置く */
.wave-anim__ship {
    display: block;
    width: 250px;
    /* ベース：ご指定どおり ~250px */
    transform: translate(-50%, -50%);
    /* 中心基準に */
    will-change: transform;
    pointer-events: none;
}

/* レスポンシブ（任意調整） */
@media (max-width: 820px) {
    .wave-anim__ship {
        width: 180px;
    }
}

@media (max-width: 430px) {
    .wave-anim__ship {
        width: 100px;
    }
}

/* ---- SWELLのフルワイドが overflow を隠す場合の保険（必要なときだけ有効化） ---- */
/*
.swell-block-fullWide,
.swell-block-fullWide__inner {
  overflow: visible !important;
}
*/
/* 魚（仮）を載せるレイヤー：セクション基準で絶対配置 */
.fish-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
    /* 船より手前/奥はお好みで */
}

/* 魚（仮のドット） */
.fish {
    position: absolute;
    font-size: 18px;
    /* 大きさはお好みで */
    line-height: 1;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    opacity: 0;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .15));
}

.fish img {
    display: block;
    width: 30px;
    height: 30px;
}

.splash {
  position: absolute;
  font-size: 16px;   /* 💧の大きさ */
  pointer-events: none;
  will-change: transform, opacity;
}
.splash-p{
  position: absolute;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
  /* 背景色はJSで inline 指定（競合を避ける） */
}