.wrapper {
    width: 100%;
    height: 100vh; /* o más si quieres extender más abajo */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}


.wave {
    width: 2000px;
    height: 2025px;
    position: absolute;
    top: 145%;
    left: 35%;
    margin-left: -500px;
    margin-top: -600px;
    border-radius: 35%;
    filter: blur(1px);
    background: rgba(119, 83, 191, 0.8); /* #7753BF */
    /*    background: rgba(83, 116, 189, .98);*/
    animation: wave 30s infinite linear;
}

.wave2 {
    width: 1980px;
    height: 2205px;
    position: absolute;
    top: 60%;
    left: 25%;
    margin-left: -500px;
    margin-top: -500px;
    border-radius: 45%;
    background: rgba(80, 47, 145, 0.85); /* #502F91 */

    animation: wave2 18s infinite linear;
    filter: blur(1px);
}


.wave3 {
    width: 1750px;
    height: 1777px;
    position: absolute;
    top: 150%;
    left: 10%;
    margin-left: -400px;
    margin-top: -600px;
    border-radius: 28%;
    /*background: rgba(15,69,148,.27);*/
    filter: blur(1px);
    background: rgba(110, 90, 180, 0.60); /* un morado ligeramente más oscuro y saturado */
    animation: wave 45s infinite linear;
}


@keyframes wave {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes wave2 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* === Resoluciones entre 700px y 1199px de alto === */
@media (max-height: 1199px) {
    .wave, .wave2, .wave3 {
        width: 1400px;
        height: 1400px;
    }

    .wave {
        top: 150%;
    }

    .wave2 {
        top: 130%;
        margin-left: 300px;
    }

    .wave3 {
        top: 155%;
    }
}

/* === Resoluciones medianas (hasta 700px de alto) === */
@media (max-height: 700px) {
    .wave, .wave2, .wave3 {
        width: 1200px;
        height: 1200px;
    }

    .wave {
        top: 175%;
    }

    .wave2 {
        top: 180%;
        margin-left: 200px;
    }

    .wave3 {
        top: 170%;
    }
}

/* === Resoluciones pequeñas (hasta 450px de alto) === */
@media (max-height: 450px) {
    .wave, .wave2, .wave3 {
        width: 800px;
        height: 800px;
    }

    .wave {
        top: 175%;
    }

    .wave2 {
        top: 180%;
        margin-left: 100px;
    }

    .wave3 {
        top: 170%;
    }
}