implement animated gradient border cards with @property

[scriptedbyshivam]

📌 Description
This PR introduces a stunning animated gradient border card component built entirely with modern CSS. It leverages the cutting-edge @Property rule to animate conic-gradient angles — a technique previously impossible without JavaScript — creating the mesmerizing rotating border effect seen on premium websites like Linear, Vercel, and Stripe.
The component is production-ready, fully accessible, and includes four distinct color variants for flexible use cases.
🔄 Type of Change
✨ New feature (non-breaking change which adds functionality)
🐛 Bug fix
📝 Documentation update (README.md added)
♻️ Refactoring
🎨 Style/UI update
🚀 Key Changes

1. Animated Gradient Borders
   Implemented rotating conic-gradient using CSS @Property rule
   Smooth 360° rotation at 3s interval with linear timing
   Border only appears on hover for a clean default state
2. Masking Technique
   Used -webkit-mask-composite: xor to create a hollow gradient ring
   Ensures only the border shows, not the fill
   Works across all modern browsers
3. Multiple Color Variants
   .card--purple (purple → pink gradient)
   .card--green (green → cyan gradient)
   .card--orange (orange → red gradient)
   Default blue variant (indigo → purple → pink)
4. Micro-interactions
   Card lifts up 8px on hover (translateY)
   Icon scales and rotates slightly on hover
   "Learn more" link slides right on hover
   All transitions use cubic-bezier(0.4, 0, 0.2, 1) for premium feel
5. Accessibility (a11y)
   Added @media (prefers-reduced-motion: reduce) support
   Gradient border stays visible (static) for reduced-motion users
   :focus-within outline for keyboard navigation
   Semantic HTML with proper heading hierarchy
6. Responsive Design
   CSS Grid with auto-fit and minmax(280px, 1fr)
   Single column on mobile, multi-column on desktop
   Fluid typography using clamp() for headings

Closes #11398

[github-actions]

✅ Submission Validation Passed!

Great job! All required files are present.

📁 Folder: submissions/examples/gradient-border-cards

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! 🎉

[github-actions]

🎉 Pull Request Integrated!

Thank you for your contribution, @scriptedbyshivam! Your changes have been successfully merged into main and will be credited to your wall. 🚀

🎮 Join our Discord Server!
We have an official Discord server for EaseMotion CSS! Join us to connect with other developers, seek help, discuss design choices, and share your creations in the showcase channel: Join the EaseMotion CSS Discord 💜

[github-actions]

🎉 Congratulations on your PR merge, @scriptedbyshivam! 🚀

Thank you so much for your valuable contribution to EaseMotion CSS! Your code is now merged into the main branch.

🎮 Join our Discord Server!
We have an official Discord server for EaseMotion CSS! Join us to connect with other developers, seek help, discuss design choices, and share your creations in the showcase channel: Join the EaseMotion CSS Discord 💜

⭐ If you haven't already, please consider giving this repository a Star! It helps show your support, increases project visibility, and helps us grow the community. ✨

Thank you again, and happy coding! 💻