/* Footer Water Effect */
.watery-footer {
    background-color: #0d4a6b;
    background-size: cover;
    min-height: 300px;
    position: relative;
}

/* Make sure canvas from ripples.js stays behind content */
.watery-footer canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
}

/* Wave Animations */
.wave {
    animation: wave-animation 6s ease-in-out infinite;
    transform-origin: center;
}

.wave1 { animation-delay: 0s; }
.wave2 { animation-delay: -2s; }
.wave3 { animation-delay: -4s; }

@keyframes wave-animation {
    0%, 100% {
        d: path("M0,30 C150,60 300,0 450,30 C600,60 750,0 900,30 C1050,60 1200,0 1200,30 L1200,120 L0,120 Z");
    }
    25% {
        d: path("M0,45 C150,15 300,75 450,45 C600,15 750,75 900,45 C1050,15 1200,75 1200,45 L1200,120 L0,120 Z");
    }
    50% {
        d: path("M0,30 C150,60 300,0 450,30 C600,60 750,0 900,30 C1050,60 1200,0 1200,30 L1200,120 L0,120 Z");
    }
    75% {
        d: path("M0,15 C150,75 300,15 450,45 C600,75 750,15 900,45 C1050,75 1200,15 1200,45 L1200,120 L0,120 Z");
    }
}