Header starts invisible on home; emerges as the hero scrolls

Previously the header strip was always visible: opaque bg, blur,
brand wordmark — even at scroll 0 when the hero was dominant. The
two competed for attention. Now the header strip is invisible to
start (opacity 0, transparent bg) on pages with a hero, and
emerges over the same scroll range the hero is collapsing through.

Header now has its own scroll-driven emergence (replaces
header-solidify):

  header-emerge   40-240px   opacity 0→1,
                              background rgba(0.0)→rgba(0.95),
                              box-shadow none→0 1px 8px (subtle weight)

  brand-focus     80-240px   filter blur(4px)→0,
                              transform scale(0.88)→1
                              (no opacity; inherits from header)

Brand-reveal renamed to brand-focus since it no longer touches
opacity. Header-solidify removed; merged into header-emerge.

Non-home pages (no .hero) keep the header visible from the start —
body:has(.hero) scopes the invisible-by-default rule. Older
browsers without @supports (animation-timeline:scroll()) see the
header visible by default; reduced-motion users likewise.

Author: claude

public/site.b7913985255d.css public/site.b5d5cf89f344.csspublic/site.b7913985255d.css renamed to public/site.b5d5cf89f344.css

@@ -36,8 +36,8 @@
         .hero { animation: hero-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 280px; }
         .hero h1 { animation: hero-h1-morph linear forwards; animation-timeline: scroll(root); animation-range: 0 240px; }
         .hero p { animation: hero-p-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 140px; }
-        body:has(.hero) header .brand { opacity: 0; filter: blur(4px); transform: scale(0.88); animation: brand-reveal linear forwards; animation-timeline: scroll(root); animation-range: 80px 240px; }
-        header { animation: header-solidify linear forwards; animation-timeline: scroll(root); animation-range: 0 240px; }
+        body:has(.hero) header { opacity: 0; background: rgba(245, 241, 235, 0); box-shadow: none; animation: header-emerge linear forwards; animation-timeline: scroll(root); animation-range: 40px 240px; }
+        body:has(.hero) header .brand { filter: blur(4px); transform: scale(0.88); animation: brand-focus linear forwards; animation-timeline: scroll(root); animation-range: 80px 240px; }
       }
     }
     @keyframes hero-fade {
@@ -49,11 +49,11 @@
     @keyframes hero-p-fade {
       to { opacity: 0; transform: translateY(-4px); }
     }
-    @keyframes brand-reveal {
-      to { opacity: 1; filter: blur(0); transform: scale(1); }
+    @keyframes brand-focus {
+      to { filter: blur(0); transform: scale(1); }
     }
-    @keyframes header-solidify {
-      to { background: rgba(245, 241, 235, 0.95); box-shadow: 0 1px 8px rgba(82, 16, 0, 0.06); }
+    @keyframes header-emerge {
+      to { opacity: 1; background: rgba(245, 241, 235, 0.95); box-shadow: 0 1px 8px rgba(82, 16, 0, 0.06); }
     }
     .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-3); }
     .card { display: block; min-height: 10rem; border: 1px solid var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface-2); color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transition-property: transform, background-color, border-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

public/site.css

@@ -36,8 +36,8 @@
         .hero { animation: hero-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 280px; }
         .hero h1 { animation: hero-h1-morph linear forwards; animation-timeline: scroll(root); animation-range: 0 240px; }
         .hero p { animation: hero-p-fade linear forwards; animation-timeline: scroll(root); animation-range: 0 140px; }
-        body:has(.hero) header .brand { opacity: 0; filter: blur(4px); transform: scale(0.88); animation: brand-reveal linear forwards; animation-timeline: scroll(root); animation-range: 80px 240px; }
-        header { animation: header-solidify linear forwards; animation-timeline: scroll(root); animation-range: 0 240px; }
+        body:has(.hero) header { opacity: 0; background: rgba(245, 241, 235, 0); box-shadow: none; animation: header-emerge linear forwards; animation-timeline: scroll(root); animation-range: 40px 240px; }
+        body:has(.hero) header .brand { filter: blur(4px); transform: scale(0.88); animation: brand-focus linear forwards; animation-timeline: scroll(root); animation-range: 80px 240px; }
       }
     }
     @keyframes hero-fade {
@@ -49,11 +49,11 @@
     @keyframes hero-p-fade {
       to { opacity: 0; transform: translateY(-4px); }
     }
-    @keyframes brand-reveal {
-      to { opacity: 1; filter: blur(0); transform: scale(1); }
+    @keyframes brand-focus {
+      to { filter: blur(0); transform: scale(1); }
     }
-    @keyframes header-solidify {
-      to { background: rgba(245, 241, 235, 0.95); box-shadow: 0 1px 8px rgba(82, 16, 0, 0.06); }
+    @keyframes header-emerge {
+      to { opacity: 1; background: rgba(245, 241, 235, 0.95); box-shadow: 0 1px 8px rgba(82, 16, 0, 0.06); }
     }
     .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-3); }
     .card { display: block; min-height: 10rem; border: 1px solid var(--hairline); border-radius: .75rem; padding: var(--space-3); background: var(--surface-2); color: inherit; text-decoration: none; box-shadow: 0 1px 3px rgba(82, 16, 0, 0.04), 0 4px 12px rgba(82, 16, 0, 0.02); transition-property: transform, background-color, border-color; transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }

src/asset_manifest.py

@@ -1,3 +1,3 @@
 # Generated by scripts/fingerprint_assets.py. Do not edit by hand.
-ASSET_PATHS = {'SITE_CSS': '/site.b7913985255d.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.dd81f5171b14.js'}
-HTML_CACHE_VERSION = '801d4d11e527'
+ASSET_PATHS = {'SITE_CSS': '/site.b5d5cf89f344.css', 'SYNTAX_JS': '/syntax-highlight.3b6c7f730d46.js', 'EDITOR_JS': '/editor.dd81f5171b14.js'}
+HTML_CACHE_VERSION = '0476ea74e5b1'