From 4208e51775cc273d57ac8c3c96c8a23564651e13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= <candrietti@beapi.fr>
Date: Fri, 2 Oct 2026 12:31:23 +0200
Subject: [PATCH 1/3] Fix (reduced-motion): update mixin to utilize class-based
 approach for reduced motion handling

---
 src/scss/02-tools/_m-reduced-motion.scss | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/scss/02-tools/_m-reduced-motion.scss b/src/scss/02-tools/_m-reduced-motion.scss
index d0fab796..6382599c 100644
--- a/src/scss/02-tools/_m-reduced-motion.scss
+++ b/src/scss/02-tools/_m-reduced-motion.scss
@@ -1,6 +1,9 @@
 /**
  * Reduced-motion for animations
  *
+ * Driven by `html.js-animation` / `html.no-js-animation` (toggled from
+ * prefers-reduced-motion in header.php, and by the a11y access config plugin).
+ *
  * @author Paolo Tesei
  *
  * @param $reduce
@@ -8,22 +11,24 @@
  * Examples :
  *
  *      @include reduced-motion { ... }
- *          return @media screen and (prefers-reduced-motion : reduce) { ... }
+ *          → html.no-js-animation & { ... }
  *
  *      you can add heavy animation using :
  *
  *      @include reduced-motion (false) { ... }
- *          return @media screen and (prefers-reduced-motion : no-preference) { ... }
+ *          → html.js-animation & { ... }
  *
  */
 
 @mixin reduced-motion($reduce: true) {
-	@if ($reduce == true) {
-		@media screen and (prefers-reduced-motion: reduce) {
+	$class: if($reduce, "no-js-animation", "js-animation");
+
+	@if not & {
+		html.#{$class} {
 			@content;
 		}
 	} @else {
-		@media screen and (prefers-reduced-motion: no-preference) {
+		html.#{$class} & {
 			@content;
 		}
 	}

From 638da7d12425ba7253c7d7e30a6c916beb92920f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= <candrietti@beapi.fr>
Date: Fri, 2 Oct 2026 12:37:38 +0200
Subject: [PATCH 2/3] refactor(reduced-motion): rename mixins and streamline
 motion preference handling

---
 src/scss/02-tools/_m-reduced-motion.scss | 26 ++++++++++++++++--------
 src/scss/03-base/_variables-css.scss     | 12 -----------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/scss/02-tools/_m-reduced-motion.scss b/src/scss/02-tools/_m-reduced-motion.scss
index 6382599c..4a50616b 100644
--- a/src/scss/02-tools/_m-reduced-motion.scss
+++ b/src/scss/02-tools/_m-reduced-motion.scss
@@ -1,28 +1,22 @@
 /**
- * Reduced-motion for animations
+ * Motion preference helpers for animations
  *
  * Driven by `html.js-animation` / `html.no-js-animation` (toggled from
  * prefers-reduced-motion in header.php, and by the a11y access config plugin).
  *
  * @author Paolo Tesei
  *
- * @param $reduce
- *
  * Examples :
  *
  *      @include reduced-motion { ... }
  *          → html.no-js-animation & { ... }
  *
- *      you can add heavy animation using :
- *
- *      @include reduced-motion (false) { ... }
+ *      @include allows-motion { ... }
  *          → html.js-animation & { ... }
  *
  */
 
-@mixin reduced-motion($reduce: true) {
-	$class: if($reduce, "no-js-animation", "js-animation");
-
+@mixin _html-animation-class($class) {
 	@if not & {
 		html.#{$class} {
 			@content;
@@ -33,3 +27,17 @@
 		}
 	}
 }
+
+// Styles when motion is reduced (`html.no-js-animation`).
+@mixin reduced-motion {
+	@include _html-animation-class("no-js-animation") {
+		@content;
+	}
+}
+
+// Styles when animations are allowed (`html.js-animation`).
+@mixin allows-motion {
+	@include _html-animation-class("js-animation") {
+		@content;
+	}
+}
diff --git a/src/scss/03-base/_variables-css.scss b/src/scss/03-base/_variables-css.scss
index 8b7b18f8..babf0cc1 100644
--- a/src/scss/03-base/_variables-css.scss
+++ b/src/scss/03-base/_variables-css.scss
@@ -43,23 +43,11 @@
 	--paragraph--line-height-small: 1.4;
 	--paragraph--line-height-default: 1.4;
 
-	/*
-     * Animation speeds
-     */
-	--speed: 1s;
-
 	/*
      * Admin bar
      */
 	--wp-admin-bar-height: var(--wp-admin--admin-bar--height, 0rem);
 
-	/*
-     * A11y reduced motion
-     */
-	@include reduced-motion {
-		--speed: 0s;
-	}
-
 	/*
      * Global breakpoints
      */

From 459d1ac6976145868787f2ef694e993a77814212 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ce=CC=81dric=20Andrietti?= <candrietti@beapi.fr>
Date: Fri, 2 Oct 2026 12:59:21 +0200
Subject: [PATCH 3/3] fix(reduced-motion): enhance mixin to support root and
 html context for animation classes

---
 src/scss/02-tools/_m-reduced-motion.scss | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/scss/02-tools/_m-reduced-motion.scss b/src/scss/02-tools/_m-reduced-motion.scss
index 4a50616b..53f798c7 100644
--- a/src/scss/02-tools/_m-reduced-motion.scss
+++ b/src/scss/02-tools/_m-reduced-motion.scss
@@ -10,15 +10,21 @@
  *
  *      @include reduced-motion { ... }
  *          → html.no-js-animation & { ... }
+ *          → html.no-js-animation { ... } when used at root / inside :root or html
  *
  *      @include allows-motion { ... }
  *          → html.js-animation & { ... }
+ *          → html.js-animation { ... } when used at root / inside :root or html
  *
  */
 
 @mixin _html-animation-class($class) {
-	@if not & {
-		html.#{$class} {
+	// `:root` and `html` are the same element as the animation class host, so they
+	// cannot appear as descendants of `html.#{$class}`.
+	$parent: "#{&}";
+
+	@if not & or $parent == ":root" or $parent == "html" {
+		@at-root html.#{$class} {
 			@content;
 		}
 	} @else {