From 9af58bc970298d9a5d50cb3cbddb5563e59881b0 Mon Sep 17 00:00:00 2001
From: Kawa <us.fame.sq@gmail.com>
Date: Wed, 1 Apr 2026 13:28:38 +0200
Subject: [PATCH] feat(11-02): add step transition animation with
 reduced-motion guard

- Add @keyframes step-in (opacity 0->1, translateY 8px->0, 200ms ease-out) to index.css
- Register --animate-step-in token in @theme block
- Add @media prefers-reduced-motion: reduce guard disabling animation
- Add key={state.currentStep} and animate-step-in class to step wrapper in App.tsx
---
 src/App.tsx   |  2 +-
 src/index.css | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/App.tsx b/src/App.tsx
index 0910892..42729f4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -62,7 +62,7 @@ function WizardShell() {
         ) : (
           <>
             <StepIndicator />
-            <div className="mt-8">
+            <div key={state.currentStep} className="mt-8 animate-step-in">
               {CurrentStep}
             </div>
           </>
diff --git a/src/index.css b/src/index.css
index da21110..f8c741a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -66,4 +66,22 @@
   --color-on-success:           var(--r2b-on-success);
   --color-warning:              var(--r2b-warning);
   --color-on-warning:           var(--r2b-on-warning);
+  --animate-step-in:            step-in 200ms ease-out both;
+}
+
+@keyframes step-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-step-in {
+    animation: none !important;
+  }
 }