dynamic-ds 1.0.7 → 1.0.8

package/src/lib/styles/_animations.scss

@@ -26,7 +26,7 @@ $ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   --ease-in: #{$ease-in};
   --ease-out: #{$ease-out};
   --ease-in-out: #{$ease-in-out};
-  
+
   // Advanced easing
   --ease-bounce-out: #{$ease-bounce-out};
   --ease-bounce-in: #{$ease-bounce-in};
@@ -67,7 +67,7 @@ $duration-slower: 700ms;
   --duration-500: #{$duration-500};
   --duration-700: #{$duration-700};
   --duration-1000: #{$duration-1000};
-  
+
   // Semantic durations
   --duration-instant: #{$duration-instant};
   --duration-fast: #{$duration-fast};
@@ -83,27 +83,38 @@ $duration-slower: 700ms;
   // Property-specific transitions
   --transition-none: none;
   --transition-all: all var(--duration-normal) var(--ease-in-out);
-  --transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke var(--duration-normal) var(--ease-in-out);
+  --transition-colors:
+    color, background-color, border-color, text-decoration-color, fill,
+    stroke var(--duration-normal) var(--ease-in-out);
   --transition-opacity: opacity var(--duration-normal) var(--ease-in-out);
   --transition-shadow: box-shadow var(--duration-normal) var(--ease-in-out);
   --transition-transform: transform var(--duration-normal) var(--ease-in-out);
-  
+
   // Combined common transitions
-  --transition-default: color, background-color, border-color, box-shadow, transform, opacity var(--duration-fast) var(--ease-in-out);
+  --transition-default:
+    color, background-color, border-color, box-shadow, transform,
+    opacity var(--duration-fast) var(--ease-in-out);
 }
 
 // ============================================================================
 // 4. TRANSITION PROPERTY UTILITIES
 // ============================================================================
-.transition-none { transition-property: none !important; }
-.transition-all { transition-property: all !important; }
+.transition-none {
+  transition-property: none !important;
+}
+.transition-all {
+  transition-property: all !important;
+}
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
+  transition-property:
+    color, background-color, border-color, text-decoration-color, fill, stroke,
+    opacity, box-shadow, transform, filter, backdrop-filter !important;
   transition-timing-function: var(--ease-in-out);
   transition-duration: var(--duration-normal);
 }
 .transition-colors {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke !important;
+  transition-property:
+    color, background-color, border-color, text-decoration-color, fill, stroke !important;
   transition-timing-function: var(--ease-in-out);
   transition-duration: var(--duration-normal);
 }
@@ -126,49 +137,115 @@ $duration-slower: 700ms;
 // ============================================================================
 // 5. TRANSITION DURATION UTILITIES
 // ============================================================================
-.duration-0 { transition-duration: 0ms !important; }
-.duration-75 { transition-duration: 75ms !important; }
-.duration-100 { transition-duration: 100ms !important; }
-.duration-150 { transition-duration: 150ms !important; }
-.duration-200 { transition-duration: 200ms !important; }
-.duration-300 { transition-duration: 300ms !important; }
-.duration-500 { transition-duration: 500ms !important; }
-.duration-700 { transition-duration: 700ms !important; }
-.duration-1000 { transition-duration: 1000ms !important; }
+.duration-0 {
+  transition-duration: 0ms !important;
+}
+.duration-75 {
+  transition-duration: 75ms !important;
+}
+.duration-100 {
+  transition-duration: 100ms !important;
+}
+.duration-150 {
+  transition-duration: 150ms !important;
+}
+.duration-200 {
+  transition-duration: 200ms !important;
+}
+.duration-300 {
+  transition-duration: 300ms !important;
+}
+.duration-500 {
+  transition-duration: 500ms !important;
+}
+.duration-700 {
+  transition-duration: 700ms !important;
+}
+.duration-1000 {
+  transition-duration: 1000ms !important;
+}
 
 // Semantic duration classes
-.duration-instant { transition-duration: var(--duration-instant) !important; }
-.duration-fast { transition-duration: var(--duration-fast) !important; }
-.duration-normal { transition-duration: var(--duration-normal) !important; }
-.duration-slow { transition-duration: var(--duration-slow) !important; }
-.duration-slower { transition-duration: var(--duration-slower) !important; }
+.duration-instant {
+  transition-duration: var(--duration-instant) !important;
+}
+.duration-fast {
+  transition-duration: var(--duration-fast) !important;
+}
+.duration-normal {
+  transition-duration: var(--duration-normal) !important;
+}
+.duration-slow {
+  transition-duration: var(--duration-slow) !important;
+}
+.duration-slower {
+  transition-duration: var(--duration-slower) !important;
+}
 
 // ============================================================================
 // 6. TRANSITION TIMING FUNCTION UTILITIES
 // ============================================================================
-.ease-linear { transition-timing-function: linear !important; }
-.ease-in { transition-timing-function: var(--ease-in) !important; }
-.ease-out { transition-timing-function: var(--ease-out) !important; }
-.ease-in-out { transition-timing-function: var(--ease-in-out) !important; }
-.ease-bounce-out { transition-timing-function: var(--ease-bounce-out) !important; }
-.ease-bounce-in { transition-timing-function: var(--ease-bounce-in) !important; }
-.ease-back-out { transition-timing-function: var(--ease-back-out) !important; }
-.ease-back-in { transition-timing-function: var(--ease-back-in) !important; }
-.ease-elastic { transition-timing-function: var(--ease-elastic) !important; }
-.ease-spring { transition-timing-function: var(--ease-spring) !important; }
+.ease-linear {
+  transition-timing-function: linear !important;
+}
+.ease-in {
+  transition-timing-function: var(--ease-in) !important;
+}
+.ease-out {
+  transition-timing-function: var(--ease-out) !important;
+}
+.ease-in-out {
+  transition-timing-function: var(--ease-in-out) !important;
+}
+.ease-bounce-out {
+  transition-timing-function: var(--ease-bounce-out) !important;
+}
+.ease-bounce-in {
+  transition-timing-function: var(--ease-bounce-in) !important;
+}
+.ease-back-out {
+  transition-timing-function: var(--ease-back-out) !important;
+}
+.ease-back-in {
+  transition-timing-function: var(--ease-back-in) !important;
+}
+.ease-elastic {
+  transition-timing-function: var(--ease-elastic) !important;
+}
+.ease-spring {
+  transition-timing-function: var(--ease-spring) !important;
+}
 
 // ============================================================================
 // 7. TRANSITION DELAY UTILITIES
 // ============================================================================
