From 4ba484b9cf8df2e903286ef538124f0cf00a81f7 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.net>
Date: Tue, 19 May 2026 01:17:32 +0000
Subject: style(motion): introduce --duration-base for panel-class transitions

Adds 0.24s between --duration-fast (0.15s) and --duration-slow (0.4s)
for animations that live in the touch-UI floor: panels, sheets,
drawers, modals. 150ms reads as crisp on desktop but undershoots the
200-300ms range touch UI conventions prescribe (finger occludes the
target during the tap, deliberation pace is slower, and high-DPI
displays compress small translateY into less perceptible motion).

Applies the new token to the mobile hamburger panel open/close
transition and to the bar-morph that fires on the same tap, so the
bars and the panel finish arriving together.
---
 src/routes/+layout.svelte | 14 +++++++-------
 src/styles/motion.css     |  1 +
 2 files changed, 8 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 75b755c0..6ebc8b4e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -509,8 +509,8 @@ $: {
       background: var(--base06);
       border-radius: 2px;
       transition:
-        transform var(--duration-fast) var(--ease-in-out-quart),
-        opacity var(--duration-fast) var(--ease-in-out-quart);
+        transform var(--duration-base) var(--ease-in-out-quart),
+        opacity var(--duration-base) var(--ease-in-out-quart);
     }
 
     .menu-toggle[aria-expanded='true'] .menu-bar:nth-child(1) {
@@ -547,9 +547,9 @@ $: {
       transform: translateY(-8px) scale(0.96);
       pointer-events: none;
       transition:
-        opacity var(--duration-fast) var(--ease-out-quart),
-        transform var(--duration-fast) var(--ease-out-quart),
-        visibility 0s linear var(--duration-fast);
+        opacity var(--duration-base) var(--ease-out-quart),
+        transform var(--duration-base) var(--ease-out-quart),
+        visibility 0s linear var(--duration-base);
     }
 
     .header.menu-open .nav-items {
@@ -558,8 +558,8 @@ $: {
       transform: translateY(0) scale(1);
       pointer-events: auto;
       transition:
-        opacity var(--duration-fast) var(--ease-out-quart),
-        transform var(--duration-fast) var(--ease-out-quart),
+        opacity var(--duration-base) var(--ease-out-quart),
+        transform var(--duration-base) var(--ease-out-quart),
         visibility 0s linear 0s;
     }
 
diff --git a/src/styles/motion.css b/src/styles/motion.css
index 9e0f4257..28de2180 100644
--- a/src/styles/motion.css
+++ b/src/styles/motion.css
@@ -2,5 +2,6 @@
 	--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-base: 0.24s;
 	--duration-slow: 0.4s;
 }
-- 
cgit v1.2.3