SX: unable to reduce motion inside keyframes

[mrtnzlml]

It seems like keyframes are fairly limited in what can go inside. Specifically, we allow only raw styles without any pseudo or media definitions. I wanted to write something like this (and it didn't work):

const bounce = sx.keyframes({
  '33%': { transform: `translateY(-10px)` },
  '66%': {
    'transform': `translateY(10px)`,
    '@media (prefers-reduced-motion: no-preference)': {
      fill: 'rgba(var(--sx-accent-5))',
    }
  },
});

I actually don't know if this should be allowed or if it should work. At least, we should throw a warning/error explaining this is not supported (instead of quietly ignoring it).

See: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion