ux: reveal Buy me a coffin pill on scroll, not on page load

The pill was visible from the top of every page, which felt like it
appeared "from nowhere" and pulled attention away from the hero.

Now starts hidden (opacity 0, translateY -8px, pointer-events none),
fades in once the user has scrolled past ~180px. Scroll listener is
passive and unmounts cleanly.

aria-hidden + tabIndex track visibility so the link does not get
focused or read by assistive tech while it is hidden.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: dotsystemsdevs

src/app/globals.css

@@ -575,7 +575,8 @@ a.subpage-inline-mail {
 }
 
 /* Floating top-right "Buy me a coffin" button — sits just below the ScannerBanner.
-   Sharp corners to match the morgue/gothic theme (no rounded pill shapes). */
+   Sharp corners to match the morgue/gothic theme. Hidden until the user scrolls
+   past the hero, then fades in. */
 .coffin-pill {
   position: fixed;
   top: 44px;
@@ -595,9 +596,17 @@ a.subpage-inline-mail {
   border-radius: 0;
   text-decoration: none;
   box-shadow: 2px 2px 0 var(--c-ink);
-  transition: transform 0.1s, box-shadow 0.1s, background 0.15s, color 0.15s;
+  transition: opacity 220ms ease, transform 220ms ease, background 0.15s, color 0.15s, box-shadow 0.1s;
   -webkit-tap-highlight-color: transparent;
-  animation: section-fade-up 600ms ease-out both;
+  opacity: 0;
+  transform: translateY(-8px);
+  pointer-events: none;
+}
+
+.coffin-pill--visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
 }
 
 .coffin-pill:hover {

src/components/CoffinPill.tsx

@@ -1,16 +1,32 @@
 'use client'
 
+import { useEffect, useState } from 'react'
 import { track } from '@vercel/analytics'
 
+const REVEAL_AT = 180 // px scrolled before the pill fades in
+
 export default function CoffinPill() {
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    function handleScroll() {
+      setVisible(window.scrollY > REVEAL_AT)
+    }
+    handleScroll()
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
   return (
     <a
       href="https://buymeacoffee.com/dotdevs"
       target="_blank"
       rel="noopener noreferrer"
       aria-label="Buy me a coffin — support the morgue"
+      aria-hidden={!visible}
+      tabIndex={visible ? 0 : -1}
       onClick={() => track('buy_me_a_coffin_clicked', { from: 'top_right_pill' })}
-      className="coffin-pill"
+      className={`coffin-pill${visible ? ' coffin-pill--visible' : ''}`}
     >
       <span aria-hidden style={{ fontSize: '13px', lineHeight: 1 }}>⚰</span>
       <span className="coffin-pill-text">Buy me a coffin</span>