[FEATURE] Allow defining animation duration with CSS variable

[benface]

Is your feature request related to a problem? Please describe.
When the duration of an animation should be dynamic and depend on the viewport size or any other media query or CSS condition (container query, presence of a class or attribue on an ancestor, etc.), it would be super mega useful if we could tell Motion to use the value of a CSS variable / custom property as the duration.

Describe the solution you'd like
With Tailwind classes, for example:

<motion.div
  transition={{ duration: 'var(--duration)' }}
  className="[--duration:2s] sm:[--duration:1s]"
/>

Describe alternatives you've considered
Of course, it's always possible to get the current viewport size in JS, or read any CSS condition in user-land. But this seems like the kind of convenience feature that I would expect from Motion, in particular since custom properties are supported in animate.

Additional context
Nothing I can think of. Thank you 🫶