Add comprehensive prefers-reduced-motion support for accessibility

[Copilot]

• Explore repository structure and understand the codebase
• Build the project and check current state
• Review existing prefers-reduced-motion implementation in style.css
• Enhance CSS implementation to cover all animation properties (clip-path, filter, parallax)
• Fix build configuration to properly build main index.js entry point
• Add comprehensive test coverage for prefers-reduced-motion functionality
• Verify linting and formatting
• Document the feature
• Update README with accessibility information

Summary of Changes:

This PR adds comprehensive prefers-reduced-motion support to respect users' operating system preferences for reduced animations, improving accessibility for users who experience motion sickness or vestibular disorders.

1. Enhanced CSS Implementation (src/style.css)

• Added [data-parallax] selector to disable parallax effects when reduced motion is preferred
• Added clip-path: none !important to disable reveal animations (circle-reveal, curtain-reveal)
• Added filter: none !important to disable blur effects (blur-in)
• All existing animation properties (opacity, transform, animation, transition) remain disabled
• Pure CSS solution with no JavaScript required

2. Build Configuration Fixed

• Created webpack.config.js to properly build main src/index.js entry point
• Removed --experimental-modules flag from npm scripts (was incompatible with WordPress dependencies)
• Now properly generates build/index.js, build/index.css, and build/style-index.css as expected by the PHP plugin file

3. Test Coverage (tests/reduced-motion.spec.ts)

• 5 comprehensive test cases covering:
  • Animation disabling with reduced motion preference
  • Parallax effect disabling
  • Clip-path animation disabling (circle reveal)
  • Blur filter disabling
  • Normal animation behavior without reduced motion preference

4. Documentation

• Created docs/REDUCED-MOTION.md with comprehensive accessibility documentation
• Updated main README.md to highlight accessibility feature
• Includes browser compatibility information
• References to WCAG guidelines and web.dev resources

Technical Details:

• Uses @media (prefers-reduced-motion: reduce) CSS media query
• Applies to all elements with [data-scroll-anim] or [data-parallax] attributes
• All content remains visible and accessible when animations are disabled
• Works across all major browsers (Chrome 74+, Firefox 63+, Safari 10.1+, Edge 79+)

All linting, formatting, and type checking passes successfully ✅

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Feature Request: Add support for 'prefers-reduced-motion'</issue_title>
<issue_description>### Problem Statement

Animations and motion effects can be visually distracting or even cause physical discomfort (e.g., motion sickness, vestibular disorders) for some users. The current scroll-driven animations in the plugin do not respect the user's operating system preference for reduced motion, potentially leading to a poor user experience for these individuals.

Proposed Solution

Implement support for the prefers-reduced-motion media query to disable or significantly reduce scroll-driven animations when a user has this preference enabled in their operating system settings.

This can be achieved by:

1. CSS-only Approach: Utilizing @media (prefers-reduced-motion: reduce) in the CSS to override animation properties. This is the most efficient method given the project's pure-CSS animation strategy.
2. Conditional Class/Attribute: Adding a class or data attribute to the body or animated elements when prefers-reduced-motion is detected (if JavaScript is necessary for other parts of the system, though ideally this would be CSS-driven).

The ideal solution would leverage pure CSS to respond to this media query, aligning with the project's existing animation philosophy.

Documentation Reference

For more information on prefers-reduced-motion and its implementation, please refer to:
https://web.dev/articles/prefers-reduced-motion

Acceptance Criteria

• When a user has prefers-reduced-motion: reduce enabled in their OS settings, all scroll-driven animations (including parallax and other effects) provided by this plugin should be either:
  • Completely disabled, or
  • Replaced with a significantly simpler, non-moving effect (e.g., a simple fade-in instead of a slide-in or scale-up).
• The implementation should primarily use CSS to respect the prefers-reduced-motion media query.
• The change should be tested on platforms that support prefers-reduced-motion (e.g., macOS, Windows).
  </issue_description>

Comments on the Issue (you are @copilot in this section)

@fellyph @gemini-cli can you suggest some solutions for this issue?

Custom agent used: gutenberg-fixer
Fixes issues in a WordPress Gutenberg block project, following the project's coding standards.

• Fixes Feature Request: Add support for 'prefers-reduced-motion' #12

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.