Simplify hero backgrounds and add entrance animations

- Replace animated blob/wave/noise backdrop with clean static gradient
  (radial ellipse highlights + linear fade) in hero-motion-backdrop
- Remove all framer-motion from background layer; delete unused CSS
  classes: hero-blob, hero-sheet-glow, hero-sheet-wave, hero-sheet-noise,
  hero-title-shift keyframe, and responsive blob media queries
- Add framer-motion stagger entrance to HeroContentMotion, HeroMotionItem,
  and HeroTitle (slide-up + fade on mount)
- Refactor coming-soon page to use HeroContentMotion/HeroMotionItem
  instead of MotionFade (whileInView unreliable above the fold)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/globals.css

@@ -266,91 +266,21 @@ html[lang="ar"] {
     position: absolute;
     inset: 0;
     background:
-      radial-gradient(circle at 14% 18%, hsl(var(--hero-left) / 0.42), transparent 26%),
-      radial-gradient(circle at 84% 14%, hsl(var(--hero-right) / 0.28), transparent 24%),
-      radial-gradient(circle at 52% 84%, hsl(var(--hero-bottom) / 0.24), transparent 32%),
-      linear-gradient(180deg, hsl(var(--hero-base)), hsl(var(--background)) 88%);
-  }
-
-  .hero-blob {
-    position: absolute;
-    border-radius: 9999px;
-    filter: blur(110px);
-    will-change: transform, opacity;
-  }
-
-  .hero-blob-left {
-    left: -8%;
-    top: 8%;
-    height: 24rem;
-    width: 24rem;
-    background: radial-gradient(circle, hsl(var(--hero-left) / 0.48), transparent 68%);
-  }
-
-  .hero-blob-right {
-    right: -10%;
-    top: 2%;
-    height: 22rem;
-    width: 22rem;
-    background: radial-gradient(circle, hsl(var(--hero-right) / 0.36), transparent 70%);
-  }
-
-  .hero-blob-bottom {
-    left: 18%;
-    bottom: -10%;
-    height: 24rem;
-    width: 38rem;
-    background: radial-gradient(circle, hsl(var(--hero-bottom) / 0.32), transparent 70%);
-  }
-
-  .hero-sheet-glow {
-    position: absolute;
-    inset: -10% -8%;
-    background:
-      radial-gradient(circle at 18% 24%, hsl(var(--hero-left) / 0.24), transparent 18%),
-      radial-gradient(circle at 86% 18%, hsl(var(--hero-right) / 0.16), transparent 18%),
-      radial-gradient(circle at 50% 78%, hsl(var(--hero-bottom) / 0.14), transparent 24%);
-    filter: blur(36px);
-    will-change: transform, opacity;
-  }
-
-  .hero-sheet-wave {
-    position: absolute;
-    inset: -16% -10%;
-    background:
-      conic-gradient(
-        from 180deg at 50% 50%,
-        transparent 0deg,
-        hsl(var(--hero-left) / 0.08) 58deg,
-        transparent 120deg,
-        transparent 228deg,
-        hsl(var(--hero-right) / 0.1) 300deg,
-        transparent 360deg
-      );
-    filter: blur(90px);
-    mix-blend-mode: screen;
-    will-change: transform, opacity;
-  }
-
-  .hero-sheet-noise {
-    position: absolute;
-    inset: 0;
-    background-image:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E");
-    background-size: auto, 160px 160px;
-    mix-blend-mode: soft-light;
-    opacity: 0.22;
-    will-change: background-position, opacity, transform;
+      radial-gradient(ellipse 90% 55% at 50% -5%, hsl(var(--hero-left) / 0.38), transparent),
+      radial-gradient(ellipse 55% 40% at 92% 10%, hsl(var(--hero-right) / 0.22), transparent),
+      radial-gradient(ellipse 60% 35% at 8% 15%, hsl(var(--hero-left) / 0.18), transparent),
+      linear-gradient(180deg, hsl(var(--hero-base)), hsl(var(--background)) 90%);
   }
 
   .hero-sheet-veil {
     position: absolute;
     inset: 0;
-    background:
-      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025) 44%, rgba(255, 255, 255, 0));
-    backdrop-filter: blur(20px) saturate(112%);
-    -webkit-backdrop-filter: blur(20px) saturate(112%);
+    background: linear-gradient(
+      160deg,
+      rgba(255, 255, 255, 0.06) 0%,
+      rgba(255, 255, 255, 0.02) 40%,
+      rgba(255, 255, 255, 0) 100%
+    );
   }
 
   .hero-sheet-fade {
@@ -439,20 +369,6 @@ html[lang="ar"] {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
   }
 
-  @keyframes hero-title-shift {
-    0% {
-      background-position: 0% 50%;
-    }
-
-    50% {
-      background-position: 100% 50%;
-    }
-
-    100% {
-      background-position: 45% 100%;
-    }
-  }
-
   @keyframes hero-scroll-bob {
     0%,
     100% {
@@ -627,42 +543,3 @@ html[lang="ar"] {
   }
 }
 
-@media (min-width: 640px) {
-  .hero-blob-left {
-    height: 30rem;
-    width: 30rem;
-  }
-
-  .hero-blob-right {
-    height: 28rem;
-    width: 28rem;
-  }
-
-  .hero-blob-bottom {
-    height: 28rem;
-    width: 44rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .hero-blob-left {
-    left: -4%;
-    top: 10%;
-    height: 36rem;
-    width: 36rem;
-  }
-
-  .hero-blob-right {
-    right: -4%;
-    top: 0;
-    height: 34rem;
-    width: 34rem;
-  }
-
-  .hero-blob-bottom {
-    left: 14%;
-    bottom: -16%;
-    height: 32rem;
-    width: 52rem;
-  }
-}