Refine device last-seen text morph animation

src/web/components/DevicesPanel.jsx

@@ -82,17 +82,6 @@ export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
       inert={!open ? true : undefined}
     >
       <div className="client-instructions-sheet client-devices-sheet">
-        <svg className="client-text-morph-filter" aria-hidden="true">
-          <defs>
-            <filter id="client-text-morph-goo">
-              <feColorMatrix
-                in="SourceGraphic"
-                type="matrix"
-                values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -8"
-              />
-            </filter>
-          </defs>
-        </svg>
         <button
           ref={closeRef}
           className="client-drawer-close"

src/web/styles.css

@@ -933,16 +933,8 @@ p {
   transform: translate(0, 0);
 }
 
-.client-text-morph-filter {
-  position: absolute;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-}
-
 .client-text-morph {
   display: inline-grid;
-  filter: url('#client-text-morph-goo');
 }
 
 .client-text-morph-anchor,
@@ -958,20 +950,23 @@ p {
 
 .client-text-morph-value {
   will-change: opacity, filter, transform;
-  transition: opacity 240ms ease, filter 280ms cubic-bezier(0.16, 1, 0.3, 1), transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
+  filter: blur(0);
+  transform: translateY(0) scale(1);
+  transform-origin: right center;
+  transition: opacity 360ms ease, filter 480ms cubic-bezier(0.16, 1, 0.3, 1), transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .client-text-morph-value.is-relative {
   opacity: 0;
-  filter: blur(4px);
-  transform: scale(0.9);
+  filter: blur(8px);
+  transform: translateY(0.18em) scale(0.96);
 }
 
 .client-device-last-seen:hover .client-text-morph-value.is-date,
 .client-device-last-seen:focus-visible .client-text-morph-value.is-date {
   opacity: 0;
-  filter: blur(4px);
-  transform: scale(1.08);
+  filter: blur(8px);
+  transform: translateY(-0.18em) scale(1.04);
 }
 
 .client-device-last-seen:hover .client-text-morph-value.is-relative,