feat(frontend): Add animations for form elements

legalconsenthub/app/assets/css/main.css

@@ -49,7 +49,11 @@
 /* Global focus styles for elements without built-in focus styling.
    Nuxt UI components (inputs, buttons, selects, etc.) have their own
    focus ring styling, so we exclude them to avoid double borders. */
-:focus-visible:not(input):not(textarea):not(select):not(button):not([role="combobox"]):not([role="listbox"]):not([role="option"]):not([role="checkbox"]):not([role="radio"]):not([role="switch"]):not([role="slider"]):not([role="tab"]):not([role="menuitem"]) {
+:focus-visible:not(input):not(textarea):not(select):not(button):not([role='combobox']):not([role='listbox']):not(
+    [role='option']
+  ):not([role='checkbox']):not([role='radio']):not([role='switch']):not([role='slider']):not([role='tab']):not(
+    [role='menuitem']
+  ) {
   outline: 2px solid var(--color-teal-500);
   outline-offset: 2px;
 }
@@ -95,3 +99,38 @@
 .dark .nav-separator {
   background: linear-gradient(90deg, transparent, var(--color-gray-700), transparent);
 }
+
+/* ============================================
+   FORM ELEMENT VISIBILITY TRANSITIONS
+   ============================================ */
+
+/* Subtle fade + slide animation for form elements appearing/disappearing */
+.form-element-enter-active {
+  transition:
+    opacity 200ms ease-out,
+    transform 200ms ease-out;
+}
+
+.form-element-leave-active {
+  transition:
+    opacity 200ms ease-out,
+    transform 200ms ease-out;
+  /* Take leaving elements out of flow so remaining elements reposition smoothly */
+  position: absolute;
+  width: 100%;
+}
+
+.form-element-enter-from {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+.form-element-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}
+
+/* Smooth repositioning when elements are added/removed */
+.form-element-move {
+  transition: transform 200ms ease-out;
+}