Add animated relative last-seen device timestamps

src/web/styles.css

@@ -918,24 +918,69 @@ p {
   flex: 0 0 auto;
   margin-left: auto;
   color: var(--client-text);
-  cursor: help;
+  cursor: default;
   white-space: nowrap;
 }
 
-.client-device-last-seen > .client-tooltip,
 .client-device-pin-wrap > .client-tooltip {
   right: 0;
   left: auto;
   transform: translate(0, 2px);
 }
 
-.client-device-last-seen:hover > .client-tooltip,
-.client-device-last-seen:focus-visible > .client-tooltip,
 .client-device-pin-wrap:hover > .client-tooltip,
 .client-device-pin-wrap:has(> :focus-visible) > .client-tooltip {
   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,
+.client-text-morph-value {
+  grid-area: 1 / 1;
+  justify-self: end;
+  white-space: nowrap;
+}
+
+.client-text-morph-anchor {
+  visibility: hidden;
+}
+
+.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);
+}
+
+.client-text-morph-value.is-relative {
+  opacity: 0;
+  filter: blur(4px);
+  transform: scale(0.9);
+}
+
+.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);
+}
+
+.client-device-last-seen:hover .client-text-morph-value.is-relative,
+.client-device-last-seen:focus-visible .client-text-morph-value.is-relative {
+  opacity: 1;
+  filter: blur(0);
+  transform: scale(1);
+}
+
 .client-device-last-seen:focus-visible,
 .client-device-identity:focus-visible {
   border-radius: 3px;
@@ -3947,6 +3992,7 @@ p {
   .client-device-edit,
   .client-device-edit svg,
   .client-device-edit-wrap,
+  .client-text-morph-value,
   .client-subscription-edit,
   .client-subscription-edit::after,
   .client-subscription-submit,