4 variations — scroll inside each preview to see the animation
A gradient div below the nav fades from 0 to full opacity over 60px of scroll. Simple and smooth.
Shadow gradient starts at 0 height and grows to 16px as you scroll. Creates a 'peeling off the page' feel.
No extra element — a CSS box-shadow on the nav itself toggles on after 8px of scroll. Clean binary transition with a smooth ease.
Two layers: a thin crimson-tinted line appears immediately, then a warm gradient fades in behind it. Matches the 'warm professional' design language.