Wavy mask gradient bug with straight lane

Question

Someone knows what is wrong?

#mainNav {
    // position: fixed;
    width: 100vw;
    padding-top: 0.25rem;
    padding-bottom: 0.75rem;
    background-color: pink;
    --mask:
        radial-gradient(21.22px at 50% calc(100% - 29.15px), #000 99%, #0000 101%) calc(50% - 22px) 0/44px 100%,
        radial-gradient(21.22px at 50% calc(100% + 18.15px), #0000 99%, #000 101%) 50% calc(100% - 11px)/44px 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);


    .navbar-toggler {
        padding: 0.5rem;
        // font-size: 0.75rem;
        font-family: $headings-font-family;
        text-transform: uppercase;
        font-weight: $font-weight-bold;

        i {
            font-size: 30px;
        }
    }

    .navbar__logo {
        // position: absolute;
        z-index: 10;
        max-width: 125px;
        // transform: translateY(60); 
        // flex-shrink: 5;
        // clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);   
        -webkit-filter: drop-shadow(5px 5px 5px #ffffff);
        filter: drop-shadow(5px 5px 5px #ffffff);

        &--hyperlink{
            display:inline-block;
        }
    }

    .navbar-nav {
        .nav-item {
            font-family: $headings-font-family;
            // font-size: 1.1rem;
            font-size: 1.25rem;
            font-weight: 900;
            letter-spacing: $headings-letter-spacing;

            .nav-link {
                // color: $white;
                color: #ffa0b1;

                &.active,
                &:hover {
                    color: $primary;
                }

                &--landing {
                    text-decoration: none;
                    color: $white;

                    &.active,
                    &:hover {
                        color: $primary;
                    }
                }
            }
        }
    }
}


@include media-breakpoint-up(md) {
    #mainNav {
        padding-top: 1rem;
        padding-bottom: 1rem;
        border: none;
        background-color: transparent;
        transition: padding-top 0.5s ease-in-out,
            padding-bottom 0.5s ease-in-out;

        .navbar__logo {
            transition: max-height 0.5s ease-in-out;
            max-width: 150px;
        }

        &.navbar-shrink {
            background-color: pink;
            --mask:
                radial-gradient(32.00px at 50% calc(100% - 45.15px), #000 99%, #0000 101%) calc(50% - 42px) 0/84px 100%,
                radial-gradient(32.00px at 50% calc(100% + 24.15px), #0000 99%, #000 101%) 50% calc(100% - 21px)/84px 100% repeat-x;
            -webkit-mask: var(--mask);
            mask: var(--mask);
            top: -100px;
            margin-top: 100px;
            transition: margin-top 0.7s;
            color: white;
        }

        .navbar-nav .nav-item {
            font-size: 1rem;
            margin-right: 0.5rem;

            &:last-child {
                margin-right: 0;
            }
        }
    }
}

@include media-breakpoint-up(lg) {
    #mainNav {
        .navbar__logo {
            max-width: 175px;
        }
        .navbar-nav .nav-item {
            font-size: 1.4rem;
            margin-right: 0.75rem;
        }
    }
}

    <nav class="navbar navbar-expand-sm fixed-top" id="mainNav">
        <div class="container">
            <a href="index.html">
                <img class="navbar__logo" src="../img/logoFix.png" alt="..." />
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars ms-1"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
                    <li class="nav-item"><a class="nav-link" href="offer.html">Oferta</a></li>
                    <li class="nav-item"><a class="nav-link" href="gallery.html">Galeria</a></li>
                    <li class="nav-item"><a class="nav-link" href="about.html">O mnie</a></li>
                    <li class="nav-item"><a class="nav-link" href="news.html">Aktualności</a></li>
                    <li class="nav-item"><a class="nav-link" href="#footer">Kontakt</a></li>
                </ul>
            </div>
        </div>
    </nav>

While implementing a wavy mask gradient, I'm experiencing an issue where a straight lane appears instead. I've reviewed my CSS properties and markup, but the unexpected behavior persists. Any insights or suggestions would be greatly appreciated! While attempting to create a wavy mask gradient, I've encountered a peculiar behavior with a straight lane instead. I've ensured my CSS properties are correct, including those for the WebKit linear gradient, but the issue persists. Any advice on troubleshooting this specific aspect would be invaluable!