feat: animate the logo in the navbar

apps/web/app/components/ui/Navigation/Navigation.css

@@ -18,6 +18,54 @@
     animation: sh-nav-menu-in var(--motion-duration-base)
       var(--motion-ease-entrance) both;
   }
+
+  /* The "-ER" after "SHARP" in the brand, sliding out from behind the P and
+     fading in once the page has settled. The same reveal the home hero used to
+     run on its wordmark, now owned by the navigation. The suffix sits in its
+     own box whose inline-start edge is the P's right edge, and that box clips;
+     the mark starts a full box-width back - entirely beside "SHARP", so
+     nothing overlaps it - and travels forward to rest, with the opacity
+     reaching 1 before the travel ends, so the glyphs read as solid for the
+     last, slowest part of the decelerating slide. The translate is physical
+     (translateX) on purpose: the lockup row is pinned to dir="ltr" because a
+     Latin wordmark never mirrors, so the P is always left of the suffix, in
+     Arabic too. Pure CSS, so it runs from the server-rendered HTML without
+     waiting for hydration, and the `both` fill keeps the suffix hidden through
+     the delay instead of flashing in first. It replays whenever the navigation
+     mounts again, e.g. on a client-side navigation back to a page. Under
+     prefers-reduced-motion the animation is removed outright - app.css only
+     collapses the duration and would leave the delay holding the suffix
+     hidden - so the full name is simply there from the start. */
+  .sh-brand-suffix {
+    overflow: hidden;
+  }
+
+  .sh-brand-suffix__mark {
+    animation: sh-brand-suffix-in var(--motion-duration-reveal)
+      var(--motion-ease-entrance) var(--motion-delay-reveal) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sh-brand-suffix__mark {
+      animation: none;
+    }
+  }
+}
+
+@keyframes sh-brand-suffix-in {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  60% {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 
 @keyframes sh-nav-menu-in {