chore: update xmas effect details (#11091)

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the `SnowflakesWrapper` in the `XmasEffect` component
by adding dynamic opacity styles based on the number of snowflakes and
updates the animation duration for `Snowflake`. It also adjusts the text
shadow based on the theme.

### Detailed summary
- Added `$itemCount` prop to `SnowflakesWrapper` for dynamic styling.
- Introduced `generateRandomOpacityStyles` function to set random
opacity for each snowflake.
- Changed `text-shadow` in `Snowflake` based on theme.
- Increased animation duration of `Snowflake` from 10s to 15s.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->

apps/web/src/views/SwapSimplify/V4Swap/XmasEffect.tsx

@@ -1,8 +1,8 @@
 import { ASSET_CDN } from 'config/constants/endpoints'
 import { memo } from 'react'
-import { keyframes, styled } from 'styled-components'
+import { css, keyframes, styled } from 'styled-components'
 
-export const SnowflakesWrapper = styled.div`
+export const SnowflakesWrapper = styled.div<{ $itemCount: number }>`
   position: absolute;
   left: 0;
   bottom: 0;
@@ -11,6 +11,7 @@ export const SnowflakesWrapper = styled.div`
   pointer-events: none;
   user-select: none;
   z-index: 0;
+  ${({ $itemCount }) => generateRandomOpacityStyles($itemCount)};
 `
 
 const XmaxBg = styled.div`
@@ -81,11 +82,11 @@ export const Snowflake = styled.div`
   color: #fff;
   font-size: 1em;
   font-family: Arial;
-  text-shadow: 0 0 1px #000;
+  text-shadow: ${({ theme }) => (theme.isDark ? '0 0 1px #000' : 'none')};
   user-select: none;
   cursor: default;
   will-change: transform;
-  animation: ${snowflakeAnimation} 10s linear infinite;
+  animation: ${snowflakeAnimation} 15s linear infinite;
 
   &:nth-of-type(1) {
     left: 1%;
@@ -128,10 +129,24 @@ export const Snowflake = styled.div`
     animation-delay: 3s, 1.5s;
   }
 `
+const generateRandomOpacityStyles = (count = 11) => {
+  let styles = ''
+  for (let i = 1; i <= count; i++) {
+    const randomOpacity = (Math.random() * (0.8 - 0.2) + 0.2).toFixed(2)
+    styles += `
+      :nth-child(${i}) {
+        opacity: ${randomOpacity};
+      }
+    `
+  }
+  return css`
+    ${styles}
+  `
+}
 
 export const XmasEffect: React.FC = memo(() => {
   return (
-    <SnowflakesWrapper aria-hidden="true">
+    <SnowflakesWrapper aria-hidden="true" $itemCount={11}>
       {Array.from({ length: 10 }).map((_, index) => (
         // eslint-disable-next-line react/no-array-index-key
         <Snowflake key={`SnowFlakeElements${index}`}>❄️</Snowflake>