From 69355fa5b080a97d7914ae039ae3d36c0d374034 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.net>
Date: Fri, 8 May 2026 08:06:27 +0000
Subject: refactor(motion): introduce easing/duration tokens

Add --ease-out-quart, --ease-in-out-quart, --duration-fast, --duration-slow in motion.css and migrate the global anchor, header, and theme-switch transitions to use them. Establishes a shared motion vocabulary for future polish.
---
 src/app.css               | 1 +
 src/routes/+layout.svelte | 8 ++++----
 src/styles/colours.css    | 8 ++++----
 src/styles/motion.css     | 6 ++++++
 4 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 src/styles/motion.css

(limited to 'src')

diff --git a/src/app.css b/src/app.css
index 46f6b621..6b1e5809 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,6 +3,7 @@
 @import "./styles/input.css";
 @import "./styles/normalise.css";
 @import "./styles/badge.css";
+@import "./styles/motion.css";
 @import "./styles/colours.css";
 @import "./styles/features.css";
 @import "./styles/scroll.css";
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a6407ff5..e1677b44 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -352,7 +352,7 @@ $: {
     z-index: 4;
     position: sticky;
     top: 1.25rem;
-    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+    transition: transform var(--duration-slow) var(--ease-out-quart);
   }
 
   .header-hidden {
@@ -376,9 +376,9 @@ $: {
   :global(a) {
     text-decoration: none;
     transition:
-      color 0.15s ease-in-out,
-      opacity 0.15s ease-in-out,
-      text-decoration-color 0.15s ease-in-out;
+      color var(--duration-fast) var(--ease-in-out-quart),
+      opacity var(--duration-fast) var(--ease-in-out-quart),
+      text-decoration-color var(--duration-fast) var(--ease-in-out-quart);
   }
 
   :global(a:hover) {
diff --git a/src/styles/colours.css b/src/styles/colours.css
index 12e64dab..eadd0c91 100644
--- a/src/styles/colours.css
+++ b/src/styles/colours.css
@@ -44,8 +44,8 @@
 
 * {
 	transition:
-		color 0.15s ease-in-out,
-		background-color 0.15s ease-in-out,
-		border-color 0.15s ease-in-out,
-		box-shadow 0.15s ease-in-out;
+		color var(--duration-fast) var(--ease-in-out-quart),
+		background-color var(--duration-fast) var(--ease-in-out-quart),
+		border-color var(--duration-fast) var(--ease-in-out-quart),
+		box-shadow var(--duration-fast) var(--ease-in-out-quart);
 }
diff --git a/src/styles/motion.css b/src/styles/motion.css
new file mode 100644
index 00000000..9e0f4257
--- /dev/null
+++ b/src/styles/motion.css
@@ -0,0 +1,6 @@
+:root {
+	--ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
+	--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
+	--duration-fast: 0.15s;
+	--duration-slow: 0.4s;
+}
-- 
cgit v1.2.3