fix(styles): restore transition timing Tailwind was silently dropping

`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.

Author: waleedlatif1

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'
             )}
           >

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 }}

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'
           )}
         />

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

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'
             )}

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={

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'
         )}
       >

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'
                   )}
                 >

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'
         )}
       >

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'
           )}
         >