feat: calendar strip smooth pause and fade edges

src/components/CalendarStrip.tsx

@@ -133,17 +133,45 @@ export default function CalendarStrip() {
         overflow: 'hidden',
         borderTop: `1px solid rgba(232,168,73,0.25)`,
         borderBottom: `1px solid rgba(232,168,73,0.25)`,
+        position: 'relative',
       }}
       onMouseEnter={() => setPaused(true)}
       onMouseLeave={() => setPaused(false)}
     >
+      {/* Left fade mask */}
+      <div
+        style={{
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: '80px',
+          background: `linear-gradient(to right, ${navy} 0%, transparent 100%)`,
+          pointerEvents: 'none',
+          zIndex: 10,
+        }}
+      />
+      {/* Right fade mask */}
+      <div
+        style={{
+          position: 'absolute',
+          right: 0,
+          top: 0,
+          bottom: 0,
+          width: '80px',
+          background: `linear-gradient(to left, ${navy} 0%, transparent 100%)`,
+          pointerEvents: 'none',
+          zIndex: 10,
+        }}
+      />
       <div
         style={{
           display: 'flex',
           gap: '1rem',
           padding: '0 1rem',
           width: 'max-content',
-          animation: paused ? 'none' : 'marquee 38s linear infinite',
+          animation: 'marquee 60s linear infinite',
+          animationPlayState: paused ? 'paused' : 'running',
         }}
         ref={trackRef}
       >