/* ==========================================================================
   Waves Section Styles (PC & Mobile)
   ========================================================================== */

/* --------------------------------------------------
   Common Styles & Keyframes
   -------------------------------------------------- */
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/* --------------------------------------------------
   PC Styles (Min-width: 769px)
   Source: style.css (674-740行目)
   -------------------------------------------------- */
@media (min-width: 769px) {
    .waves {
        position: absolute; /* ヒーローセクション内に絶対配置 */
        bottom: 0;
        left: 0;
        width: 100%;
        height: 15vh;
        margin-bottom: -1px; /* 隙間対策 */
        /*Fix for safari gap*/
        min-height: 100px;
        max-height: 150px;
        background-color: transparent; /* 背景を透明にしてグラデーションを見せる */
        z-index: 2; /* Canvasより手前 */
    }

    .content {
        position: relative;
        height: 20vh;
        text-align: center;
        background-color: white;
    }

    .parallax > use {
        animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    }

    .parallax > use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
        fill: rgba(248, 252, 254, 0.7); /* #f8fcfeの半透明 */
    }

    .parallax > use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
        fill: #f8fcfe; /* #f8fcfe */
    }

    .parallax > use:nth-child(3) {
        animation-delay: -4s;
        animation-duration: 13s;
    }

    .parallax > use:nth-child(4) {
        animation-delay: -5s;
        animation-duration: 20s;
    }

    /* Service Page Specific Wave Styles */
    .service-page .waves {
        background-color: var(--color-coral-bg);
    }

    .service-page .waves .parallax > use:nth-child(1) {
        fill: rgba(229, 122, 97, 0.7);
    }

    .service-page .waves .parallax > use:nth-child(2) {
        fill: rgba(229, 122, 97, 1);
    }

    /* White Background Pages (Company, Member, Works) - PC */
    .company-page .waves .parallax > use:nth-child(1),
    .member-page .waves .parallax > use:nth-child(1),
    .works-page .waves .parallax > use:nth-child(1) {
        fill: rgb(240, 248, 252); /* 2枚目とほぼ同系統でわずかに濃い */
    }
}

/* --------------------------------------------------
   SP Styles (Max-width: 768px)
   -------------------------------------------------- */
@media (max-width: 768px) {
    /* 波のアニメーション */
    section.waves {
        height: 60px;
        min-height: 60px;
        max-height: 60px;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        margin-bottom: -1px;
        background-color: transparent;
    }

    svg.waves {
        width: 100%;
        height: 100%;
    }

    /* ホームページの波のアニメーション */
    .home-page section.waves .parallax > use,
    section.waves .parallax > use {
        animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
        will-change: transform;
        transform-origin: center center;
    }

    .home-page section.waves .parallax > use:nth-child(1),
    section.waves .parallax > use:nth-child(1) {
        animation-delay: -2s;
        animation-duration: 7s;
        fill: rgba(248, 252, 254, 0.7); /* #f8fcfeの半透明 */
    }

    .home-page section.waves .parallax > use:nth-child(2),
    section.waves .parallax > use:nth-child(2) {
        animation-delay: -3s;
        animation-duration: 10s;
        fill: #f8fcfe; /* #f8fcfeに変更 */
    }

    /* Service Page Specific Wave Styles (SP) */
    .service-page .waves {
        background-color: var(--color-coral-bg);
    }

    .service-page .waves .parallax > use:nth-child(1) {
        fill: rgba(229, 122, 97, 0.7);
    }

    .service-page .waves .parallax > use:nth-child(2) {
        fill: rgba(229, 122, 97, 1);
    }

    /* White Background Pages (Company, Member, Works) - SP */
    .company-page .waves .parallax > use:nth-child(1),
    .member-page .waves .parallax > use:nth-child(1),
    .works-page .waves .parallax > use:nth-child(1) {
        fill: rgb(240, 248, 252); /* 2枚目とほぼ同系統でわずかに濃い */
    }
}