.nav-item {
    transition:
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.28s ease,
        opacity 0.28s ease,
        filter 0.28s ease;
}

.nav-item:hover {
    color: color-mix(in srgb, var(--text) 72%, transparent);
}

.nav-item.is-active {
    color: var(--text);
}

.nav-item.is-active .nav-icon {
    transform: translateY(-1px) scale(1.14);

    filter:
        drop-shadow(0 4px 14px rgba(255, 255, 255, 0.26));
}

.nav-item.is-pressed {
    transform: scale(0.88);
}

.nav-item.is-active.is-pressed {
    transform: translateY(-1px) scale(0.88);
}

.nav-icon {
    transition:
        transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
    .nav-shell::before,
    .nav-liquid-indicator,
    .nav-liquid-indicator::before,
    .nav-item,
    .nav-icon {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}