Changed the behavior of the 'more' bar into something less annoying, and re-did the entire project grid component chain.

app/globals.css

@@ -35,6 +35,9 @@
   --info:            #2e7db5;
   --info-bg:         rgba(46, 125, 181, 0.07);
 
+  /*  Threshold band (profile "more" reveal) -- darkens in light mode  */
+  --threshold-tint:  rgba(0, 0, 0, 0.035);
+
   /*  Overlay / depth  */
   --overlay:         rgba(0, 0, 0, 0.2);
   --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.06);
@@ -117,6 +120,9 @@
   --info:            #60a5d6;
   --info-bg:         rgba(96, 165, 214, 0.08);
 
+  /*  Threshold band (profile "more" reveal) -- lightens in dark mode  */
+  --threshold-tint:  rgba(255, 255, 255, 0.035);
+
   /*  Overlay / depth  */
   --overlay:         rgba(0, 0, 0, 0.55);
   --shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.25);
@@ -132,8 +138,27 @@
   padding: 0;
 }
 
+/* The page below the profile "more" threshold is tinted. Painting it as the
+   root background rather than as an element means it covers the whole document
+   for free, and -- unlike an oversized absolutely-positioned box -- it cannot
+   extend the scrollable area. `--threshold-y` is the line's distance from the
+   top of the document, set from ProfileMore; with no threshold on the page the
+   100% fallback puts the stop at the bottom, so nothing is tinted. */
+html {
+  background-color: var(--bg);
+  background-image: linear-gradient(
+    to bottom,
+    transparent 0,
+    transparent var(--threshold-y, 100%),
+    var(--threshold-tint) var(--threshold-y, 100%),
+    var(--threshold-tint) 100%
+  );
+  background-repeat: no-repeat;
+}
+
 body {
-  background: var(--bg);
+  /* Transparent, so the root gradient above shows through. */
+  background: transparent;
   color: var(--fg);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -190,22 +215,48 @@ nav {
   }
 
   .project-grid {
-    scrollbar-width: 10px;
+    scrollbar-width: thin;
   }
   
 }
 
-@keyframes wiggle {
-  0%, 100% { transform: rotate(0deg); }
-  15% { transform: rotate(-1deg); }
-  30% { transform: rotate(1deg); }
-  45% { transform: rotate(-1deg); }
-  60% { transform: rotate(1deg); }
-  75% { transform: rotate(-1deg); }
+/* ---- project card selection ---- *
+ *
+ * Browsers with the View Transitions API morph the card between its grid slot
+ * and the full-width slot; `data-vt="off"` marks the fallback path, where the
+ * newly-selected card plays this enter animation instead.
+ */
+
+@keyframes card-select-in {
+  from {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
 }
 
-.wiggle {
-  animation: wiggle 0.4s ease-in-out infinite;
+[data-vt="off"] .project-card-selected {
+  animation: card-select-in 350ms var(--ease-out) both;
+}
+
+::view-transition-group(*) {
+  animation-duration: 380ms;
+  animation-timing-function: var(--ease-out);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-vt="off"] .project-card-selected {
+    animation: none;
+  }
+
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
 }