/* Container wrapper to hold the background absolute behind content */
.e-con.dev-has-wave-bg-yes {
    position: relative;
    overflow: hidden;
}

/* Ensure the background container is positioned correctly behind content */
.dev-wave-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; 
    pointer-events: none; /* Let clicks pass through to actual content */
    overflow: hidden;
    border-radius: inherit; /* Inherit rounded corners from container */
}

/* Target internal Elementor structural wrappers to sit ABOVE the background */
.e-con:has(> .dev-wave-bg-container) > .e-con-inner,
.e-con:has(> .dev-wave-bg-container) > .elementor-widget,
.e-con:has(> .dev-wave-bg-container) > .e-container,
.e-con:has(> .dev-wave-bg-container) > :not(.dev-wave-bg-container) {
    z-index: 1;
    position: relative;
}

/* The rotation box layer - matches original .box */
.dev-wave-bg-container .dev-wave-box {
    position: absolute;
    top: var(--dev-wave-pos-y, 0%);
    left: var(--dev-wave-pos-x, 0%);
    width: 100%;
    height: 100%;
    transform: rotate(80deg);
}

/* Base properties for all waves - matches original .wave */
.dev-wave-bg-container .dev-wave {
    position: absolute;
    top: 3%;
    left: 10%;
    /* Use variables for dynamic size, fallback to original 1500px/1300px aspect */
    width: var(--dev-wave-size, 1500px);
    height: calc(var(--dev-wave-size, 1500px) * 0.866); /* 1300/1500 roughly in original */
    margin-left: calc(var(--dev-wave-size, 1500px) * -0.1); /* -150px in original */
    margin-top: calc(var(--dev-wave-size, 1500px) * -0.166); /* -250px in original */
    
    transform-origin: 50% 48%;
    border-radius: 43%;
    animation: dev-drift linear infinite;
    animation-direction: var(--dev-wave-direction, normal); /* Support reverse rotations */
    mix-blend-mode: var(--dev-wave-blend-mode, normal);
}

/* --- Specific Waves mapped to CSS Variables --- */

.dev-wave-bg-container .dev-wave-one {
    background: var(--dev-wave-1-color, #0af);
    opacity: var(--dev-wave-1-opacity, 0.4);
    animation-duration: var(--dev-wave-1-speed, 7000ms);
}

.dev-wave-bg-container .dev-wave-two {
    background: var(--dev-wave-2-color, black);
    opacity: var(--dev-wave-2-opacity, 0.1);
    animation-duration: var(--dev-wave-2-speed, 3000ms);
}

.dev-wave-bg-container .dev-wave-three {
    background: var(--dev-wave-3-color, #77daff);
    opacity: var(--dev-wave-3-opacity, 1);
    animation-duration: var(--dev-wave-3-speed, 7500ms);
}

/* The animation keyframes */
@keyframes dev-drift {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}