.wave {
    position: absolute;
    display: block;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: auto;
}

.wave-reverse-x {
    transform: scaleX(-1);
}

.wave-dark {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
}

.wave-dark .wave-path {
    transform: scale(1.2, 1);
    transform-origin: 50% 100%;
}

.wave-dark .wave-path-1 {
    fill: rgba(255, 255, 255, 0.2);
    animation: wave1 15s ease-in-out infinite;
}

.wave-dark .wave-path-2 {
    fill: rgba(255, 255, 255, 0.6);
    animation: wave2 15s ease-in-out infinite;
}

.wave-dark .wave-path-3 {
    fill: rgba(255, 255, 255, 0.3);
    animation: wave3 15s ease-in-out infinite;
}

.wave-dark-1 .wave-path-1 {
    display: none;
}

.wave-light {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
    pointer-events: none;
}

.wave-light .wave-path {
    fill: rgba(224,242,241,0.2);
    animation: wave4 6s ease-in-out infinite;
    transform-origin: 50%;
}

.wave-light .wave-path:nth-child(2) {
    animation-delay: 2s;
}

.wave-light .wave-path:nth-child(3) {
    animation-delay: 4s;
}

.wave-light-1 {
    top: 105%;
}

.wave-light-reverse-x {
    transform: translateY(-50%) scaleX(-1);
}

.wave-light-reverse-y {
    transform: translateY(-50%) scaleY(-1);
}

.layer-wave {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.layer-wave + * {
    position: relative;
}

.bg-primary-violet .wave-dark .wave-path-1,
.bg-gradient-dark-violet .wave-dark .wave-path-1 {
    fill: rgba(1, 201, 245, 0.3);
}

.bg-primary-violet .wave-dark .wave-path-2,
.bg-gradient-dark-violet .wave-dark .wave-path-2 {
    fill: rgba(226, 63, 236, 0.4);
}

.bg-primary-violet .wave-dark .wave-path-3,
.bg-gradient-dark-violet .wave-dark .wave-path-3 {
    fill: rgba(0, 102, 255, 0.2);
}

@media (min-width: 480px) {
    .wave-dark-2 {
        bottom: -18vw;
    }
}

@media (min-width: 768px) {
    .wave-light-1 {
        top: 115%;
    }
    .wave-dark-3 {
        bottom: -10vw;
    }
}

@keyframes wave1 {
    25% {
        transform-origin: 0 100%;
        transform: scale(1.4, 1.3);
    }
    75% {
        transform: scale(1.4, 0.7);
        transform-origin: 100% 100%;
    }
}

@keyframes wave2 {
    25% {
        transform-origin: 0 100%;
    }
    50% {
        transform: scale(1.3, 0.8);
    }
    75% {
        transform-origin: 100% 100%;
    }
}

@keyframes wave3 {
    25% {
        transform-origin: 100% 100%;
    }
    50% {
        transform: scale(1.2, 0.9);
    }
    75% {
        transform-origin: 0 100%;
    }
}

@keyframes wave4 {
    25% {
        transform: scaleY(0.9);
    }
    75% {
        transform: scaleY(1.1);
    }
}

@keyframes wave5 {
    25% {
        transform-origin: 0 100%;
        transform: scale(1.3, 1.1);
    }
    75% {
        transform: scale(1.15, 0.9);
        transform-origin: 100% 100%;
    }
}

@keyframes wave6 {
    25% {
        transform-origin: 100% 100%;
    }
    50% {
        transform: scale(1.2, 0.8);
    }
    75% {
        transform-origin: 0 100%;
    }
}

@keyframes wave7 {
    25% {
        transform-origin: 0 100%;
    }
    50% {
        transform: scale(1.1, 0.9);
    }
    75% {
        transform-origin: 100% 100%;
    }
}