/* ==========================================
   Standardized Wave & Hero Styles (Unified Design)
   ========================================== */

/* 
   Standard Tool Hero Container 
   Mirrors the 'hero' class from home.css to ensure consistency
*/
/* Tool hero class removed - styles are now in page-specific CSS files */

/* Base Wave Container */
.hero-wave {
    position: absolute;
    bottom: -50px;
    /* Pull wave down to overlap next section slightly or sit at bottom */
    left: -7.5%;
    width: 115%;
    height: 300px;
    line-height: 0;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
}

.footer-wave {
    position: absolute;
    top: -150px;
    left: 0;
    width: 100%;
    height: 151px;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}

.wave-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Fill container */
}

/* Base Animations */
.wave-0 {
    z-index: 0;
    animation: wave-flow-0 20s ease-in-out infinite;
    opacity: 0.9;
}

.wave-1 {
    z-index: 3;
    animation: wave-flow-1 10s ease-in-out infinite;
}

.wave-2 {
    z-index: 2;
    animation: wave-flow-2 12s ease-in-out infinite;
    opacity: 0.85;
}

.wave-3 {
    z-index: 1;
    animation: wave-flow-3 14s ease-in-out infinite;
    opacity: 0.7;
}

/* Keyframes */
@keyframes wave-flow-0 {

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

    50% {
        transform: translateX(30px);
    }
}

@keyframes wave-flow-1 {

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

    50% {
        transform: translateX(-35px);
    }
}

@keyframes wave-flow-2 {

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

    50% {
        transform: translateX(25px);
    }
}

@keyframes wave-flow-3 {

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

    50% {
        transform: translateX(-20px);
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .tool-hero {
        min-height: auto;
        padding-bottom: 120px;
    }

    .hero-wave {
        height: 180px;
        bottom: -30px;
        width: 120%;
        left: -10%;
    }

    .wave-layer {
        height: 180px;
        width: 120%;
    }

    .footer-wave {
        top: -100px;
        height: 101px;
    }

    .wave-0,
    .wave-1,
    .wave-2,
    .wave-3 {
        animation: none !important;
        /* Save battery on mobile if needed, or keep specific ones */
    }
}