refactor(style): introduce reusable animation timing functions

- Add $timing-function-bouncy variable for consistent bounce effect
- Update checkbox and menu animations to use new timing function
- Adjust tooltip animation to use decelerate timing function
- Modify gutters animation for smoother transition

style/_base.scss

@@ -901,15 +901,15 @@ animation-direction: #{$anim-dir};
             height: calc($icon-size - .05em);
             background-color: currentColor;
             mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round"/><rect width="18.5" height="18.5" x="2.75" y="2.75" rx="6"/></g></svg>');
-            animation: uncheck .3s cubic-bezier(0.68, -0.55, 0.265, 1.55)forwards;
+            animation: uncheck .3s $timing-function-bouncy forwards;
         }
 
         @else {
             width: $icon-size;
             height: $icon-size;
             background-color: var(--b3-theme-primary);
             mask-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.25 2h-6.5A6.76 6.76 0 0 0 2 8.75v6.5A6.76 6.76 0 0 0 8.75 22h6.5A6.76 6.76 0 0 0 22 15.25v-6.5A6.76 6.76 0 0 0 15.25 2m2.06 8.16l-5.22 5.22a2 2 0 0 1-1.41.59a2 2 0 0 1-.76-.15a2 2 0 0 1-.64-.44l-2.59-2.59a1 1 0 0 1 1.41-1.41l2.59 2.59l5.21-5.23a1.002 1.002 0 0 1 1.41 1.42"/></svg>');
-            animation: check .3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+            animation: check .3s $timing-function-bouncy forwards;
         }
 
         @content;
@@ -950,5 +950,6 @@ $border-rd-default: 6px;
 
 $timing-function-decelerate: cubic-bezier(0, 0, 0, 1);
 $timing-function-accelerate: cubic-bezier(0.3, 0, 1, 1);
+$timing-function-bouncy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 
 $text-underline-thickness: .08em;

style/components/menu.scss

@@ -6,6 +6,17 @@
     @include border-or-not($border: false);
     border-radius: $border-rd-menu;
     padding: 0;
+    // animation: menu-pop-up .3s $timing-function-bouncy;
+
+    // @keyframes menu-pop-up {
+    //     0%,100% {
+    //         transform: none;
+    //     }
+
+    //     3% {
+    //         transform: scale(1.02);
+    //     }
+    // }
 
     .b3-menu__items {
         padding: 5px;

style/components/misc.scss

@@ -286,6 +286,7 @@ textarea {
     @include tooltip-styles;
 
     animation-delay: .75s;
+    animation-timing-function: $timing-function-decelerate;
 
     .ft__on-surface {
         color: var(--b3-theme-on-surface);

style/typography/protyle.scss

@@ -1246,8 +1246,8 @@
 
     @keyframes gutters-appear {
         from {
-            opacity: 0;
-            transform: scale(.5) translateX(8px);
+            // opacity: 0;
+            transform: scale(.5) translateX(4px);
             // filter: blur(12px);
         }