Adds a fixed bottom-right reading time badge to blog post pages that appears at 15% scroll depth, counts down remaining read time as the user scrolls, and disappears once the author card enters the viewport.

Description

Blog post pages lacked any reading progress feedback. This adds a non-intrusive "N mins remaining" pill that tracks scroll position relative to article content.

Type of Change

• New feature (e.g., new page, component, or functionality)
• UI/UX improvement (design, layout, or styling updates)

Changes Made

src/components/ReadingTimeIndicator/index.tsx — new component

• Hidden until page scroll ≥ 15%; hides when author card enters viewport
• Remaining time = ceil(totalReadTime × (1 − readProgress)) where readProgress is scrollY / authorCardAbsoluteTop
• Fallback when no author card: hides at 90% scroll, progress derived from overall page scroll %
• Scroll handler throttled via requestAnimationFrame to avoid layout thrash
• Accessible: role="status", aria-live="polite", descriptive aria-label
• Correct pluralisation: "1 min remaining" / "N mins remaining"

src/components/ReadingTimeIndicator/styles.module.css — new styles

• position: fixed; bottom: 24px; right: 24px teal pill with dark-mode variant and mobile sizing

src/theme/BlogPostItem/Footer/index.tsx — wired up

• useRef attached to the author card <section> as the content-end sentinel
• <ReadingTimeIndicator totalReadTime={roundedReadTime} authorCardRef={authorCardRef} /> rendered for all isBlogPostPage renders

Dependencies

No new dependencies.

Checklist

• My code follows the style guidelines of this project.
• I have tested my changes across major browsers and devices
• My changes do not generate new console warnings or errors .
• I ran npm run build and attached screenshot(s) in this PR.
• This is already assigned Issue to me, not an unassigned issue.