/**
 * Animated Wave Background for Elementor
 * Styles for wave animations
 */

.awb-wave-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.awb-wave-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.awb-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 400%;
    height: 100%;
}

.awb-wave path {
    transform-origin: center;
    will-change: transform, opacity;
}

/* Wave animation keyframes - seamless infinite loop */
@keyframes awb-wave-flow-top {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes awb-wave-flow-middle {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes awb-wave-flow-bottom {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .awb-wave-container {
        min-height: 300px;
    }
}

@media (max-width: 480px) {
    .awb-wave-container {
        min-height: 200px;
    }
}

/* Editor styles */
.elementor-editor-active .awb-wave-container {
    min-height: 400px;
}

/* Performance optimizations */
.awb-wave,
.awb-wave path {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}