/* Wave animation for the hero section background */
.ocean {
    height: 120px; /* Slightly reduced height for mobile */
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #c3e0e5;
    z-index: 2; /* Ensure it appears above the bottom geometric accent */
    min-height: 100px; /* Ensure minimum visibility */
}

.wave {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" preserveAspectRatio="none"><path d="M0,50 C25,20 75,80 100,50 C125,20 175,80 200,50 L200,100 L0,100 Z" fill="%235885af"/></svg>') repeat-x;    position: absolute;    top: -50px; /* Reduced from -70px to keep more wave visible */
    width: 100%;
    height: 180px; /* Slightly reduced */
    animation: wave 18s linear infinite;
    will-change: background-position;
    background-size: 200px 100px;
}

.wave-overlay {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 120" preserveAspectRatio="none"><path d="M0,60 C50,10 100,110 200,60 C250,10 300,110 400,60 L400,120 L0,120 Z" fill="%234a7ba7" opacity="0.6"/></svg>') repeat-x;
    position: absolute;
    top: -60px; /* Adjusted to keep overlay visible */
    width: 100%;
    height: 200px; /* Slightly reduced */
    animation: wave-large 25s linear infinite reverse;
    will-change: background-position;
    background-size: 400px 120px;
    z-index: 3;
}

@keyframes wave {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: 200px;
    }
}

@keyframes wave-large {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: 400px;
    }
}

/* Topography animation */
.topography-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: url(#topography-filter);
    opacity: 0.15; /* Adjust for visibility */
    pointer-events: none;
    z-index: 1;
    background-color: #ffffff; /* The filter needs a source graphic to work on */
}

/* Geometric accent styles */
.geometric-accent {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    background: linear-gradient(135deg, #5885af 60%, #4a7ba7 100%);
    opacity: 0.25;
    box-shadow: 0 8px 32px 0 rgba(88,133,175,0.25);
    filter: blur(1.5px);
    animation: accent-float 8s ease-in-out infinite alternate;
    z-index: 2;
}

.geometric-accent.bottom-20.right-10 {
    background: linear-gradient(135deg, #c3e0e5 60%, #5885af 100%);
    opacity: 0.28;
    filter: blur(1.2px);
    z-index: 0; /* Ensure it appears below the ocean */
}

@keyframes accent-float {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-30px) scale(1.08); }
}

/* Floating logos animation */
.floating-logo {
    animation: float-logo 10s ease-in-out infinite alternate;
    opacity: 0.85;
    z-index: 3;
}

.logo-cloud { animation-delay: 0s; }
.logo-globe { animation-delay: 2s; }
.logo-ai { animation-delay: 4s; }
.logo-automation { animation-delay: 6s; }

@keyframes float-logo {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-30px) scale(1.08); }
    100% { transform: translateY(0) scale(1); }
}

/* Fish animations for the ocean */
.fish {
    position: absolute;
    width: 40px;
    height: 25px;
    z-index: 2;
    opacity: 0.7;
}

.fish-1 {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 30"><ellipse cx="35" cy="15" rx="12" ry="8" fill="%234a7ba7"/><path d="M23 15 L5 8 L8 15 L5 22 Z" fill="%234a7ba7"/><circle cx="40" cy="12" r="2" fill="%23ffffff"/><circle cx="40" cy="12" r="1" fill="%23000000"/><path d="M35 8 L38 5 M35 22 L38 25" stroke="%23ffffff" stroke-width="1"/></svg>') no-repeat center;
    background-size: contain;
    animation: swim-right 35s linear infinite;
    top: 60px;
    left: -50px;
}

.fish-2 {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 30"><ellipse cx="15" cy="15" rx="12" ry="8" fill="%235885af"/><path d="M27 15 L45 8 L42 15 L45 22 Z" fill="%235885af"/><circle cx="10" cy="12" r="2" fill="%23ffffff"/><circle cx="10" cy="12" r="1" fill="%23000000"/><path d="M15 8 L12 5 M15 22 L12 25" stroke="%23ffffff" stroke-width="1"/></svg>') no-repeat center;
    background-size: contain;
    animation: swim-left 40s linear infinite;
    top: 90px;
    right: -50px;
}

.fish-3 {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 32"><ellipse cx="35" cy="16" rx="13" ry="8" fill="%235885af"/><path d="M22 16 L4 9 L8 16 L4 23 Z" fill="%235885af"/><circle cx="40" cy="13" r="2.2" fill="%23ffffff"/><circle cx="40" cy="13" r="1.1" fill="%23000000"/><path d="M35 9 L38 6 M35 23 L38 26" stroke="%23ffffff" stroke-width="1.2"/></svg>') no-repeat center;
    background-size: contain;
    animation: swim-right 45s linear infinite;
    top: 45px;
    left: -50px;
    width: 45px;
    height: 28px;
}

.fish-4 {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 22"><ellipse cx="25" cy="11" rx="8" ry="5" fill="%234a7ba7"/><path d="M17 11 L4 6 L6 11 L4 16 Z" fill="%234a7ba7"/><circle cx="28" cy="9" r="1.2" fill="%23ffffff"/><circle cx="28" cy="9" r="0.6" fill="%23000000"/><path d="M25 7 L27 5 M25 15 L27 17" stroke="%23ffffff" stroke-width="0.7"/></svg>') no-repeat center;
    background-size: contain;
    animation: swim-right 50s linear infinite;
    top: 110px;
    left: -35px;
    width: 30px;
    height: 18px;
    animation-delay: -8s;
}

/* Red fish matching the red button */
.fish-red {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 28"><ellipse cx="32" cy="14" rx="11" ry="7" fill="%23D21034"/><path d="M21 14 L4 8 L7 14 L4 20 Z" fill="%23D21034"/><circle cx="37" cy="11" r="1.8" fill="%23ffffff"/><circle cx="37" cy="11" r="0.9" fill="%23000000"/><path d="M32 8 L35 6 M32 20 L35 22" stroke="%23ffffff" stroke-width="0.9"/></svg>') no-repeat center;
    background-size: contain;
    animation: swim-right 55s linear infinite;
    top: 75px;
    left: -45px;
    width: 38px;
    height: 23px;
    animation-delay: -15s;
}

/* Yellow fish matching the yellow button */
.fish-yellow {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 26"><ellipse cx="12" cy="13" rx="10" ry="6.5" fill="%23FDD44F"/><path d="M22 13 L38 7 L35 13 L38 19 Z" fill="%23FDD44F"/><circle cx="8" cy="10.5" r="1.6" fill="%23000000"/><circle cx="8" cy="10.5" r="0.8" fill="%23ffffff"/><path d="M12 7.5 L9 5.5 M12 18.5 L9 20.5" stroke="%23000000" stroke-width="0.8"/></svg>') no-repeat center;
    background-size: contain;
    animation: swim-left 48s linear infinite;
    top: 35px;
    right: -42px;
    width: 36px;
    height: 22px;
    animation-delay: -20s;
}

@keyframes swim-right {
    0% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(25vw) translateY(-10px);
    }
    50% {
        transform: translateX(50vw) translateY(5px);
    }
    75% {
        transform: translateX(75vw) translateY(-5px);
    }
    100% {
        transform: translateX(100vw) translateY(0);
    }
}

@keyframes swim-left {
    0% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(-25vw) translateY(8px);
    }
    50% {
        transform: translateX(-50vw) translateY(-3px);
    }
    75% {
        transform: translateX(-75vw) translateY(6px);
    }
    100% {
        transform: translateX(-100vw) translateY(0);
    }
}