How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Footer: 482px tall, deep ground #1D1417, ivory type #EFE5D7. A 1440px stage with 48px side padding.
- Top row (173px from the footer top): link columns on the left 118px apart, each a Marcellus 24px uppercase heading with its links 25px below (uppercase 16px, 25px apart, turning henna #B8663A on hover over 250ms); a social column with three 24px icons; and on the far right a 133px right-aligned copyright block (14px uppercase).
- Wordmark: the brand name across the whole width, one element per letter, sitting on the footer's bottom edge with a 2px overhang so it looks cut by the edge. Gold #BF9454.
- Progress --wp: 0 to 1, measured on the footer (the wordmark alone can never climb high enough). It starts when the footer's top reaches 85% of the viewport height and ends when the whole footer is visible: (0.85 × vh - top) / (0.85 × vh - (vh - footerHeight)), clamped.
- Per letter i of n: lt = clamp(0, (wp - i/n × 0.66) / 0.34, 1), then opacity: lt; filter: blur((1 - lt) × 24px); transform: translateY((1 - lt) × 105px) scaleY(1 + (1 - lt) × 0.62) with the transform origin at the letter's bottom center. Early letters finish first; the last starts once two thirds of the progress has passed.
- Under 1200px: the footer grows with its content (56px top padding, 48px on phones), the row stacks (columns, then copyright), links wrap, and the wordmark sits in normal flow at the bottom.
- Fallbacks: --wp defaults to 1, so without JavaScript the wordmark is simply shown. Reduced motion: letters are static.