big changes

app/globals.css

@@ -231,12 +231,12 @@
    6. Intro overlay
    The first-visit animated SVG wordmark. The SVG itself runs a 3-second
    stroke-then-fill animation (defined inside
-   /public/branding/animated_logo_intro.svg). The overlay fades out at the
-   3-second mark so the SVG completes before it disappears. Total intro
-   length is matched in page.tsx's setTimeout (3600ms).
+   /public/branding/animated_logo_intro.svg). The overlay begins fading once
+   the wordmark finishes drawing, while the page underneath eases in. Total
+   intro length is matched in page.tsx's setTimeout (3950ms).
 
    When .intro-running is on the <main> element, the page content
-   underneath is hidden so it doesn't flash through during the animation.
+   underneath is gently softened so it can reveal itself without a hard cut.
    --------------------------------------------------------------------------- */
 .intro-overlay {
   position: fixed;
@@ -244,13 +244,20 @@
   z-index: 2000;
   display: grid;
   place-items: center; /* dead-centre the SVG in the viewport */
-  animation: intro-fade-out 600ms ease 3s forwards;
+  animation: intro-fade-out 900ms cubic-bezier(0.22, 1, 0.36, 1) 3.05s forwards;
+  will-change: opacity;
 }
 
 .intro-backdrop {
   position: absolute;
   inset: 0;
-  background: var(--bg);
+  background:
+    radial-gradient(
+      circle at 50% 32%,
+      oklch(0.62 0.16 240 / 0.08),
+      transparent 30%
+    ),
+    var(--bg);
 }
 
 .intro-svg {
@@ -262,10 +269,22 @@
   object-fit: contain;
 }
 
+.site-header,
+main > section,
+main > footer {
+  transition:
+    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
+    filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: opacity, transform, filter;
+}
+
 .intro-running .site-header,
 .intro-running main > section,
 .intro-running main > footer {
-  opacity: 0;
+  opacity: 0.16;
+  transform: translateY(10px) scale(0.99);
+  filter: blur(8px);
 }
 
 @media (max-width: 720px) {