/* 波の箱（ここで切れるなら height/min-height を上げる） */
.waves {
    position: absolute;
    left: 0;
    bottom: 0;
    /* 上端にするなら bottom:auto; top:0; */
    width: 100%;
    height: 6vmin;
    min-height: 40px;
    max-height: 100px;
    display: block;
}

.waves-top {
    top: 0;
    bottom: auto;
    transform: scaleY(-1);
    /* ←上下反転 */
    transform-origin: center;
    /* 反転の基準 */
}

/* Responsive */
@media (max-width: 768px) {
    .waves {
        height: 20px;
        min-height: 0px;
        bottom: -2px;
    }
}

/* =========================
   横移動（親 .wx）※各レイヤー別
   ========================= */
.parallax>.wx {
    animation-name: wave-x;
    animation-timing-function: cubic-bezier(.55, .5, .45, .5);
    animation-iteration-count: infinite;
    will-change: transform;
}

/* 横に流れる速さ・ズレ感 */
.wx--line {
    animation-duration: 8s;
    /* animation-duration: 18s; */
    animation-delay: -5s;
}

.wx--half {
    animation-duration: 10s;
    /* animation-duration: 20s; */
    animation-delay: -3s;
}

.wx--solid {
    animation-duration: 15s;
    /* animation-duration: 25s; */
    animation-delay: -9s;
}

@keyframes wave-x {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/* =========================
   縦揺れ（子 .wave）※各レイヤー別
   ========================= */
.parallax .wave {
    animation-name: bob;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    transform-origin: center;
    will-change: transform;
}

/* 縦揺れも“周期を変える”と、より波っぽく＆同調しにくい */
.wave--line {
    animation-duration: 4.6s;
    animation-delay: -1.3s;
}

/* 縦の揺れる速さ */
.wave--half {
    animation-duration: 5.1s;
    animation-delay: -2.1s;
}

.wave--solid {
    animation-duration: 5.4s;
    animation-delay: -3.5s;
}

@keyframes bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}

/* 見た目 */
.wave--line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 0.76;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wave--half {
    fill: rgba(255, 255, 255, 0.37);
}

.wave--solid {
    fill: #ffffff;
}



/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .parallax>.wx,
    .parallax .wave {
        animation: none;
    }
}