feat: Update NFT details screen transitions (MetaMask#23912)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

The NFT details pages (NftDetails and NftDetailsFullImage) were
transitioning into the viewport like a bottom sheet (sliding up from
bottom) due to the parent Stack.Navigator using mode={'modal'}.
This PR changes the transition to slide in from right to left (standard
push navigation) by adding a custom cardStyleInterpolator with
horizontal translation, matching the pattern used by other screens like
TrendingTokensFullView, ExploreSearchScreen, and PerpsScreenStack.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Updated NFT details pages to slide in from right
instead of from bottom

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MDP-271

## **Manual testing steps**

```gherkin
Feature: NFT Details Navigation

  Scenario: user opens NFT details
    Given user is on the Wallet view with NFTs visible

    When user taps on an NFT
    Then the NFT Details screen slides in from right to left
    And user can swipe from left edge to go back (gesture navigation)

  Scenario: user opens NFT full image
    Given user is viewing NFT details

    When user taps on the NFT image to view full screen
    Then the NFT Full Image screen slides in from right to left
    And user can swipe from left edge to go back (gesture navigation)
```

## **Screenshots/Recordings**

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

### **Before**


https://github.com/user-attachments/assets/80629490-2cff-4080-8feb-35d2929dfafa


### **After**


https://github.com/user-attachments/assets/8a635fac-4e98-42fe-b251-5b2880072c6b

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/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-mobile/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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Switch NFT details screens to a right-to-left push animation with a
custom cardStyleInterpolator.
> 
> - **Navigation (MainNavigator.js)**:
> - Add `options` to `NftDetails` and `NftDetailsFullImage` to enable
horizontal slide transition (`animationEnabled: true` + custom
`cardStyleInterpolator`).
> - **Tests**:
> - Update snapshot to reflect new `options` on `NftDetails` and
`NftDetailsFullImage`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
d47ecf9. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: PatrykLucka

app/components/Nav/Main/MainNavigator.js

@@ -1080,10 +1080,43 @@ const MainNavigator = () => {
         component={NotificationsModeView}
       />
       <Stack.Screen name={Routes.QR_TAB_SWITCHER} component={QRTabSwitcher} />
-      <Stack.Screen name="NftDetails" component={NftDetailsModeView} />
+      <Stack.Screen
+        name="NftDetails"
+        component={NftDetailsModeView}
+        options={{
+          animationEnabled: true,
+          cardStyleInterpolator: ({ current, layouts }) => ({
+            cardStyle: {
+              transform: [
+                {
+                  translateX: current.progress.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [layouts.screen.width, 0],
+                  }),
+                },
+              ],
+            },
+          }),
+        }}
+      />
       <Stack.Screen
         name="NftDetailsFullImage"
         component={NftDetailsFullImageModeView}
+        options={{
+          animationEnabled: true,
+          cardStyleInterpolator: ({ current, layouts }) => ({
+            cardStyle: {
+              transform: [
+                {
+                  translateX: current.progress.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [layouts.screen.width, 0],
+                  }),
+                },
+              ],
+            },
+          }),
+        }}
       />
       <Stack.Screen
         name={Routes.WALLET.NFTS_FULL_VIEW}

app/components/Nav/Main/__snapshots__/MainNavigator.test.tsx.snap

@@ -131,10 +131,22 @@ exports[`MainNavigator matches rendered snapshot 1`] = `
   <Screen
     component={[Function]}
     name="NftDetails"
+    options={
+      {
+        "animationEnabled": true,
+        "cardStyleInterpolator": [Function],
+      }
+    }
   />
   <Screen
     component={[Function]}
     name="NftDetailsFullImage"
+    options={
+      {
+        "animationEnabled": true,
+        "cardStyleInterpolator": [Function],
+      }
+    }
   />
   <Screen
     component={[Function]}