-.delay-0 { transition-delay: 0ms !important; }
-.delay-75 { transition-delay: 75ms !important; }
-.delay-100 { transition-delay: 100ms !important; }
-.delay-150 { transition-delay: 150ms !important; }
-.delay-200 { transition-delay: 200ms !important; }
-.delay-300 { transition-delay: 300ms !important; }
-.delay-500 { transition-delay: 500ms !important; }
-.delay-700 { transition-delay: 700ms !important; }
-.delay-1000 { transition-delay: 1000ms !important; }
+.delay-0 {
+  transition-delay: 0ms !important;
+}
+.delay-75 {
+  transition-delay: 75ms !important;
+}
+.delay-100 {
+  transition-delay: 100ms !important;
+}
+.delay-150 {
+  transition-delay: 150ms !important;
+}
+.delay-200 {
+  transition-delay: 200ms !important;
+}
+.delay-300 {
+  transition-delay: 300ms !important;
+}
+.delay-500 {
+  transition-delay: 500ms !important;
+}
+.delay-700 {
+  transition-delay: 700ms !important;
+}
+.delay-1000 {
+  transition-delay: 1000ms !important;
+}
 
 // ============================================================================
 // 8. KEYFRAME ANIMATIONS
@@ -176,13 +253,21 @@ $duration-slower: 700ms;
 
 // --- Fade Animations ---
 @keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes fadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
 
 @keyframes fadeInUp {
@@ -231,43 +316,75 @@ $duration-slower: 700ms;
 
 // --- Slide Animations ---
 @keyframes slideInUp {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
 
 @keyframes slideInDown {
-  from { transform: translateY(-100%); }
-  to { transform: translateY(0); }
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
 
 @keyframes slideInLeft {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(0); }
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 @keyframes slideInRight {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
 }
 
 @keyframes slideOutUp {
-  from { transform: translateY(0); }
-  to { transform: translateY(-100%); }
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-100%);
+  }
 }
 
 @keyframes slideOutDown {
-  from { transform: translateY(0); }
-  to { transform: translateY(100%); }
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(100%);
+  }
 }
 
 @keyframes slideOutLeft {
-  from { transform: translateX(0); }
-  to { transform: translateX(-100%); }
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
 }
 
 @keyframes slideOutRight {
-  from { transform: translateX(0); }
-  to { transform: translateX(100%); }
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
 }
 
 // --- Scale Animations ---
