Gentler react animation

app/assets/stylesheets/animation.css

@@ -10,7 +10,7 @@
 
   /* Keyframes */
   @keyframes react {
-    0%   { transform: scale(0.3);  opacity: 0; }
+    0%   { transform: scale(0.85);  opacity: 0; }
     50%  { transform: scale(1.15); opacity: 1; }
     100% { transform: scale(1); }
   }

app/assets/stylesheets/reactions.css

@@ -74,8 +74,9 @@
     transition: none;
 
     &.expanded {
-      animation: react 0.2s both;
+      animation: react 300ms both;
       transform: translate3d(0, 0, 0);
+      transform-origin: left center;
     }
 
     .reaction__form-label:focus {

app/views/cards/comments/reactions/new.html.erb

@@ -3,7 +3,7 @@
         class: "reaction reaction__form expanded",
         html: { aria: { label: "New reaction" } },
         data: { controller: "form", turbo_frame: dom_id(@comment, :reacting), action: "keydown.esc->form#cancel" } do |form| %>
-    <label class="reaction__form-label flex gap" style="--column-gap: 0.7ch;">
+    <label class="reaction__form-label flex gap" style="--column-gap: 0.4ch;">
       <figure class="reaction__avatar margin-none flex-item-no-shrink">
         <%= avatar_tag Current.user %>
       </figure>