dynamic-ds 1.0.5 → 1.0.6

package/src/lib/styles/_animations.scss

@@ -0,0 +1,1053 @@
+// ============================================================================
+// ANIMATION SYSTEM - Dynamic Design System
+// ============================================================================
+// Comprehensive animation utilities for consistent motion design
+// ============================================================================
+
+// ============================================================================
+// 1. TIMING FUNCTION TOKENS
+// ============================================================================
+$ease-linear: linear;
+$ease-in: cubic-bezier(0.4, 0, 1, 1);
+$ease-out: cubic-bezier(0, 0, 0.2, 1);
+$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+// Advanced easing functions
+$ease-bounce-out: cubic-bezier(0.34, 1.56, 0.64, 1);
+$ease-bounce-in: cubic-bezier(0.36, 0, 0.66, -0.56);
+$ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1);
+$ease-back-in: cubic-bezier(0.36, 0, 0.66, -0.56);
+$ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+$ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+:root {
+  // Standard easing
+  --ease-linear: #{$ease-linear};
+  --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};
+  --ease-back-out: #{$ease-back-out};
+  --ease-back-in: #{$ease-back-in};
+  --ease-elastic: #{$ease-elastic};
+  --ease-spring: #{$ease-spring};
+}
+
+// ============================================================================
+// 2. DURATION TOKENS
+// ============================================================================
+$duration-0: 0ms;
+$duration-75: 75ms;
+$duration-100: 100ms;
+$duration-150: 150ms;
+$duration-200: 200ms;
+$duration-300: 300ms;
+$duration-500: 500ms;
+$duration-700: 700ms;
+$duration-1000: 1000ms;
+
+// Semantic durations
+$duration-instant: 0ms;
+$duration-fast: 150ms;
+$duration-normal: 300ms;
+$duration-slow: 500ms;
+$duration-slower: 700ms;
+
+:root {
+  // Numeric durations
+  --duration-0: #{$duration-0};
+  --duration-75: #{$duration-75};
+  --duration-100: #{$duration-100};
+  --duration-150: #{$duration-150};
+  --duration-200: #{$duration-200};
+  --duration-300: #{$duration-300};
+  --duration-500: #{$duration-500};
+  --duration-700: #{$duration-700};
+  --duration-1000: #{$duration-1000};
+  
+  // Semantic durations
+  --duration-instant: #{$duration-instant};
+  --duration-fast: #{$duration-fast};
+  --duration-normal: #{$duration-normal};
+  --duration-slow: #{$duration-slow};
+  --duration-slower: #{$duration-slower};
+}
+
+// ============================================================================
+// 3. TRANSITION PRESET TOKENS
+// ============================================================================
+:root {
+  // 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-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);
+}
+
+// ============================================================================
+// 4. TRANSITION PROPERTY UTILITIES
+// ============================================================================
+.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-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-timing-function: var(--ease-in-out);
+  transition-duration: var(--duration-normal);
+}
+.transition-opacity {
+  transition-property: opacity !important;
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: var(--duration-normal);
+}
+.transition-shadow {
+  transition-property: box-shadow !important;
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: var(--duration-normal);
+}
+.transition-transform {
+  transition-property: transform !important;
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: var(--duration-normal);
+}
+
+// ============================================================================
+// 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; }
+
+// 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; }
+
+// ============================================================================
+// 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; }
+
+// ============================================================================
+// 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; }
+
+// ============================================================================
+// 8. KEYFRAME ANIMATIONS
+// ============================================================================
+
+// --- Fade Animations ---
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+// --- Slide Animations ---
+@keyframes slideInUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slideInDown {
+  from { transform: translateY(-100%); }
+  to { transform: translateY(0); }
+}
+
+@keyframes slideInLeft {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slideInRight {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes slideOutUp {
+  from { transform: translateY(0); }
+  to { transform: translateY(-100%); }
+}
+
+@keyframes slideOutDown {
+  from { transform: translateY(0); }
+  to { transform: translateY(100%); }
+}
+
+@keyframes slideOutLeft {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+
+@keyframes slideOutRight {
+  from { transform: translateX(0); }
+  to { transform: translateX(100%); }
+}
+
+// --- Scale Animations ---
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes scaleOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes zoomOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}
+
+@keyframes popIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  70% {
+    transform: scale(1.05);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+// --- Rotate Animations ---
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes spinReverse {
+  from { transform: rotate(360deg); }
+  to { transform: rotate(0deg); }
+}
+
+@keyframes rotateIn {
+  from {
+    opacity: 0;
+    transform: rotate(-200deg);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(0);
+  }
+}
+
+// --- Bounce & Pulse Animations ---
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+@keyframes bounceIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.3);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.05);
+  }
+  70% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes ping {
+  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); }
+}
+
+// --- 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); }
+}
+
+@keyframes shakeX {
+  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); }
+}
+
+@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); }
+}
+
+@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); }
+}
+
+// --- Attention Seekers ---
+@keyframes flash {
+  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); }
+}
+
+@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); }
+}
+
+@keyframes swing {
+  20% { transform: rotate(15deg); }
+  40% { transform: rotate(-10deg); }
+  60% { transform: rotate(5deg); }
+  80% { transform: rotate(-5deg); }
+  100% { transform: rotate(0deg); }
+}
+
+// --- Loading Animations ---
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes skeleton {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+
+@keyframes progress {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes dotPulse {
+  0%, 80%, 100% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+// --- Float Animation ---
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+// ============================================================================
+// 9. ANIMATION UTILITY CLASSES
+// ============================================================================
+
+// --- Fade Classes ---
+.animate-fade-in {
+  animation: fadeIn var(--duration-normal) var(--ease-out) forwards;
+}
+.animate-fade-out {
+  animation: fadeOut var(--duration-normal) var(--ease-in) forwards;
+}
+.animate-fade-in-up {
+  animation: fadeInUp var(--duration-normal) var(--ease-out) forwards;
+}
+.animate-fade-in-down {
+  animation: fadeInDown var(--duration-normal) var(--ease-out) forwards;
+}
+.animate-fade-in-left {
+  animation: fadeInLeft var(--duration-normal) var(--ease-out) forwards;
+}
+.animate-fade-in-right {
+  animation: fadeInRight var(--duration-normal) var(--ease-out) forwards;
+}
+
+// --- Slide Classes ---
+.animate-slide-in-up {
+  animation: slideInUp var(--duration-normal) var(--ease-out) forwards;
+}
+.animate-slide-in-down {
+  animation: slideInDown var(--duration-normal) var(--ease-out) forwards;
+}
+.animate-slide-in-left {
+  animation: slideInLeft var(--duration-normal) var(--ease-out) forwards;
+}
+.animate-slide-in-right {
+  animation: slideInRight var(--duration-normal) var(--ease-out) forwards;
+}
+.animate-slide-out-up {
+  animation: slideOutUp var(--duration-normal) var(--ease-in) forwards;
+}
+.animate-slide-out-down {
+  animation: slideOutDown var(--duration-normal) var(--ease-in) forwards;
+}
+.animate-slide-out-left {
+  animation: slideOutLeft var(--duration-normal) var(--ease-in) forwards;
+}
+.animate-slide-out-right {
+  animation: slideOutRight var(--duration-normal) var(--ease-in) forwards;
+}
+
+// --- Scale Classes ---
+.animate-scale-in {
+  animation: scaleIn var(--duration-normal) var(--ease-out) forwards;
+}
+.animate-scale-out {
+  animation: scaleOut var(--duration-normal) var(--ease-in) forwards;
+}
+.animate-zoom-in {
+  animation: zoomIn var(--duration-normal) var(--ease-out) forwards;
+}
+.animate-zoom-out {
+  animation: zoomOut var(--duration-normal) var(--ease-in) forwards;
+}
+.animate-pop-in {
+  animation: popIn var(--duration-normal) var(--ease-spring) forwards;
+}
+
+// --- Continuous Animations ---
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+.animate-spin-slow {
+  animation: spin 3s linear infinite;
+}
+.animate-spin-reverse {
+  animation: spinReverse 1s linear infinite;
+}
+.animate-ping {
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+// --- Attention Seeking Classes ---
+.animate-shake {
+  animation: shake 0.5s var(--ease-in-out);
+}
+.animate-shake-x {
+  animation: shakeX 0.8s var(--ease-in-out);
+}
+.animate-shake-y {
+  animation: shakeY 0.8s var(--ease-in-out);
+}
+.animate-wobble {
+  animation: wobble 1s var(--ease-in-out);
+}
+.animate-jello {
+  animation: jello 1s var(--ease-in-out);
+}
+.animate-flash {
+  animation: flash 1s var(--ease-in-out);
+}
+.animate-tada {
+  animation: tada 1s var(--ease-in-out);
+}
+.animate-rubber-band {
+  animation: rubberBand 1s var(--ease-in-out);
+}
+.animate-swing {
+  animation: swing 1s var(--ease-in-out);
+  transform-origin: top center;
+}
+.animate-heartbeat {
+  animation: heartbeat 1.5s var(--ease-in-out) infinite;
+}
+.animate-bounce-in {
+  animation: bounceIn 0.75s var(--ease-out);
+}
+.animate-rotate-in {
+  animation: rotateIn 0.6s var(--ease-out);
+}
+
+// ============================================================================
+// 10. LOADING STATE CLASSES
+// ============================================================================
+.animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--neutral-color-100) 25%,
+    var(--neutral-color-50) 50%,
+    var(--neutral-color-100) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--neutral-color-100) 0px,
+    var(--neutral-color-50) 40px,
+    var(--neutral-color-100) 80px
+  );
+  background-size: 600px 100%;
+  animation: skeleton 1.2s ease-in-out infinite;
+}
+
+.skeleton-text {
+  @extend .skeleton;
+  height: 1em;
+  border-radius: 0.25em;
+}
+
+.skeleton-circle {
+  @extend .skeleton;
+  border-radius: 50%;
+}
+
+.skeleton-rect {
+  @extend .skeleton;
+  border-radius: var(--radius-md, 8px);
+}
+
+// Loading dots
+.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; }
+  }
+}
+
+// Spinner
+.spinner {
+  display: inline-block;
+  width: 1.5em;
+  height: 1.5em;
+  border: 2px solid currentColor;
+  border-radius: 50%;
+  border-top-color: transparent;
+  animation: spin 0.75s linear infinite;
+}
+
+.spinner-sm {
+  @extend .spinner;
+  width: 1em;
+  height: 1em;
+  border-width: 1.5px;
+}
+
+.spinner-lg {
+  @extend .spinner;
+  width: 2em;
+  height: 2em;
+  border-width: 3px;
+}
+
+// ============================================================================
+// 11. ANIMATION CONTROL UTILITIES
+// ============================================================================
+
+// Animation iteration count
+.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; }
+
+// 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; }
+
+// Animation play state
+.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; }
+
+// 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; }
+
+// No animation
+.animate-none { animation: none !important; }
+
+// ============================================================================
+// 12. TRANSFORM UTILITIES
+// ============================================================================
+// Base transform class
+.transform {
+  --ds-translate-x: 0;
+  --ds-translate-y: 0;
+  --ds-rotate: 0;
+  --ds-skew-x: 0;
+  --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-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-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); }
+
+// 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); }
+
+// 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%); }
+
+// 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); }
+
+// 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; }
+
+// ============================================================================
+// 13. HOVER & FOCUS TRANSITION HELPERS
+// ============================================================================
+// 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);
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.hover-grow {
+  transition: transform var(--duration-fast) var(--ease-out);
+  
+  &:hover {
+    transform: scale(1.05);
+  }
+}
+
+.hover-shrink {
+  transition: transform var(--duration-fast) var(--ease-out);
+  
+  &:hover {
+    transform: scale(0.95);
+  }
+}
+
+.hover-brightness {
+  transition: filter var(--duration-fast) var(--ease-in-out);
+  
+  &:hover {
+    filter: brightness(1.1);
+  }
+}
+
+.hover-dim {
+  transition: opacity var(--duration-fast) var(--ease-in-out);
+  
+  &:hover {
+    opacity: 0.75;
+  }
+}
+
+.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);
+  }
+}
+
+// Active state helper
+.active-press {
+  transition: transform var(--duration-75) var(--ease-out);
+  
+  &:active {
+    transform: scale(0.97);
+  }
+}
+
+// ============================================================================
+// 14. MOTION PREFERENCE UTILITIES
+// ============================================================================
+// Respects user's reduced motion preference
+
+@media (prefers-reduced-motion: reduce) {
+  .motion-reduce {
+    animation: none !important;
+    transition: none !important;
+  }
+  
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+.motion-safe {
+  @media (prefers-reduced-motion: no-preference) {
+    // Animations only apply when user has no motion preference
+  }
+}
+
+// Force animations regardless of preference (use sparingly)
+.motion-force {
+  animation-duration: inherit !important;
+  animation-iteration-count: inherit !important;
+  transition-duration: inherit !important;
+}
+
+// ============================================================================
+// 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; }