complete story 9.11 with qa tests

2026-01-03 02:57:43 +02:00
parent c96f31c702
commit 5a19903e30
8 changed files with 789 additions and 24 deletions
@@ -703,6 +703,106 @@ img, video, iframe {
    @apply font-semibold;
 }

+/* ==========================================================================
+   Animations & Micro-interactions (Story 9.11)
+   Subtle, professional animations under 300ms
+   ========================================================================== */
+
+/* Base transitions */
+.transition-default {
+    @apply transition-all duration-150 ease-in-out;
+}
+
+.transition-slow {
+    @apply transition-all duration-200 ease-in-out;
+}
+
+/* Button hover transition - 150ms ease */
+.btn {
+    @apply transition-colors duration-150;
+}
+
+/* Card lift effect - 200ms ease */
+.card-hover {
+    @apply transition-all duration-200;
+}
+
+.card-hover:hover {
+    @apply -translate-y-0.5 shadow-card-hover;
+}
+
+/* Link color transition */
+.link-transition {
+    @apply transition-colors duration-150;
+}
+
+/* Skeleton loader - pulse animation */
+.skeleton {
+    @apply animate-pulse bg-charcoal/10 rounded;
+}
+
+/* Toast animation classes */
+.toast-enter {
+    @apply transform translate-x-full opacity-0;
+}
+
+.toast-enter-active {
+    @apply transform translate-x-0 opacity-100 transition-all duration-200;
+}
+
+/* RTL toast animation - slides from left */
+[dir="rtl"] .toast-enter {
+    @apply -translate-x-full;
+}
+
+[dir="rtl"] .toast-enter-active {
+    @apply translate-x-0;
+}
+
+/* Success checkmark animation */
+@keyframes checkmark {
+    0% { stroke-dashoffset: 100; }
+    100% { stroke-dashoffset: 0; }
+}
+
+.checkmark-animated path {
+    stroke-dasharray: 100;
+    animation: checkmark 0.3s ease-in-out forwards;
+}
+
+/* Error shake animation */
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-5px); }
+    75% { transform: translateX(5px); }
+}
+
+.shake {
+    animation: shake 0.3s ease-in-out;
+}
+
+/* Modal animation classes */
+.modal-enter {
+    @apply opacity-0 scale-95;
+}
+
+.modal-enter-active {
+    @apply opacity-100 scale-100 transition-all duration-200;
+}
+
+.modal-backdrop-enter {
+    @apply opacity-0;
+}
+
+.modal-backdrop-enter-active {
+    @apply opacity-100 transition-opacity duration-200;
+}
+
+/* Progress bar animation */
+.progress-bar {
+    @apply transition-all duration-200 ease-out;
+}
+
 /* ==========================================================================
   Accessibility Styles (Story 9.10)
   WCAG 2.1 AA Compliance