@@ -331,13 +448,21 @@ $duration-slower: 700ms;
 
 // --- Rotate Animations ---
 @keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 @keyframes spinReverse {
-  from { transform: rotate(360deg); }
-  to { transform: rotate(0deg); }
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
 }
 
 @keyframes rotateIn {
@@ -353,7 +478,8 @@ $duration-slower: 700ms;
 
 // --- Bounce & Pulse Animations ---
 @keyframes bounce {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateY(-25%);
     animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
   }
@@ -381,7 +507,8 @@ $duration-slower: 700ms;
 }
 
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
   50% {
@@ -390,90 +517,222 @@ $duration-slower: 700ms;
 }
 
 @keyframes ping {
-  75%, 100% {
+  75%,
+  100% {
     transform: scale(2);
     opacity: 0;
   }
 }
 
 @keyframes heartbeat {
-  0% { transform: scale(1); }
-  14% { transform: scale(1.3); }
-  28% { transform: scale(1); }
-  42% { transform: scale(1.3); }
-  70% { transform: scale(1); }
+  0% {
+    transform: scale(1);
+  }
+  14% {
+    transform: scale(1.3);
+  }
+  28% {
+    transform: scale(1);
+  }
+  42% {
+    transform: scale(1.3);
+  }
+  70% {
+    transform: scale(1);
+  }
 }
 
 // --- Shake & Wobble Animations ---
 @keyframes shake {
-  0%, 100% { transform: translateX(0); }
-  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
-  20%, 40%, 60%, 80% { transform: translateX(4px); }
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-4px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(4px);
+  }
 }
 
 @keyframes shakeX {
-  0%, 100% { transform: translateX(0); }
-  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
-  20%, 40%, 60%, 80% { transform: translateX(10px); }
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-10px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(10px);
+  }
 }
 
 @keyframes shakeY {
-  0%, 100% { transform: translateY(0); }
-  10%, 30%, 50%, 70%, 90% { transform: translateY(-10px); }
-  20%, 40%, 60%, 80% { transform: translateY(10px); }
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateY(-10px);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateY(10px);
+  }
 }
 
 @keyframes wobble {
-  0% { transform: translateX(0); }
-  15% { transform: translateX(-25%) rotate(-5deg); }
-  30% { transform: translateX(20%) rotate(3deg); }
-  45% { transform: translateX(-15%) rotate(-3deg); }
-  60% { transform: translateX(10%) rotate(2deg); }
-  75% { transform: translateX(-5%) rotate(-1deg); }
-  100% { transform: translateX(0); }
+  0% {
+    transform: translateX(0);
+  }
+  15% {
+    transform: translateX(-25%) rotate(-5deg);
+  }
+  30% {
+    transform: translateX(20%) rotate(3deg);
+  }
+  45% {
+    transform: translateX(-15%) rotate(-3deg);
+  }
+  60% {
+    transform: translateX(10%) rotate(2deg);
+  }
+  75% {
+    transform: translateX(-5%) rotate(-1deg);
+  }
+  100% {
+    transform: translateX(0);
+  }
 }
 
 @keyframes jello {
-  0%, 11.1%, 100% { transform: none; }
-  22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
-  33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
-  44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
-  55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
-  66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
-  77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
-  88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
+  0%,
+  11.1%,
+  100% {
+    transform: none;
+  }
+  22.2% {
+    transform: skewX(-12.5deg) skewY(-12.5deg);
+  }
+  33.3% {
+    transform: skewX(6.25deg) skewY(6.25deg);
+  }
+  44.4% {
+    transform: skewX(-3.125deg) skewY(-3.125deg);
+  }
+  55.5% {
+    transform: skewX(1.5625deg) skewY(1.5625deg);
+  }
+  66.6% {
+    transform: skewX(-0.78125deg) skewY(-0.78125deg);
+  }
+  77.7% {
+    transform: skewX(0.390625deg) skewY(0.390625deg);
+  }
+  88.8% {
+    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+  }
 }
 
 // --- Attention Seekers ---
 @keyframes flash {
-  0%, 50%, 100% { opacity: 1; }
-  25%, 75% { opacity: 0; }
+  0%,
+  50%,
+  100% {
+    opacity: 1;
+  }
+  25%,
+  75% {
+    opacity: 0;
+  }
 }
 
 @keyframes tada {
-  0% { transform: scale(1); }
-  10%, 20% { transform: scale(0.9) rotate(-3deg); }
-  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
-  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
-  100% { transform: scale(1) rotate(0); }
+  0% {
+    transform: scale(1);
+  }
+  10%,
+  20% {
+    transform: scale(0.9) rotate(-3deg);
+  }
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: scale(1.1) rotate(3deg);
+  }
+  40%,
+  60%,
+  80% {
+    transform: scale(1.1) rotate(-3deg);
+  }
+  100% {
+    transform: scale(1) rotate(0);
+  }
 }
 
 @keyframes rubberBand {
-  0% { transform: scale(1); }
-  30% { transform: scaleX(1.25) scaleY(0.75); }
-  40% { transform: scaleX(0.75) scaleY(1.25); }
-  50% { transform: scaleX(1.15) scaleY(0.85); }
-  65% { transform: scaleX(0.95) scaleY(1.05); }
-  75% { transform: scaleX(1.05) scaleY(0.95); }
-  100% { transform: scale(1); }
+  0% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scaleX(1.25) scaleY(0.75);
+  }
+  40% {
+    transform: scaleX(0.75) scaleY(1.25);
+  }
+  50% {
+    transform: scaleX(1.15) scaleY(0.85);
+  }
+  65% {
+    transform: scaleX(0.95) scaleY(1.05);
+  }
+  75% {
+    transform: scaleX(1.05) scaleY(0.95);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 
 @keyframes swing {
-  20% { transform: rotate(15deg); }
-  40% { transform: rotate(-10deg); }
-  60% { transform: rotate(5deg); }
-  80% { transform: rotate(-5deg); }
-  100% { transform: rotate(0deg); }
+  20% {
+    transform: rotate(15deg);
+  }
+  40% {
+    transform: rotate(-10deg);
+  }
+  60% {
+    transform: rotate(5deg);
+  }
+  80% {
+    transform: rotate(-5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
 }
 
 // --- Loading Animations ---
@@ -505,7 +764,9 @@ $duration-slower: 700ms;
 }
 
 @keyframes dotPulse {
-  0%, 80%, 100% {
+  0%,
+  80%,
+  100% {
     transform: scale(0);
     opacity: 0.5;
   }
@@ -517,7 +778,8 @@ $duration-slower: 700ms;
 
 // --- Float Animation ---
 @keyframes float {
-  0%, 100% {
+  0%,
+  100% {
     transform: translateY(0);
   }
   50% {
@@ -699,17 +961,23 @@ $duration-slower: 700ms;
 .loading-dots {
   display: inline-flex;
   gap: 4px;
-  
+
   span {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background-color: currentColor;
     animation: dotPulse 1.4s ease-in-out infinite;
-    
-    &:nth-child(1) { animation-delay: 0s; }
-    &:nth-child(2) { animation-delay: 0.2s; }
-    &:nth-child(3) { animation-delay: 0.4s; }
+
+    &:nth-child(1) {
+      animation-delay: 0s;
+    }
+    &:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+    &:nth-child(3) {
+      animation-delay: 0.4s;
+    }
   }
 }
 
@@ -743,49 +1011,111 @@ $duration-slower: 700ms;
 // ============================================================================
 
 // Animation iteration count
-.animate-once { animation-iteration-count: 1 !important; }
-.animate-twice { animation-iteration-count: 2 !important; }
-.animate-infinite { animation-iteration-count: infinite !important; }
+.animate-once {
+  animation-iteration-count: 1 !important;
+}
+.animate-twice {
+  animation-iteration-count: 2 !important;
+}
+.animate-infinite {
+  animation-iteration-count: infinite !important;
+}
 
 // Animation direction
-.animate-normal { animation-direction: normal !important; }
-.animate-reverse { animation-direction: reverse !important; }
-.animate-alternate { animation-direction: alternate !important; }
-.animate-alternate-reverse { animation-direction: alternate-reverse !important; }
+.animate-normal {
+  animation-direction: normal !important;
+}
+.animate-reverse {
+  animation-direction: reverse !important;
+}
+.animate-alternate {
+  animation-direction: alternate !important;
+}
+.animate-alternate-reverse {
+  animation-direction: alternate-reverse !important;
+}
 
 // Animation fill mode
-.animate-fill-none { animation-fill-mode: none !important; }
-.animate-fill-forwards { animation-fill-mode: forwards !important; }
-.animate-fill-backwards { animation-fill-mode: backwards !important; }
-.animate-fill-both { animation-fill-mode: both !important; }
+.animate-fill-none {
+  animation-fill-mode: none !important;
+}
+.animate-fill-forwards {
+  animation-fill-mode: forwards !important;
+}
+.animate-fill-backwards {
+  animation-fill-mode: backwards !important;
+}
+.animate-fill-both {
+  animation-fill-mode: both !important;
+}
 
 // Animation play state
-.animate-running { animation-play-state: running !important; }
-.animate-paused { animation-play-state: paused !important; }
+.animate-running {
+  animation-play-state: running !important;
+}
+.animate-paused {
+  animation-play-state: paused !important;
+}
 
 // Animation delay utilities
-.animate-delay-0 { animation-delay: 0ms !important; }
-.animate-delay-75 { animation-delay: 75ms !important; }
-.animate-delay-100 { animation-delay: 100ms !important; }
-.animate-delay-150 { animation-delay: 150ms !important; }
-.animate-delay-200 { animation-delay: 200ms !important; }
-.animate-delay-300 { animation-delay: 300ms !important; }
-.animate-delay-500 { animation-delay: 500ms !important; }
-.animate-delay-700 { animation-delay: 700ms !important; }
-.animate-delay-1000 { animation-delay: 1000ms !important; }
+.animate-delay-0 {
+  animation-delay: 0ms !important;
+}
+.animate-delay-75 {
+  animation-delay: 75ms !important;
+}
+.animate-delay-100 {
+  animation-delay: 100ms !important;
+}
+.animate-delay-150 {
+  animation-delay: 150ms !important;
+}
+.animate-delay-200 {
+  animation-delay: 200ms !important;
+}
+.animate-delay-300 {
+  animation-delay: 300ms !important;
+}
+.animate-delay-500 {
+  animation-delay: 500ms !important;
+}
+.animate-delay-700 {
+  animation-delay: 700ms !important;
+}
+.animate-delay-1000 {
+  animation-delay: 1000ms !important;
+}
 
 // Animation duration utilities (for animations)
-.animate-duration-75 { animation-duration: 75ms !important; }
-.animate-duration-100 { animation-duration: 100ms !important; }
-.animate-duration-150 { animation-duration: 150ms !important; }
-.animate-duration-200 { animation-duration: 200ms !important; }
-.animate-duration-300 { animation-duration: 300ms !important; }
-.animate-duration-500 { animation-duration: 500ms !important; }
-.animate-duration-700 { animation-duration: 700ms !important; }
-.animate-duration-1000 { animation-duration: 1000ms !important; }
+.animate-duration-75 {
+  animation-duration: 75ms !important;
+}
+.animate-duration-100 {
+  animation-duration: 100ms !important;
+}
+.animate-duration-150 {
+  animation-duration: 150ms !important;
+}
+.animate-duration-200 {
+  animation-duration: 200ms !important;
+}
+.animate-duration-300 {
+  animation-duration: 300ms !important;
+}
+.animate-duration-500 {
+  animation-duration: 500ms !important;
+}
+.animate-duration-700 {
+  animation-duration: 700ms !important;
+}
+.animate-duration-1000 {
+  animation-duration: 1000ms !important;
+}
 
 // No animation
-.animate-none { animation: none !important; }
+.animate-none {
+  animation: none !important;
+}
 
 // ============================================================================
 // 12. TRANSFORM UTILITIES
@@ -799,142 +1129,492 @@ $duration-slower: 700ms;
   --ds-skew-y: 0;
   --ds-scale-x: 1;
   --ds-scale-y: 1;
-  transform: translateX(var(--ds-translate-x)) translateY(var(--ds-translate-y)) rotate(var(--ds-rotate)) skewX(var(--ds-skew-x)) skewY(var(--ds-skew-y)) scaleX(var(--ds-scale-x)) scaleY(var(--ds-scale-y));
+  transform: translateX(var(--ds-translate-x)) translateY(var(--ds-translate-y))
+    rotate(var(--ds-rotate)) skewX(var(--ds-skew-x)) skewY(var(--ds-skew-y))
+    scaleX(var(--ds-scale-x)) scaleY(var(--ds-scale-y));
 }
 
 .transform-gpu {
-  transform: translate3d(var(--ds-translate-x, 0), var(--ds-translate-y, 0), 0) rotate(var(--ds-rotate, 0)) skewX(var(--ds-skew-x, 0)) skewY(var(--ds-skew-y, 0)) scaleX(var(--ds-scale-x, 1)) scaleY(var(--ds-scale-y, 1));
+  transform: translate3d(var(--ds-translate-x, 0), var(--ds-translate-y, 0), 0)
+    rotate(var(--ds-rotate, 0)) skewX(var(--ds-skew-x, 0))
+    skewY(var(--ds-skew-y, 0)) scaleX(var(--ds-scale-x, 1))
+    scaleY(var(--ds-scale-y, 1));
 }
 
-.transform-none { transform: none !important; }
+.transform-none {
+  transform: none !important;
+}
 
 // Scale
-.scale-0 { --ds-scale-x: 0; --ds-scale-y: 0; transform: scale(0); }
-.scale-50 { --ds-scale-x: 0.5; --ds-scale-y: 0.5; transform: scale(0.5); }
-.scale-75 { --ds-scale-x: 0.75; --ds-scale-y: 0.75; transform: scale(0.75); }
-.scale-90 { --ds-scale-x: 0.9; --ds-scale-y: 0.9; transform: scale(0.9); }
-.scale-95 { --ds-scale-x: 0.95; --ds-scale-y: 0.95; transform: scale(0.95); }
-.scale-100 { --ds-scale-x: 1; --ds-scale-y: 1; transform: scale(1); }
-.scale-105 { --ds-scale-x: 1.05; --ds-scale-y: 1.05; transform: scale(1.05); }
-.scale-110 { --ds-scale-x: 1.1; --ds-scale-y: 1.1; transform: scale(1.1); }
-.scale-125 { --ds-scale-x: 1.25; --ds-scale-y: 1.25; transform: scale(1.25); }
-.scale-150 { --ds-scale-x: 1.5; --ds-scale-y: 1.5; transform: scale(1.5); }
-
-.scale-x-0 { --ds-scale-x: 0; transform: scaleX(0); }
-.scale-x-50 { --ds-scale-x: 0.5; transform: scaleX(0.5); }
-.scale-x-75 { --ds-scale-x: 0.75; transform: scaleX(0.75); }
-.scale-x-90 { --ds-scale-x: 0.9; transform: scaleX(0.9); }
-.scale-x-95 { --ds-scale-x: 0.95; transform: scaleX(0.95); }
-.scale-x-100 { --ds-scale-x: 1; transform: scaleX(1); }
-.scale-x-105 { --ds-scale-x: 1.05; transform: scaleX(1.05); }
-.scale-x-110 { --ds-scale-x: 1.1; transform: scaleX(1.1); }
-.scale-x-125 { --ds-scale-x: 1.25; transform: scaleX(1.25); }
-.scale-x-150 { --ds-scale-x: 1.5; transform: scaleX(1.5); }
-
-.scale-y-0 { --ds-scale-y: 0; transform: scaleY(0); }
-.scale-y-50 { --ds-scale-y: 0.5; transform: scaleY(0.5); }
-.scale-y-75 { --ds-scale-y: 0.75; transform: scaleY(0.75); }
-.scale-y-90 { --ds-scale-y: 0.9; transform: scaleY(0.9); }
-.scale-y-95 { --ds-scale-y: 0.95; transform: scaleY(0.95); }
-.scale-y-100 { --ds-scale-y: 1; transform: scaleY(1); }
-.scale-y-105 { --ds-scale-y: 1.05; transform: scaleY(1.05); }
-.scale-y-110 { --ds-scale-y: 1.1; transform: scaleY(1.1); }
-.scale-y-125 { --ds-scale-y: 1.25; transform: scaleY(1.25); }
-.scale-y-150 { --ds-scale-y: 1.5; transform: scaleY(1.5); }
+.scale-0 {
+  --ds-scale-x: 0;
+  --ds-scale-y: 0;
+  transform: scale(0);
+}
+.scale-50 {
+  --ds-scale-x: 0.5;
+  --ds-scale-y: 0.5;
+  transform: scale(0.5);
+}
+.scale-75 {
+  --ds-scale-x: 0.75;
+  --ds-scale-y: 0.75;
+  transform: scale(0.75);
+}
+.scale-90 {
+  --ds-scale-x: 0.9;
+  --ds-scale-y: 0.9;
+  transform: scale(0.9);
+}
+.scale-95 {
+  --ds-scale-x: 0.95;
+  --ds-scale-y: 0.95;
+  transform: scale(0.95);
+}
+.scale-100 {
+  --ds-scale-x: 1;
+  --ds-scale-y: 1;
+  transform: scale(1);
+}
+.scale-105 {
+  --ds-scale-x: 1.05;
+  --ds-scale-y: 1.05;
+  transform: scale(1.05);
+}
+.scale-110 {
+  --ds-scale-x: 1.1;
+  --ds-scale-y: 1.1;
+  transform: scale(1.1);
+}
+.scale-125 {
+  --ds-scale-x: 1.25;
+  --ds-scale-y: 1.25;
+  transform: scale(1.25);
+}
+.scale-150 {
+  --ds-scale-x: 1.5;
+  --ds-scale-y: 1.5;
+  transform: scale(1.5);
+}
+
+.scale-x-0 {
+  --ds-scale-x: 0;
+  transform: scaleX(0);
+}
+.scale-x-50 {
+  --ds-scale-x: 0.5;
+  transform: scaleX(0.5);
+}
+.scale-x-75 {
+  --ds-scale-x: 0.75;
+  transform: scaleX(0.75);
+}
+.scale-x-90 {
+  --ds-scale-x: 0.9;
+  transform: scaleX(0.9);
+}
+.scale-x-95 {
+  --ds-scale-x: 0.95;
+  transform: scaleX(0.95);
+}
+.scale-x-100 {
+  --ds-scale-x: 1;
+  transform: scaleX(1);
+}
+.scale-x-105 {
+  --ds-scale-x: 1.05;
+  transform: scaleX(1.05);
+}
+.scale-x-110 {
+  --ds-scale-x: 1.1;
+  transform: scaleX(1.1);
+}
+.scale-x-125 {
+  --ds-scale-x: 1.25;
+  transform: scaleX(1.25);
+}
+.scale-x-150 {
+  --ds-scale-x: 1.5;
+  transform: scaleX(1.5);
+}
+
+.scale-y-0 {
+  --ds-scale-y: 0;
+  transform: scaleY(0);
+}
+.scale-y-50 {
+  --ds-scale-y: 0.5;
+  transform: scaleY(0.5);
+}
+.scale-y-75 {
+  --ds-scale-y: 0.75;
+  transform: scaleY(0.75);
+}
+.scale-y-90 {
+  --ds-scale-y: 0.9;
+  transform: scaleY(0.9);
+}
+.scale-y-95 {
+  --ds-scale-y: 0.95;
+  transform: scaleY(0.95);
+}
+.scale-y-100 {
+  --ds-scale-y: 1;
+  transform: scaleY(1);
+}
+.scale-y-105 {
+  --ds-scale-y: 1.05;
+  transform: scaleY(1.05);
+}
+.scale-y-110 {
+  --ds-scale-y: 1.1;
+  transform: scaleY(1.1);
+}
+.scale-y-125 {
+  --ds-scale-y: 1.25;
+  transform: scaleY(1.25);
+}
+.scale-y-150 {
+  --ds-scale-y: 1.5;
+  transform: scaleY(1.5);
+}
 
 // Rotate
-.rotate-0 { --ds-rotate: 0deg; transform: rotate(0deg); }
-.rotate-1 { --ds-rotate: 1deg; transform: rotate(1deg); }
-.rotate-2 { --ds-rotate: 2deg; transform: rotate(2deg); }
-.rotate-3 { --ds-rotate: 3deg; transform: rotate(3deg); }
-.rotate-6 { --ds-rotate: 6deg; transform: rotate(6deg); }
-.rotate-12 { --ds-rotate: 12deg; transform: rotate(12deg); }
-.rotate-45 { --ds-rotate: 45deg; transform: rotate(45deg); }
-.rotate-90 { --ds-rotate: 90deg; transform: rotate(90deg); }
-.rotate-180 { --ds-rotate: 180deg; transform: rotate(180deg); }
-.-rotate-1 { --ds-rotate: -1deg; transform: rotate(-1deg); }
-.-rotate-2 { --ds-rotate: -2deg; transform: rotate(-2deg); }
-.-rotate-3 { --ds-rotate: -3deg; transform: rotate(-3deg); }
-.-rotate-6 { --ds-rotate: -6deg; transform: rotate(-6deg); }
-.-rotate-12 { --ds-rotate: -12deg; transform: rotate(-12deg); }
-.-rotate-45 { --ds-rotate: -45deg; transform: rotate(-45deg); }
-.-rotate-90 { --ds-rotate: -90deg; transform: rotate(-90deg); }
-.-rotate-180 { --ds-rotate: -180deg; transform: rotate(-180deg); }
+.rotate-0 {
+  --ds-rotate: 0deg;
+  transform: rotate(0deg);
+}
+.rotate-1 {
+  --ds-rotate: 1deg;
+  transform: rotate(1deg);
+}
+.rotate-2 {
+  --ds-rotate: 2deg;
+  transform: rotate(2deg);
+}
+.rotate-3 {
+  --ds-rotate: 3deg;
+  transform: rotate(3deg);
+}
+.rotate-6 {
+  --ds-rotate: 6deg;
+  transform: rotate(6deg);
+}
+.rotate-12 {
+  --ds-rotate: 12deg;
+  transform: rotate(12deg);
+}
+.rotate-45 {
+  --ds-rotate: 45deg;
+  transform: rotate(45deg);
+}
+.rotate-90 {
+  --ds-rotate: 90deg;
+  transform: rotate(90deg);
+}
+.rotate-180 {
+  --ds-rotate: 180deg;
+  transform: rotate(180deg);
+}
+.-rotate-1 {
+  --ds-rotate: -1deg;
+  transform: rotate(-1deg);
+}
+.-rotate-2 {
+  --ds-rotate: -2deg;
+  transform: rotate(-2deg);
+}
+.-rotate-3 {
+  --ds-rotate: -3deg;
+  transform: rotate(-3deg);
+}
+.-rotate-6 {
+  --ds-rotate: -6deg;
+  transform: rotate(-6deg);
+}
+.-rotate-12 {
+  --ds-rotate: -12deg;
+  transform: rotate(-12deg);
+}
+.-rotate-45 {
+  --ds-rotate: -45deg;
+  transform: rotate(-45deg);
+}
+.-rotate-90 {
+  --ds-rotate: -90deg;
+  transform: rotate(-90deg);
+}
+.-rotate-180 {
+  --ds-rotate: -180deg;
+  transform: rotate(-180deg);
+}
 
 // Translate
-.translate-x-0 { --ds-translate-x: 0; transform: translateX(0); }
-.translate-x-1 { --ds-translate-x: 4px; transform: translateX(4px); }
-.translate-x-2 { --ds-translate-x: 8px; transform: translateX(8px); }
-.translate-x-3 { --ds-translate-x: 12px; transform: translateX(12px); }
-.translate-x-4 { --ds-translate-x: 16px; transform: translateX(16px); }
-.translate-x-5 { --ds-translate-x: 20px; transform: translateX(20px); }
-.translate-x-6 { --ds-translate-x: 24px; transform: translateX(24px); }
-.translate-x-8 { --ds-translate-x: 32px; transform: translateX(32px); }
-.translate-x-10 { --ds-translate-x: 40px; transform: translateX(40px); }
-.translate-x-12 { --ds-translate-x: 48px; transform: translateX(48px); }
-.translate-x-full { --ds-translate-x: 100%; transform: translateX(100%); }
-.translate-x-1\\/2 { --ds-translate-x: 50%; transform: translateX(50%); }
-.-translate-x-1 { --ds-translate-x: -4px; transform: translateX(-4px); }
-.-translate-x-2 { --ds-translate-x: -8px; transform: translateX(-8px); }
-.-translate-x-3 { --ds-translate-x: -12px; transform: translateX(-12px); }
-.-translate-x-4 { --ds-translate-x: -16px; transform: translateX(-16px); }
-.-translate-x-full { --ds-translate-x: -100%; transform: translateX(-100%); }
-.-translate-x-1\\/2 { --ds-translate-x: -50%; transform: translateX(-50%); }
-
-.translate-y-0 { --ds-translate-y: 0; transform: translateY(0); }
-.translate-y-1 { --ds-translate-y: 4px; transform: translateY(4px); }
-.translate-y-2 { --ds-translate-y: 8px; transform: translateY(8px); }
-.translate-y-3 { --ds-translate-y: 12px; transform: translateY(12px); }
-.translate-y-4 { --ds-translate-y: 16px; transform: translateY(16px); }
-.translate-y-5 { --ds-translate-y: 20px; transform: translateY(20px); }
-.translate-y-6 { --ds-translate-y: 24px; transform: translateY(24px); }
-.translate-y-8 { --ds-translate-y: 32px; transform: translateY(32px); }
-.translate-y-10 { --ds-translate-y: 40px; transform: translateY(40px); }
-.translate-y-12 { --ds-translate-y: 48px; transform: translateY(48px); }
-.translate-y-full { --ds-translate-y: 100%; transform: translateY(100%); }
-.translate-y-1\\/2 { --ds-translate-y: 50%; transform: translateY(50%); }
-.-translate-y-1 { --ds-translate-y: -4px; transform: translateY(-4px); }
-.-translate-y-2 { --ds-translate-y: -8px; transform: translateY(-8px); }
-.-translate-y-3 { --ds-translate-y: -12px; transform: translateY(-12px); }
-.-translate-y-4 { --ds-translate-y: -16px; transform: translateY(-16px); }
-.-translate-y-full { --ds-translate-y: -100%; transform: translateY(-100%); }
-.-translate-y-1\\/2 { --ds-translate-y: -50%; transform: translateY(-50%); }
+.translate-x-0 {
+  --ds-translate-x: 0;
+  transform: translateX(0);
+}
+.translate-x-1 {
+  --ds-translate-x: 4px;
+  transform: translateX(4px);
+}
+.translate-x-2 {
+  --ds-translate-x: 8px;
+  transform: translateX(8px);
+}
+.translate-x-3 {
+  --ds-translate-x: 12px;
+  transform: translateX(12px);
+}
+.translate-x-4 {
+  --ds-translate-x: 16px;
+  transform: translateX(16px);
+}
+.translate-x-5 {
+  --ds-translate-x: 20px;
+  transform: translateX(20px);
+}
+.translate-x-6 {
+  --ds-translate-x: 24px;
+  transform: translateX(24px);
+}
+.translate-x-8 {
+  --ds-translate-x: 32px;
+  transform: translateX(32px);
+}
+.translate-x-10 {
+  --ds-translate-x: 40px;
+  transform: translateX(40px);
+}
+.translate-x-12 {
+  --ds-translate-x: 48px;
+  transform: translateX(48px);
+}
+.translate-x-full {
+  --ds-translate-x: 100%;
+  transform: translateX(100%);
+}
+.translate-x-1\\/2 {
+  --ds-translate-x: 50%;
+  transform: translateX(50%);
+}
+.-translate-x-1 {
+  --ds-translate-x: -4px;
+  transform: translateX(-4px);
+}
+.-translate-x-2 {
+  --ds-translate-x: -8px;
+  transform: translateX(-8px);
+}
+.-translate-x-3 {
+  --ds-translate-x: -12px;
+  transform: translateX(-12px);
+}
+.-translate-x-4 {
+  --ds-translate-x: -16px;
+  transform: translateX(-16px);
+}
+.-translate-x-full {
+  --ds-translate-x: -100%;
+  transform: translateX(-100%);
+}
+.-translate-x-1\\/2 {
+  --ds-translate-x: -50%;
+  transform: translateX(-50%);
+}
+
+.translate-y-0 {
+  --ds-translate-y: 0;
+  transform: translateY(0);
+}
+.translate-y-1 {
+  --ds-translate-y: 4px;
+  transform: translateY(4px);
+}
+.translate-y-2 {
+  --ds-translate-y: 8px;
+  transform: translateY(8px);
+}
+.translate-y-3 {
+  --ds-translate-y: 12px;
+  transform: translateY(12px);
+}
+.translate-y-4 {
+  --ds-translate-y: 16px;
+  transform: translateY(16px);
+}
+.translate-y-5 {
+  --ds-translate-y: 20px;
+  transform: translateY(20px);
+}
+.translate-y-6 {
+  --ds-translate-y: 24px;
+  transform: translateY(24px);
+}
+.translate-y-8 {
+  --ds-translate-y: 32px;
+  transform: translateY(32px);
+}
+.translate-y-10 {
+  --ds-translate-y: 40px;
+  transform: translateY(40px);
+}
+.translate-y-12 {
+  --ds-translate-y: 48px;
+  transform: translateY(48px);
+}
+.translate-y-full {
+  --ds-translate-y: 100%;
+  transform: translateY(100%);
+}
+.translate-y-1\\/2 {
+  --ds-translate-y: 50%;
+  transform: translateY(50%);
+}
+.-translate-y-1 {
+  --ds-translate-y: -4px;
+  transform: translateY(-4px);
+}
+.-translate-y-2 {
+  --ds-translate-y: -8px;
+  transform: translateY(-8px);
+}
+.-translate-y-3 {
+  --ds-translate-y: -12px;
+  transform: translateY(-12px);
+}
+.-translate-y-4 {
+  --ds-translate-y: -16px;
+  transform: translateY(-16px);
+}
+.-translate-y-full {
+  --ds-translate-y: -100%;
+  transform: translateY(-100%);
+}
+.-translate-y-1\\/2 {
+  --ds-translate-y: -50%;
+  transform: translateY(-50%);
+}
 
 // Skew
-.skew-x-0 { --ds-skew-x: 0deg; transform: skewX(0deg); }
-.skew-x-1 { --ds-skew-x: 1deg; transform: skewX(1deg); }
-.skew-x-2 { --ds-skew-x: 2deg; transform: skewX(2deg); }
-.skew-x-3 { --ds-skew-x: 3deg; transform: skewX(3deg); }
-.skew-x-6 { --ds-skew-x: 6deg; transform: skewX(6deg); }
-.skew-x-12 { --ds-skew-x: 12deg; transform: skewX(12deg); }
-.-skew-x-1 { --ds-skew-x: -1deg; transform: skewX(-1deg); }
-.-skew-x-2 { --ds-skew-x: -2deg; transform: skewX(-2deg); }
-.-skew-x-3 { --ds-skew-x: -3deg; transform: skewX(-3deg); }
-.-skew-x-6 { --ds-skew-x: -6deg; transform: skewX(-6deg); }
-.-skew-x-12 { --ds-skew-x: -12deg; transform: skewX(-12deg); }
-
-.skew-y-0 { --ds-skew-y: 0deg; transform: skewY(0deg); }
-.skew-y-1 { --ds-skew-y: 1deg; transform: skewY(1deg); }
-.skew-y-2 { --ds-skew-y: 2deg; transform: skewY(2deg); }
-.skew-y-3 { --ds-skew-y: 3deg; transform: skewY(3deg); }
-.skew-y-6 { --ds-skew-y: 6deg; transform: skewY(6deg); }
-.skew-y-12 { --ds-skew-y: 12deg; transform: skewY(12deg); }
-.-skew-y-1 { --ds-skew-y: -1deg; transform: skewY(-1deg); }
-.-skew-y-2 { --ds-skew-y: -2deg; transform: skewY(-2deg); }
-.-skew-y-3 { --ds-skew-y: -3deg; transform: skewY(-3deg); }
-.-skew-y-6 { --ds-skew-y: -6deg; transform: skewY(-6deg); }
-.-skew-y-12 { --ds-skew-y: -12deg; transform: skewY(-12deg); }
+.skew-x-0 {
+  --ds-skew-x: 0deg;
+  transform: skewX(0deg);
+}
+.skew-x-1 {
+  --ds-skew-x: 1deg;
+  transform: skewX(1deg);
+}
+.skew-x-2 {
+  --ds-skew-x: 2deg;
+  transform: skewX(2deg);
+}
+.skew-x-3 {
+  --ds-skew-x: 3deg;
+  transform: skewX(3deg);
+}
+.skew-x-6 {
+  --ds-skew-x: 6deg;
+  transform: skewX(6deg);
+}
+.skew-x-12 {
+  --ds-skew-x: 12deg;
+  transform: skewX(12deg);
+}
+.-skew-x-1 {
+  --ds-skew-x: -1deg;
+  transform: skewX(-1deg);
+}
+.-skew-x-2 {
+  --ds-skew-x: -2deg;
+  transform: skewX(-2deg);
+}
+.-skew-x-3 {
+  --ds-skew-x: -3deg;
+  transform: skewX(-3deg);
+}
+.-skew-x-6 {
+  --ds-skew-x: -6deg;
+  transform: skewX(-6deg);
+}
+.-skew-x-12 {
+  --ds-skew-x: -12deg;
+  transform: skewX(-12deg);
+}
+
+.skew-y-0 {
+  --ds-skew-y: 0deg;
+  transform: skewY(0deg);
+}
+.skew-y-1 {
+  --ds-skew-y: 1deg;
+  transform: skewY(1deg);
+}
+.skew-y-2 {
+  --ds-skew-y: 2deg;
+  transform: skewY(2deg);
+}
+.skew-y-3 {
+  --ds-skew-y: 3deg;
+  transform: skewY(3deg);
+}
+.skew-y-6 {
+  --ds-skew-y: 6deg;
+  transform: skewY(6deg);
+}
+.skew-y-12 {
+  --ds-skew-y: 12deg;
+  transform: skewY(12deg);
+}
+.-skew-y-1 {
+  --ds-skew-y: -1deg;
+  transform: skewY(-1deg);
+}
+.-skew-y-2 {
+  --ds-skew-y: -2deg;
+  transform: skewY(-2deg);
+}
+.-skew-y-3 {
+  --ds-skew-y: -3deg;
+  transform: skewY(-3deg);
+}
+.-skew-y-6 {
+  --ds-skew-y: -6deg;
+  transform: skewY(-6deg);
+}
+.-skew-y-12 {
+  --ds-skew-y: -12deg;
+  transform: skewY(-12deg);
+}
 
 // Transform Origin
-.origin-center { transform-origin: center !important; }
-.origin-top { transform-origin: top !important; }
-.origin-top-right { transform-origin: top right !important; }
-.origin-right { transform-origin: right !important; }
-.origin-bottom-right { transform-origin: bottom right !important; }
-.origin-bottom { transform-origin: bottom !important; }
-.origin-bottom-left { transform-origin: bottom left !important; }
-.origin-left { transform-origin: left !important; }
-.origin-top-left { transform-origin: top left !important; }
+.origin-center {
+  transform-origin: center !important;
+}
+.origin-top {
+  transform-origin: top !important;
+}
+.origin-top-right {
+  transform-origin: top right !important;
+}
+.origin-right {
+  transform-origin: right !important;
+}
+.origin-bottom-right {
+  transform-origin: bottom right !important;
+}
+.origin-bottom {
+  transform-origin: bottom !important;
+}
+.origin-bottom-left {
+  transform-origin: bottom left !important;
+}
+.origin-left {
+  transform-origin: left !important;
+}
+.origin-top-left {
+  transform-origin: top left !important;
+}
 
 // ============================================================================
 // 13. HOVER & FOCUS TRANSITION HELPERS
@@ -942,8 +1622,10 @@ $duration-slower: 700ms;
 // These apply common hover effects with transitions built-in
 
 .hover-lift {
-  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
-  
+  transition:
+    transform var(--duration-fast) var(--ease-out),
+    box-shadow var(--duration-fast) var(--ease-out);
+
   &:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
@@ -952,7 +1634,7 @@ $duration-slower: 700ms;
 
 .hover-grow {
   transition: transform var(--duration-fast) var(--ease-out);
-  
+
   &:hover {
     transform: scale(1.05);
   }
@@ -960,7 +1642,7 @@ $duration-slower: 700ms;
 
 .hover-shrink {
   transition: transform var(--duration-fast) var(--ease-out);
-  
+
   &:hover {
     transform: scale(0.95);
   }
@@ -968,7 +1650,7 @@ $duration-slower: 700ms;
 
 .hover-brightness {
   transition: filter var(--duration-fast) var(--ease-in-out);
-  
+
   &:hover {
     filter: brightness(1.1);
   }
@@ -976,7 +1658,7 @@ $duration-slower: 700ms;
 
 .hover-dim {
   transition: opacity var(--duration-fast) var(--ease-in-out);
-  
+
   &:hover {
     opacity: 0.75;
   }
@@ -984,7 +1666,7 @@ $duration-slower: 700ms;
 
 .hover-glow {
   transition: box-shadow var(--duration-fast) var(--ease-out);
-  
+
   &:hover {
     box-shadow: 0 0 20px rgba(var(--primary-color-rgb, 0, 107, 223), 0.4);
   }
@@ -993,7 +1675,7 @@ $duration-slower: 700ms;
 // Active state helper
 .active-press {
   transition: transform var(--duration-75) var(--ease-out);
-  
+
   &:active {
     transform: scale(0.97);
   }
@@ -1009,7 +1691,7 @@ $duration-slower: 700ms;
     animation: none !important;
     transition: none !important;
   }
-  
+
   *,
   *::before,
   *::after {
@@ -1036,18 +1718,48 @@ $duration-slower: 700ms;
 // ============================================================================
 // 15. OPACITY UTILITIES (commonly used with animations)
 // ============================================================================
-.opacity-0 { opacity: 0 !important; }
-.opacity-5 { opacity: 0.05 !important; }
-.opacity-10 { opacity: 0.1 !important; }
-.opacity-20 { opacity: 0.2 !important; }
-.opacity-25 { opacity: 0.25 !important; }
-.opacity-30 { opacity: 0.3 !important; }
-.opacity-40 { opacity: 0.4 !important; }
-.opacity-50 { opacity: 0.5 !important; }
-.opacity-60 { opacity: 0.6 !important; }
-.opacity-70 { opacity: 0.7 !important; }
-.opacity-75 { opacity: 0.75 !important; }
-.opacity-80 { opacity: 0.8 !important; }
-.opacity-90 { opacity: 0.9 !important; }
-.opacity-95 { opacity: 0.95 !important; }
-.opacity-100 { opacity: 1 !important; }
+.opacity-0 {
+  opacity: 0 !important;
+}
+.opacity-5 {
+  opacity: 0.05 !important;
+}
+.opacity-10 {
+  opacity: 0.1 !important;
+}
+.opacity-20 {
+  opacity: 0.2 !important;
+}
+.opacity-25 {
+  opacity: 0.25 !important;
+}
+.opacity-30 {
+  opacity: 0.3 !important;
+}
+.opacity-40 {
+  opacity: 0.4 !important;
+}
+.opacity-50 {
+  opacity: 0.5 !important;
+}
+.opacity-60 {
+  opacity: 0.6 !important;
+}
+.opacity-70 {
+  opacity: 0.7 !important;
+}
+.opacity-75 {
+  opacity: 0.75 !important;
+}
+.opacity-80 {
+  opacity: 0.8 !important;
+}
+.opacity-90 {
+  opacity: 0.9 !important;
+}
+.opacity-95 {
+  opacity: 0.95 !important;
+}
+.opacity-100 {
+  opacity: 1 !important;
+}