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 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'src/routes/+layout.svelte')

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;
     }
 
-- 
cgit v1.2.3

