.navigation {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,12,15,.96);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 150;
}

.navigation.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.navigation__inner {
    width: 100%;
    max-width: 1600px;
    padding-inline: 64px;
}

.navigation__menu {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.navigation__menu a {
    font-size: clamp(3rem,6vw,7rem);
    font-weight: var(--rb-font-weight-bold);
    line-height: .9;
    color: var(--rb-text);
    text-decoration: none;
}

.navigation__menu a span {
    transition:
        opacity .35s ease,
        transform .35s ease;
}

.navigation__menu:hover a span {
    opacity: .35;
}

.navigation__menu:hover a:hover span {
    opacity: 1;
    transform: translateX(16px);
}

.header__menu-close {
    display: none;
}

body.is-navigation-active .header__menu-open {
    display: none;
}

body.is-navigation-active .header__menu-close {
    display: inline;
}

.navigation__menu a.is-active span {
    background-image:
        linear-gradient( 150deg, rgba(21,234,237,.65) 0%, rgba(45,187,253,.35) 100%),
        url('//img.sauea.com/rain-42139.png');
    background-repeat: no-repeat, repeat;
    background-size: 100% 100%, 296px 296px;
    background-position: center, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: navigationNoise 28s linear infinite;
}
@keyframes navigationNoise {
    from {
        background-position:
            center,
            0 0;
    }
    to {
        background-position:
            center,
            -20px 256px;
    }
}
.navigation__menu:hover a span {
    opacity: .35;
    transition:
        opacity .35s ease,
        transform .35s ease;
}
/*
.navigation__menu:hover a:hover span {
    opacity: 1;
    transform: translateX(16px);
}*/
.navigation__menu:hover a:hover span {
    transform: translateX(10px) scale(1.015);
}



.navigation__background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
.navigation__background-icon {
    position: absolute;
    right: -120px;
    top: 50%;
    width: min(42vw,700px);
    height: auto;
    transform: translateY(-50%) translateX(120px);
    opacity: 0;
    transition:
        opacity .8s cubic-bezier(.22,.61,.36,1),
        transform .8s cubic-bezier(.22,.61,.36,1);
}
.navigation__background-icon.is-active {
    opacity: .05;
    transform: translateY(-50%) translateX(0);
}