fix(Card): correct isInteractive prop's related boxshadow animation

packages/gamut/src/Card/index.tsx

@@ -24,14 +24,20 @@ export const Card: React.FC<CardProps> = ({
     variant === 'default' ? DynamicCardWrapper : StaticCardWrapper;
 
   const hasPattern = shadow === 'patternLeft' || shadow === 'patternRight';
+  const isOutline = shadow === 'outline';
 
   const setHoverShadow =
     shadow === 'patternRight' ? hoverShadowRight : hoverShadowLeft;
+
+  const initialVariant = isOutline ? 'initialOutline' : 'initial';
+  const animateVariant = isOutline ? 'animateOutline' : 'animate';
+
   return (
     <MotionBox
       height={height}
+      initial={initialVariant}
       position="relative"
-      whileHover={isInteractive ? 'animate' : ''}
+      whileHover={isInteractive ? animateVariant : ''}
       width={width}
     >
       {hasPattern && (

packages/gamut/src/Card/styles.tsx

@@ -35,7 +35,7 @@ export const shadowVariants = variant({
     patternLeft: {},
     patternRight: {},
     outline: {
-      boxShadow: `-6px 6px ${theme.colors['background-current']}, -6px 6px 0 1px ${theme.colors['border-primary']}`,
+      boxShadow: `-8px 8px ${theme.colors['background-current']}, -8px 8px 0 1px ${theme.colors['border-primary']}`,
     },
   },
 });
@@ -65,6 +65,13 @@ export const hoverShadowLeft = {
       ease: 'easeOut',
     },
   },
+  initialOutline: {
+    boxShadow: `-6px 6px 0 0px ${theme.colors['background-current']}, -6px 6px 0 1px ${theme.colors['border-primary']}`,
+    transition: {
+      duration: timingValues.fast / 1000,
+      ease: 'easeOut',
+    },
+  },
   animate: {
     transform: 'translate(4px, -4px)',
     boxShadow: `-8px 8px 0 ${theme.colors['shadow-primary']}`,
@@ -73,6 +80,14 @@ export const hoverShadowLeft = {
       ease: 'easeIn',
     },
   },
+  animateOutline: {
+    transform: 'translate(4px, -4px)',
+    boxShadow: `-8px 8px 0 0px ${theme.colors['shadow-primary']}, -8px 8px 0 1px ${theme.colors['shadow-primary']}`,
+    transition: {
+      duration: timingValues.fast / 1000,
+      ease: 'easeIn',
+    },
+  },
 };
 
 export const hoverShadowRight = {