From 04c4d8e2f3bc26b09fb767784d84daae51f920ce Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 1 Aug 2026 11:43:44 -0700
Subject: [PATCH] fix(styles): restore transition timing Tailwind was silently
 dropping
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`tailwindcss-animate` adds a `duration-*` utility for `animation-duration`,
which collides with core's `transition-duration`. For a named value Tailwind
emits both rules, but for an arbitrary value it cannot pick one — so it drops
the class entirely and warns.

The result is 52 usages across 13 files that produced **no CSS at all**.
Elements marked `transition-transform duration-[1700ms]
ease-[cubic-bezier(0.22,1,0.36,1)]` had neither a duration nor an easing
function: they snapped instead of animating. Most of it is the landing hero.

Verified by compiling the stylesheet on both sides:

  transition-duration: 1700ms                              before=0 after=1
  transition-duration: 420ms                               before=0 after=1
  transition-duration: 175ms                               before=0 after=1
  transition-timing-function: cubic-bezier(0.22,1,0.36,1)  before=0 after=1
  transition-timing-function: cubic-bezier(0.23,1,0.32,1)  before=0 after=1

The stylesheet grows 1,425 bytes — exactly the rules that were missing — and
the 16 ambiguity warnings on every dev start go to zero.

Every usage is in a transition context (`transition-opacity`,
`transition-transform`, `transition-[...]`); none sits alongside an `animate-*`
utility, so `transition-duration`/`transition-timing-function` is the right
half of the collision in all 52 cases.
---
 .../hero-platform-loop/hero-platform-loop.tsx |  2 +-
 .../hero-workflow-stage.tsx                   |  4 ++--
 .../components/hero-visual/block-handles.tsx  |  4 ++--
 .../components/hero-visual/hero-visual.tsx    | 16 ++++++++--------
 .../components/hero-visual/stage-home.tsx     | 19 ++++++++++---------
 .../components/hero-visual/stage-workflow.tsx |  5 +++--
 .../components/hero-visual/workflow-block.tsx |  2 +-
 .../landing-preview-chat.tsx                  |  4 ++--
 .../navbar/components/logo-mark/logo-mark.tsx |  2 +-
 .../enterprise-platform-loop.tsx              |  2 +-
 .../build-methods-graphic.tsx                 |  6 +++---
 .../workspace-chrome/workspace-chrome.tsx     |  2 +-
 .../mothership-view/mothership-view.tsx       |  2 +-
 13 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.tsx
