.artistic-waves {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    pointer-events: none;
    z-index: 10;
}

.wave-layer {
    position: absolute;
    left: -100px;
    right: -100px;
    width: calc(100% + 200px);
}

.wave-base {
    bottom: 0;
    height: 300px;
    background: linear-gradient(0deg, 
            #19788b 0%,
            rgba(26, 168, 189, 0.5) 20%,
            rgba(57, 199, 184, 0.3) 50%,
            rgba(20, 180, 220, 0.15) 80%,
            transparent 100%
        );
    clip-path: polygon(
        0% 100%,
        12% 58%, 25% 68%, 38% 52%, 50% 65%, 62% 55%, 75% 68%, 88% 52%,
        100% 62%, 100% 100%
    );
    animation: ocean-wave-1 6s ease-in-out infinite;
}

.wave-base::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--ocean-deep);
    clip-path: polygon(
        0% 0%,
        8% 40%, 16% 30%, 24% 45%, 32% 35%, 40% 50%, 48% 40%, 56% 55%, 64% 45%, 72% 60%, 80% 50%, 88% 65%, 96% 55%,
        100% 70%, 100% 0%
    );
}

.wave-mid {
    bottom: 0;
    height: 250px;
    background: 
        linear-gradient(0deg, 
            #25aec9 0%,
            rgba(34, 211, 238, 0.5) 20%,
            rgba(64, 224, 208, 0.3) 50%,
            rgba(20, 180, 220, 0.15) 80%,
            transparent 100%
        );
    backdrop-filter: blur(12px);
    clip-path: polygon(
        0% 100%,
        15% 68%, 30% 62%, 45% 75%, 60% 58%, 75% 72%, 90% 55%,
        100% 68%, 100% 100%
    );
    animation: ocean-wave-2 8s ease-in-out infinite;
}

.wave-accent {
    bottom: 1px;
    height: 150px;
    background: 
        linear-gradient(0deg, 
            #2bafc9 0%,
            rgba(34, 211, 238, 0.25) 40%,
            rgba(40, 200, 240, 0.1) 70%,
            transparent 100%
        );
    backdrop-filter: blur(8px);
    clip-path: polygon(
        0% 100%,
        8% 75%, 16% 68%, 24% 78%, 32% 65%, 40% 75%, 48% 62%, 56% 76%, 64% 68%, 72% 78%, 80% 62%, 88% 75%, 96% 68%,
        100% 75%, 100% 100%
    );
    animation: ocean-wave-3 10s ease-in-out infinite;
}

@keyframes ocean-wave-1 {
    0%, 100% { 
        transform: translateX(0);
        clip-path: polygon(
            0% 100%,
            12% 58%, 25% 68%, 38% 52%, 50% 65%, 62% 55%, 75% 68%, 88% 52%,
            100% 62%, 100% 100%
        );
    }
    33% { 
        transform: translateX(-80px);
        clip-path: polygon(
            0% 100%,
            12% 50%, 25% 72%, 38% 45%, 50% 68%, 62% 48%, 75% 72%, 88% 45%,
            100% 65%, 100% 100%
        );
    }
    66% { 
        transform: translateX(60px);
        clip-path: polygon(
            0% 100%,
            12% 65%, 25% 62%, 38% 58%, 50% 62%, 62% 62%, 75% 62%, 88% 58%,
            100% 58%, 100% 100%
        );
    }
}

@keyframes ocean-wave-2 {
    0%, 100% { 
        transform: translateX(0);
        clip-path: polygon(
            0% 100%,
            15% 68%, 30% 62%, 45% 75%, 60% 58%, 75% 72%, 90% 55%,
            100% 68%, 100% 100%
        );
    }
    50% { 
        transform: translateX(100px);
        clip-path: polygon(
            0% 100%,
            15% 72%, 30% 55%, 45% 78%, 60% 52%, 75% 75%, 90% 48%,
            100% 72%, 100% 100%
        );
    }
}

@keyframes ocean-wave-3 {
    0%, 100% { 
        transform: translateX(0);
        clip-path: polygon(
            0% 100%,
            8% 65%, 16% 72%, 24% 62%, 32% 75%, 40% 64%, 48% 76%, 56% 60%, 64% 73%, 72% 62%, 80% 75%, 88% 60%, 96% 72%,
            100% 65%, 100% 100%
        );
    }
    25% { 
        transform: translateX(70px);
        clip-path: polygon(
            0% 100%,
            8% 72%, 16% 58%, 24% 78%, 32% 55%, 40% 79%, 48% 58%, 56% 78%, 64% 55%, 72% 78%, 80% 58%, 88% 78%, 96% 58%,
            100% 78%, 100% 100%
        );
    }
    75% { 
        transform: translateX(-120px);
        clip-path: polygon(
            0% 100%,
            8% 58%, 16% 78%, 24% 55%, 32% 75%, 40% 52%, 48% 72%, 56% 55%, 64% 68%, 72% 58%, 80% 68%, 88% 55%, 96% 78%,
            100% 55%, 100% 100%
        );
    }
}

.wave-foam {
    bottom: 0;
    height: 100px;
    background: 
        linear-gradient(0deg, 
            rgba(255, 255, 255, 0.3) 0%,
            rgba(255, 255, 255, 0.15) 30%,
            rgba(255, 255, 255, 0.05) 70%,
            transparent 100%
        );
    backdrop-filter: blur(4px);
    clip-path: polygon(
        0% 100%,
        5% 80%, 10% 75%, 15% 85%, 20% 70%, 25% 80%, 30% 65%, 35% 85%, 40% 72%, 45% 88%, 50% 68%, 55% 82%, 60% 75%, 65% 90%, 70% 65%, 75% 85%, 80% 70%, 85% 88%, 90% 75%, 95% 82%,
        100% 80%, 100% 100%
    );
    animation: ocean-wave-foam 12s ease-in-out infinite;
}

@keyframes ocean-wave-foam {
    0%, 100% { 
        transform: translateX(0);
        clip-path: polygon(
            0% 100%,
            5% 80%, 10% 75%, 15% 85%, 20% 70%, 25% 80%, 30% 65%, 35% 85%, 40% 72%, 45% 88%, 50% 68%, 55% 82%, 60% 75%, 65% 90%, 70% 65%, 75% 85%, 80% 70%, 85% 88%, 90% 75%, 95% 82%,
            100% 80%, 100% 100%
        );
    }
    33% { 
        transform: translateX(50px);
        clip-path: polygon(
            0% 100%,
            5% 85%, 10% 70%, 15% 88%, 20% 65%, 25% 85%, 30% 60%, 35% 90%, 40% 68%, 45% 85%, 50% 62%, 55% 88%, 60% 70%, 65% 85%, 70% 60%, 75% 90%, 80% 65%, 85% 85%, 90% 70%, 95% 88%,
            100% 75%, 100% 100%
        );
    }
    66% { 
        transform: translateX(-40px);
        clip-path: polygon(
            0% 100%,
            5% 78%, 10% 85%, 15% 72%, 20% 88%, 25% 65%, 30% 82%, 35% 75%, 40% 88%, 45% 62%, 50% 85%, 55% 70%, 60% 88%, 65% 65%, 70% 82%, 75% 75%, 80% 88%, 85% 62%, 90% 85%, 95% 70%,
            100% 85%, 100% 100%
        );
    }
}

@keyframes wave-flow {
    0% { background-position: 0 center; }
    100% { background-position: 400px center; }
}