chore: adding appear animations to modal dialog and overlay (#30258)

## **Description**
This PR adds entrance animations to our modal components while ensuring
accessibility through proper motion reduction support. The changes
include:

1. Modal Content Animation:
- Added a smooth slide-up animation with fade-in effect (400ms duration)
   - Uses a custom cubic-bezier timing function for natural movement
   - Initial 24px offset for subtle entrance
   
2. Modal Overlay Animation:
   - Added fade-in animation (250ms duration)
   - Uses linear timing for consistent transparency transition

3. Accessibility Considerations:
- All animations respect the user's motion preferences using
`prefers-reduced-motion`
- When reduced motion is preferred, content appears instantly without
animation
- Maintains full functionality while improving the experience for users
who enjoy motion

These enhancements make our modals feel more polished while maintaining
accessibility standards.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30258?quickstart=1)

## **Related issues**

Fixes:  MetaMask/MetaMask-planning#4047

## **Manual testing steps**
Testing Modal Motion
1. Open the [storybook build to this
PR](https://diuv6g5fj9pvx.cloudfront.net/metamask-extension/13296481607/storybook-build/index.html?path=/story/components-componentlibrary-modal--default-story&globals=theme:light)
2. Search for `Modal`
3. Verify the modal overlay fades in smoothly
4. Verify the modal content slides up with a subtle animation
5. Test on different screen sizes to ensure animations remain smooth

Testing Prefers Reduced Motion
1. Open Dev Tools
2. Go to the kebab menu in the top right
3. Select More Tools > Redering
4. Scroll down to enable `prefers reduced-motion`
5. Verify animation of the modal is removed

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

Modal appears instantly without animation



https://github.com/user-attachments/assets/a2ba8480-8fdf-4cc1-86ec-bef95fbdb889

### **After**

Modal fades and slides in smoothly but removes animation when
`prefers-reduced-motion` is enabled


https://github.com/user-attachments/assets/76f6cfe9-0587-4c2c-bc47-a9f984041575

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: georgewrmarshall

ui/components/component-library/modal-content/modal-content.scss

@@ -35,6 +35,17 @@
     max-height: 100%;
     box-shadow: var(--shadow-size-lg) var(--color-shadow-default);
 
+    // Animate for users who have no reduced motion preferences
+    @media (prefers-reduced-motion: no-preference) {
+      animation: modal-dialog-slide-up 400ms cubic-bezier(0.3, 0.8, 0.3, 1) forwards;
+    }
+
+    // Don't animate for users who have reduced motion preferences
+    @media (prefers-reduced-motion: reduce) {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
     &--size-sm {
       --size: 360px;
 
@@ -54,3 +65,17 @@
     }
   }
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes modal-dialog-slide-up {
+    from {
+      transform: translateY(24px);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}

ui/components/component-library/modal-overlay/modal-overlay.scss

@@ -7,4 +7,22 @@
   right: 0;
   bottom: 0;
   z-index: design-system.$modal-z-index;
+  opacity: 1;
+
+  // Don't animate for users who have reduced motion preferences
+  @media (prefers-reduced-motion: no-preference) {
+    animation: modal-overlay-fade-in 250ms linear forwards;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes modal-overlay-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
 }