index eb3d8b1c72a..9e8144d2c0d 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.tsx
@@ -163,7 +163,7 @@ export function HeroPlatformLoop() {
           </div>
           <div
             className={cn(
-              'h-full shrink-0 overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)]',
+              'h-full shrink-0 overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-200 [transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)]',
               stageOpen ? 'w-1/2 border-l' : 'w-0 min-w-0 border-l-0'
             )}
           >
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage.tsx b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage.tsx
index 3164086c537..fc235d22e59 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-workflow-stage.tsx
@@ -143,7 +143,7 @@ export function HeroWorkflowStage({
                   stroke='var(--workflow-edge)'
                   strokeWidth={2}
                   strokeLinecap='round'
-                  className='transition-[stroke-dashoffset] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] [stroke-dasharray:1]'
+                  className='transition-[stroke-dashoffset] duration-500 [stroke-dasharray:1] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
                   style={{ strokeDashoffset: visible ? 0 : 1 } as CSSProperties}
                 />
               )
@@ -156,7 +156,7 @@ export function HeroWorkflowStage({
               <div
                 key={block.id}
                 className={cn(
-                  'pointer-events-none absolute transition-[opacity,scale] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]',
+                  'pointer-events-none absolute transition-[opacity,scale] duration-300 [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
                   built ? 'scale-100 opacity-100' : 'scale-[0.94] opacity-0'
                 )}
                 style={{ left: block.x, top: block.y, width: BLOCK_WIDTH }}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/block-handles.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/block-handles.tsx
index 5b27138b4d1..4d9b15763b6 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/block-handles.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-visual/block-handles.tsx
@@ -21,7 +21,7 @@ export function BlockHandles({ block, handlesVisible = true }: BlockHandlesProps
         <span
           aria-hidden
           className={cn(
-            '-translate-y-1/2 absolute top-5 left-[-7px] h-5 w-[7px] rounded-l-[2px] bg-[var(--workflow-edge)] transition-opacity duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
+            '-translate-y-1/2 absolute top-5 left-[-7px] h-5 w-[7px] rounded-l-[2px] bg-[var(--workflow-edge)] transition-opacity [transition-duration:360ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
             handlesVisible ? 'opacity-100' : 'opacity-0'
           )}
         />
@@ -30,7 +30,7 @@ export function BlockHandles({ block, handlesVisible = true }: BlockHandlesProps
         <span
           aria-hidden
           className={cn(
-            '-translate-y-1/2 absolute top-5 right-[-7px] h-5 w-[7px] rounded-r-[2px] bg-[var(--workflow-edge)] transition-opacity duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
+            '-translate-y-1/2 absolute top-5 right-[-7px] h-5 w-[7px] rounded-r-[2px] bg-[var(--workflow-edge)] transition-opacity [transition-duration:360ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
             handlesVisible ? 'opacity-100' : 'opacity-0'
           )}
         />
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/hero-visual.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/hero-visual.tsx
index b163bf0672d..e3f46d6790a 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/hero-visual.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-visual/hero-visual.tsx
@@ -962,7 +962,7 @@ export function HeroVisual() {
           GitHub block. FOCUS is the identity transform (block 1 centered); only
           the pull-out animates. */}
       <div
-        className='absolute inset-0 transform-gpu transition-transform duration-[1700ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform'
+        className='absolute inset-0 transform-gpu transition-transform will-change-transform [transition-duration:1700ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
         style={{
           transform: sceneTransform,
           transformOrigin: 'center',
@@ -971,7 +971,7 @@ export function HeroVisual() {
       >
         {showCard && (
           <div
-            className='absolute inset-0 translate-y-0 scale-100 transition-opacity duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)]'
+            className='absolute inset-0 translate-y-0 scale-100 transition-opacity [transition-duration:420ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
             style={{ opacity: workflowContentFaded ? 0 : 1 }}
           >
             <div
@@ -987,7 +987,7 @@ export function HeroVisual() {
                 // slide beats are written imperatively (a transition here would
                 // fight the per-frame writes).
                 (phase === 'toSend' || phase === 'zoomSend' || phase === 'answer') &&
-                  'transition-transform duration-[850ms] ease-[cubic-bezier(0.65,0,0.35,1)]'
+                  'transition-transform [transition-duration:850ms] [transition-timing-function:cubic-bezier(0.65,0,0.35,1)]'
               )}
               style={zoomStyle}
             >
@@ -1030,7 +1030,7 @@ export function HeroVisual() {
             {/* Edges (scene space, origin = panel center). Drawn as the camera
                 follows the connection to each revealed block. */}
             <svg
-              className='absolute top-1/2 left-1/2 overflow-visible transition-opacity duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)]'
+              className='absolute top-1/2 left-1/2 overflow-visible transition-opacity [transition-duration:420ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
               width='1'
               height='1'
               fill='none'
@@ -1047,7 +1047,7 @@ export function HeroVisual() {
                     stroke='var(--workflow-edge)'
                     strokeWidth={2 * WORKFLOW_FOCUS_SCALE}
                     strokeLinecap='round'
-                    className='transition-[stroke-dashoffset] ease-[cubic-bezier(0.22,1,0.36,1)] [stroke-dasharray:1]'
+                    className='transition-[stroke-dashoffset] [stroke-dasharray:1] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
                     style={
                       {
                         strokeDashoffset: drawn ? 0 : 1,
@@ -1078,7 +1078,7 @@ export function HeroVisual() {
                 <div
                   key={block.id}
                   className={cn(
-                    'absolute transform-gpu transition-[opacity,transform,width,height,top,left] duration-[520ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform',
+                    'absolute transform-gpu transition-[opacity,transform,width,height,top,left] will-change-transform [transition-duration:520ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
                     showKbShell &&
                       'overflow-hidden rounded-xl border border-[var(--border-muted)] bg-[var(--surface-4)] p-[3px] shadow-[var(--shadow-overlay)]'
                   )}
@@ -1143,7 +1143,7 @@ export function HeroVisual() {
             // GPU-promoted: its per-frame transform writes composite on their own
             // layer, so the slide + dock read as smooth sub-pixel motion instead of
             // jittering as the position pixel-snaps each frame.
-            'pointer-events-none absolute top-0 left-0 z-20 transform-gpu transition-opacity duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] will-change-transform',
+            'pointer-events-none absolute top-0 left-0 z-20 transform-gpu transition-opacity duration-300 will-change-transform [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
             loaderFading ? 'opacity-0' : 'opacity-100'
           )}
           style={{ transformOrigin: '0 0' }}
@@ -1164,7 +1164,7 @@ export function HeroVisual() {
 
       <div
         ref={cursorElRef}
-        className='pointer-events-none absolute top-0 left-0 z-30 transition-opacity duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]'
+        className='pointer-events-none absolute top-0 left-0 z-30 transition-opacity duration-200 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]'
         style={{ opacity: showCursor ? 1 : 0 }}
       >
         <svg
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-home.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-home.tsx
index f43dd49f1cd..816c5ff547c 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-home.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-home.tsx
@@ -98,7 +98,8 @@ interface StageHomeProps {
 }
 
 /** Staggered enter for a chat bubble - translateY + opacity + blur, interruptible. */
-const ENTER_BASE = 'transition-[opacity,transform,filter] ease-[cubic-bezier(0.2,0,0,1)]'
+const ENTER_BASE =
+  'transition-[opacity,transform,filter] [transition-timing-function:cubic-bezier(0.2,0,0,1)]'
 const enterState = (shown: boolean) =>
   shown ? 'translate-y-0 opacity-100 blur-0' : 'translate-y-1.5 opacity-0 blur-[3px]'
 
@@ -220,7 +221,7 @@ export function StageHome({
             morphs to a block. */}
         <div
           className={cn(
-            'overflow-hidden text-center transition-[height,opacity] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)]',
+            'overflow-hidden text-center transition-[height,opacity] duration-300 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
             mode === 'compose'
               ? 'h-[40px] opacity-100'
               : mode === 'sending' || mode === 'thinking'
@@ -251,8 +252,8 @@ export function StageHome({
             // and read as jitter. Every other beat eases width/height/transform with
             // the shared curve.
             holdCardHeight
-              ? 'transition-[width,transform] duration-[620ms] ease-[cubic-bezier(0.22,1,0.36,1)]'
-              : 'transition-[width,height,transform] duration-[620ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
+              ? 'transition-[width,transform] [transition-duration:620ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
+              : 'transition-[width,height,transform] [transition-duration:620ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
             // Nudge up to cancel the chat column's greeting+gap offset, so the
             // card centers exactly where the focused workflow block lands.
             isBlock && '-translate-y-[10px]'
@@ -282,7 +283,7 @@ export function StageHome({
           <div
             ref={contentRef}
             className={cn(
-              'absolute inset-x-0 flex flex-col gap-2 px-2.5 py-2 transition-opacity duration-[220ms] ease-[cubic-bezier(0.23,1,0.32,1)]',
+              'absolute inset-x-0 flex flex-col gap-2 px-2.5 py-2 transition-opacity [transition-duration:220ms] [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
               holdCardHeight ? 'bottom-0' : 'top-0',
               isBlock && 'pointer-events-none opacity-0'
             )}
@@ -297,7 +298,7 @@ export function StageHome({
               <div
                 ref={inputRef}
                 className={cn(
-                  'min-h-[24px] px-1 py-1 font-body text-[15px] text-[var(--text-primary)] leading-[24px] tracking-[-0.015em] transition-opacity duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]',
+                  'min-h-[24px] px-1 py-1 font-body text-[15px] text-[var(--text-primary)] leading-[24px] tracking-[-0.015em] transition-opacity duration-200 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
                   isCompose ? 'opacity-100' : 'opacity-0',
                   !inputInFlow && 'pointer-events-none absolute inset-x-0 top-0'
                 )}
@@ -346,7 +347,7 @@ export function StageHome({
                 ref={sendRef}
                 aria-hidden='true'
                 className={cn(
-                  'flex size-[28px] shrink-0 items-center justify-center rounded-full bg-[#383838] transition-[opacity,transform,background-color] duration-150 ease-[cubic-bezier(0.23,1,0.32,1)]',
+                  'flex size-[28px] shrink-0 items-center justify-center rounded-full bg-[#383838] transition-[opacity,transform,background-color] duration-150 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
                   // Visible only while composing; once send is hit the root loader's
                   // settled orb takes its place (it stays laid out as the loader's
                   // measure + slide-from target).
@@ -370,7 +371,7 @@ export function StageHome({
                     strokeLinecap='round'
                     strokeLinejoin='round'
                     className={cn(
-                      'transition-[stroke-dashoffset] duration-[520ms] ease-[cubic-bezier(0.23,1,0.32,1)] [stroke-dasharray:1]',
+                      'transition-[stroke-dashoffset] [stroke-dasharray:1] [transition-duration:520ms] [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
                       isCompose ? '[stroke-dashoffset:0]' : '[stroke-dashoffset:1]'
                     )}
                   />
@@ -386,7 +387,7 @@ export function StageHome({
           <div
             aria-hidden='true'
             className={cn(
-              'absolute inset-x-0 top-0 transition-opacity duration-300 ease-[cubic-bezier(0.23,1,0.32,1)]',
+              'absolute inset-x-0 top-0 transition-opacity duration-300 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
               // Hold off until the chat content (≈220ms fade) is gone, then fade in.
               isBlock ? 'opacity-100 [transition-delay:280ms]' : 'pointer-events-none opacity-0'
             )}
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-workflow.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-workflow.tsx
index e061ef4cef8..da3d057c0b6 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-workflow.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-visual/stage-workflow.tsx
@@ -77,7 +77,8 @@ export function StageWorkflow({ stage }: StageWorkflowProps) {
       <div
         className={cn(
           'absolute top-0 left-0',
-          animate && 'transition-transform duration-[1700ms] ease-[cubic-bezier(0.22,1,0.36,1)]'
+          animate &&
+            'transition-transform [transition-duration:1700ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
         )}
         style={{
           width: CANVAS.width,
@@ -102,7 +103,7 @@ export function StageWorkflow({ stage }: StageWorkflowProps) {
               stroke='var(--workflow-edge)'
               strokeWidth={2}
               strokeLinecap='round'
-              className='transition-[stroke-dashoffset] duration-[700ms] ease-[cubic-bezier(0.22,1,0.36,1)] [stroke-dasharray:1]'
+              className='transition-[stroke-dashoffset] [stroke-dasharray:1] [transition-duration:700ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]'
               // Edges stay undrawn while focused; once the camera pulls out they
               // draw in order (the second trails the first) as each target is revealed.
               style={
diff --git a/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block.tsx b/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block.tsx
index 37da41a33b4..f622145b8cd 100644
--- a/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/hero-visual/workflow-block.tsx
@@ -26,7 +26,7 @@ export function WorkflowBlock({
     <div className='relative w-[250px] rounded-[13px] border border-[var(--border-1)] bg-[var(--surface-2)] shadow-sm'>
       <div
         className={cn(
-          'transition-opacity duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)]',
+          'transition-opacity [transition-duration:360ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)]',
           contentVisible ? 'opacity-100' : 'opacity-0'
         )}
       >
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-chat/landing-preview-chat.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-chat/landing-preview-chat.tsx
index 1a47f8b3a64..175adb5eb59 100644
--- a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-chat/landing-preview-chat.tsx
+++ b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-chat/landing-preview-chat.tsx
@@ -89,7 +89,7 @@ export function LandingPreviewChat({ chat, chatName, animationKey }: LandingPrev
           <>
             <div
               className={cn(
-                'max-w-[85%] self-end rounded-2xl bg-[var(--surface-1)] px-3.5 py-2 text-[13.5px] text-[var(--text-primary)] leading-[1.45] transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.2,0,0,1)]',
+                'max-w-[85%] self-end rounded-2xl bg-[var(--surface-1)] px-3.5 py-2 text-[13.5px] text-[var(--text-primary)] leading-[1.45] transition-[opacity,transform] duration-300 [transition-timing-function:cubic-bezier(0.2,0,0,1)]',
                 showUser ? 'translate-y-0 opacity-100' : 'translate-y-1.5 opacity-0'
               )}
             >
@@ -101,7 +101,7 @@ export function LandingPreviewChat({ chat, chatName, animationKey }: LandingPrev
               {showAssistant && (
                 <p
                   className={cn(
-                    'max-w-[92%] text-[13.5px] text-[var(--text-primary)] leading-[1.5] transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.2,0,0,1)]',
+                    'max-w-[92%] text-[13.5px] text-[var(--text-primary)] leading-[1.5] transition-[opacity,transform] duration-300 [transition-timing-function:cubic-bezier(0.2,0,0,1)]',
                     showAssistant ? 'translate-y-0 opacity-100' : 'translate-y-1.5 opacity-0'
                   )}
                 >
diff --git a/apps/sim/app/(landing)/components/navbar/components/logo-mark/logo-mark.tsx b/apps/sim/app/(landing)/components/navbar/components/logo-mark/logo-mark.tsx
index 039a5a793e6..1d26c75dd5c 100644
--- a/apps/sim/app/(landing)/components/navbar/components/logo-mark/logo-mark.tsx
+++ b/apps/sim/app/(landing)/components/navbar/components/logo-mark/logo-mark.tsx
@@ -51,7 +51,7 @@ export function LogoMark({ children }: LogoMarkProps) {
     >
       <span
         className={cn(
-          'relative z-10 transition-opacity duration-100 ease-[cubic-bezier(0.23,1,0.32,1)]',
+          'relative z-10 transition-opacity duration-100 [transition-timing-function:cubic-bezier(0.23,1,0.32,1)]',
           hovered && 'opacity-0'
         )}
       >
diff --git a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-platform-loop.tsx b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-platform-loop.tsx
index 5823c8091e9..7bba704f0b2 100644
--- a/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-platform-loop.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/enterprise-platform-loop/enterprise-platform-loop.tsx
@@ -113,7 +113,7 @@ export function EnterprisePlatformLoop({
         </div>
         <div
           className={cn(
-            'h-full shrink-0 overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)]',
+            'h-full shrink-0 overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-200 [transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)]',
             stageOpen ? 'w-1/2 border-l' : 'w-0 min-w-0 border-l-0'
           )}
         >
diff --git a/apps/sim/app/(landing)/enterprise/components/feature-graphics/build-methods-graphic.tsx b/apps/sim/app/(landing)/enterprise/components/feature-graphics/build-methods-graphic.tsx
index 0d369e19cdc..c3d6a9db162 100644
--- a/apps/sim/app/(landing)/enterprise/components/feature-graphics/build-methods-graphic.tsx
+++ b/apps/sim/app/(landing)/enterprise/components/feature-graphics/build-methods-graphic.tsx
@@ -245,7 +245,7 @@ export function BuildMethodsGraphic() {
       >
         <FeaturePlatformPanel
           className={cn(
-            'top-5 bg-[var(--white)] transition-[transform,opacity] duration-[380ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+            'top-5 bg-[var(--white)] transition-[transform,opacity] [transition-duration:380ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
             phase === 'idle' && 'transition-none',
             editorExited ? 'translate-y-16 opacity-0' : 'translate-y-0 opacity-100'
           )}
@@ -274,7 +274,7 @@ export function BuildMethodsGraphic() {
         <div
           aria-hidden='true'
           className={cn(
-            'absolute top-5 right-0 bottom-0 left-0 overflow-hidden rounded-tl-xl border-[var(--border-1)] border-t border-l bg-[var(--white)] shadow-sm transition-[transform,opacity] duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+            'absolute top-5 right-0 bottom-0 left-0 overflow-hidden rounded-tl-xl border-[var(--border-1)] border-t border-l bg-[var(--white)] shadow-sm transition-[transform,opacity] [transition-duration:420ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
             phase === 'idle' && 'transition-none',
             chatOpen ? 'translate-y-0 opacity-100' : 'translate-y-6 opacity-0'
           )}
@@ -297,7 +297,7 @@ export function BuildMethodsGraphic() {
 
         <div
           className={cn(
-            'absolute right-3 bottom-5 left-5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm transition-transform duration-[450ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+            'absolute right-3 bottom-5 left-5 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm transition-transform [transition-duration:450ms] [transition-timing-function:cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
             phase === 'idle' && 'transition-none',
             composerVisible ? 'translate-y-0' : 'translate-y-[130%]'
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx b/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx
index 6609facab82..072797a4534 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx
@@ -16,7 +16,7 @@ const FULLSCREEN_SUFFIXES = ['/upgrade'] as const
 
 /** Slide timing for the fullscreen sidebar collapse and content shift. */
 const SLIDE_TRANSITION =
-  'duration-[175ms] ease-[cubic-bezier(0.25,0.1,0.25,1)] motion-reduce:transition-none'
+  '[transition-duration:175ms] [transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)] motion-reduce:transition-none'
 
 /**
  * The peek card's floating chrome.
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
index 48957e8fcd4..0d91367f67f 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
@@ -135,7 +135,7 @@ export const MothershipView = memo(
         // width means a divider drag pinned it, otherwise `w-1/2` governs.
         data-mothership-panel=''
         className={cn(
-          'relative z-10 flex h-full flex-col overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)]',
+          'relative z-10 flex h-full flex-col overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-200 [transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)]',
           isCollapsed ? 'w-0 min-w-0 border-l-0' : 'w-1/2 border-l',
           /* This panel is the right half of the pane, never under the traffic lights,
              yet it embeds whole pages whose header bars reserve that lane. Zeroing the