feat: add forgot password email token lifecycle demo with multi-step form flow (#647)

[Pcmhacker-piro]

Closes #647

Pull Request Description

Adds a visual simulation of the full "Forgot Password" flow with secure email token lifecycle. Uses pure CSS radio-button toggles to walk through 4 steps — request, email sent, reset form, success — with a progress indicator and a token lifecycle panel explaining the crypto/DB operations at each stage.

---

Type of Change

• ✨ New animation / hover effect
• 🧩 New component
• 📝 Documentation improvement
• 🐛 Bug fix in an existing submission
• Other (describe below)

---

Submission Checklist

• All changes are inside submissions/examples/forgot-password-token-lifecycle/
• Includes demo.html — self-contained, opens in browser with no server
• Includes style.css — raw CSS for the proposed feature
• Includes README.md — what it does, how to use it, why it fits EaseMotion CSS
• No changes to core/
• No changes to components/
• One feature per PR (no bundled unrelated changes)

---

Feature Description

What does this add?

A 4-step password reset wizard that simulates the backend token lifecycle:

1. Forgot Password — email input form
2. Email Sent — confirmation with 15-minute token expiry countdown
3. Reset Form — new password + confirm with rule hints
4. Success — confirmation with token invalidation notice

A Token Lifecycle panel at the bottom maps each step to the actual crypto/DB operation (crypto.randomBytes → SHA-256 hash → expiry check → field clear).

How does a developer use it?

<!-- Include the CSS -->
<link rel="stylesheet" href="style.css">

<!-- Radio inputs control the step -->
<input type="radio" name="fp-step" id="fp-step-1-forgot" class="fp-step-radio" checked>

<!-- Click labels to advance between steps -->
<label for="fp-step-2-email-sent" class="fp-btn">Send Reset Link</label>
Why does it fit EaseMotion CSS?
The demo maps a real backend security pattern (password reset token lifecycle) to a pure CSS interactive prototype — matching EaseMotion's philosophy of human-readable, no-build, animation-first components. Developers can use this as a UI scaffold before wiring up actual auth middleware.
Demo
- Demo added (demo.html works by opening directly in a browser)
Browser Testing
- Chrome
- Firefox
- Edge
- Safari (optional but appreciated)
Notes for Maintainer
The demo uses :checked sibling selectors for multi-step state management with animated transitions between steps. The progress bar highlights active/completed steps and the token lifecycle panel updates its indicators per step.
Closes #647

[github-actions]

✅ Submission Validation Passed!

Great job! All required files are present.

📁 Folder: submissions/examples/forgot-password-token-lifecycle

Files found:

• ✅ demo.html
• ✅ style.css
• ✅ README.md

🚀 Next Steps:

• The maintainer will review your PR
• Respond to any feedback if requested
• Once approved, your contribution will be merged!

Thank you for contributing to EaseMotion CSS! 🎉

[Pcmhacker-piro]

heyy @SAPTARSHI-coder
i fixed the assign issue so pls check this