Add Sass variable for prefers-reduced-motion, add callout to affected components (#27581)

* Tweak the accessibility/reduced motion text

include mention of carousel slides, remove the (now inaccurate, as Firefox 63 includes it too) mention that support is limited to Safari/macOS

xref https://github.com/twbs/bootstrap/issues/27525

* Add new callout for reduced motion

* Add variable to control prefers-reduced-motion media query support

* Add callout about prefers-reduced-motion to all components currently using animation which are affected

site/docs/4.1/getting-started/theming.md

@@ -237,6 +237,7 @@ You can find and customize these variables for key global options in Bootstrap's
 | `$enable-shadows`           | `true` or `false` (default)        | Enables predefined `box-shadow` styles on various components. |
 | `$enable-gradients`         | `true` or `false` (default)        | Enables predefined gradients via `background-image` styles on various components. |
 | `$enable-transitions`       | `true` (default) or `false`        | Enables predefined `transition`s on various components. |
+| `$enable-prefers-reduced-motion-media-query`       | `true` (default) or `false`        | Enables the [`prefers-reduced-motion` media query]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/accessibility/#reduced-motion), which suppresses certain animations/transitions based on the users' browser/operating system preferences. |
 | `$enable-hover-media-query` | `true` or `false` (default)        | **Deprecated** |
 | `$enable-grid-classes`      | `true` (default) or `false`        | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). |
 | `$enable-caret`             | `true` (default) or `false`        | Enables pseudo element caret on `.dropdown-toggle`. |