.nav-liquid-indicator {
    position: absolute;
    top: 6px;
    left: 8px;
    z-index: 1;

    width: 56px;
    height: calc(100% - 12px);

    border: 1px solid rgba(255, 255, 255, 0.36);
    border-radius: 999px;

    background:
        radial-gradient(
            circle at 34% 18%,
            rgba(255, 255, 255, 0.68),
            transparent 38%
        ),
        radial-gradient(
            circle at 72% 82%,
            rgba(247, 190, 85, 0.22),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            rgba(72, 224, 194, 0.34),
            rgba(88, 178, 255, 0.20) 52%,
            rgba(247, 190, 85, 0.18)
        ),
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 10px 28px rgba(72, 224, 194, 0.16),
        0 2px 8px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10);

    backdrop-filter:
        blur(20px)
        saturate(195%)
        brightness(1.08);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(195%)
        brightness(1.08);

    transform: translate3d(0, 0, 0);

    transition:
        transform 460ms cubic-bezier(0.22, 1, 0.36, 1),
        width 360ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 260ms ease,
        box-shadow 260ms ease;

    pointer-events: none;
    will-change: transform, width;
}

.nav-liquid-indicator::before {
    content: "";
    position: absolute;
    inset: 3px;

    border-radius: inherit;
    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.26),
            transparent 38%,
            rgba(255, 255, 255, 0.10) 62%,
            transparent 82%
        );

    opacity: 0.9;
}

.nav-liquid-indicator.is-moving {
    filter:
        brightness(1.12)
        saturate(1.16);

    box-shadow:
        0 14px 34px rgba(72, 224, 194, 0.22),
        0 3px 10px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.64),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.nav-liquid-indicator.is-moving::before {
    animation: indicatorShine 480ms ease-out;
}

@keyframes indicatorShine {
    0% {
        transform: translateX(-22%);
        opacity: 0.45;
    }

    60% {
        transform: translateX(12%);
        opacity: 1;
    }

    100% {
        transform: translateX(0);
        opacity: 0.9;
    }
}