How to handle multiple levels of advanced/optional inputs in form

I am designing a form to give music recommendations based on many possible inputs. Only 1 input is required (artists/song) and 15 are optional (mood, danceability, tempo, etc). I'm designing mobile first, which has been a challenge to expose all the options nicely with the small real estate. I have been confused as to how to tackle exposing all of the options gradually/optionally. I have made some wireframes that I hope capture my thought process/challenges. Another key detail is that search results will load instantaneously below the form, so there isn't really a "submit" button on the form.

My initial desire was to show the required input and a couple of optional inputs with the option to expand the form to see advanced options:

When expanded, I didn't want to overload the user with all ~12 other options because the screen is so small on mobile. Instead I wanted to show another set of options that seem like they would be more likely used (danceability, loudness, etc...), and save the super advanced features (tempo, key, time signature, etc...) hidden behind some sort of 3rd "Show All" button press:

My initial plan was that the "Show All" button would feel like it's in its own "page" so that the user would feel like they are being taken to a new form with all 16 options, instead of feeling like a 3rd expansion of the form. However, I was confused if giving that separate "page" feeling would be a bad experience. How would a user see the instant results? Would they have to go "back" to the simple form to see the results? In that case, should the super advanced options just be a 3rd expansion of the 1st form? How would one handle "double" expansions dropdowns in a single menu? What would be a way to deal with this issue that does not harm the user experience?