@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.5 → 0.1.7

package/src/styles/utilities/advanced-transition-system.css

@@ -0,0 +1,467 @@
+/* Story 14: Advanced Transition System with Cubic Bezier Curves */
+
+/* ===== Advanced Transition System ===== */
+.advanced-transition {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.advanced-transition-fast {
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
+  transform: translateZ(0);
+}
+
+.advanced-transition-slow {
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: transform, opacity;
+  transform: translateZ(0);
+}
+
+/* ===== Cubic Bezier Curve Support ===== */
+.transition-ease-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.transition-ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.transition-ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.transition-ease-out-quint {
+  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.transition-ease-in-quint {
+  transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+
+.transition-ease-in-out-quint {
+  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+}
+
+.transition-ease-out-expo {
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.transition-ease-in-expo {
+  transition-timing-function: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+}
+
+.transition-ease-in-out-expo {
+  transition-timing-function: cubic-bezier(1, 0, 0, 1);
+}
+
+.transition-ease-out-circ {
+  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.transition-ease-in-circ {
+  transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+}
+
+.transition-ease-in-out-circ {
+  transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+}
+
+/* ===== Performance Optimization ===== */
+.transition-performance {
+  will-change: transform, opacity;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  perspective: 1000px;
+  -webkit-perspective: 1000px;
+}
+
+.transition-hardware-accelerated {
+  will-change: transform;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.transition-memory-optimized {
+  will-change: auto;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+}
+
+/* ===== Device-Specific Optimization ===== */
+@media (max-width: 768px) {
+  .transition-mobile-optimized {
+    transition-duration: 0.2s;
+    will-change: transform, opacity;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+  }
+  
+  .transition-mobile-fast {
+    transition-duration: 0.1s;
+  }
+  
+  .transition-mobile-slow {
+    transition-duration: 0.3s;
+  }
+}
+
+@media (max-width: 480px) {
+  .transition-mobile-optimized {
+    transition-duration: 0.15s;
+  }
+  
+  .transition-mobile-fast {
+    transition-duration: 0.08s;
+  }
+  
+  .transition-mobile-slow {
+    transition-duration: 0.25s;
+  }
+}
+
+@media (min-width: 1024px) {
+  .transition-desktop-optimized {
+    transition-duration: 0.4s;
+    will-change: transform, opacity;
+    transform: translateZ(0);
+    -webkit-transform: translateZ(0);
+  }
+  
+  .transition-desktop-fast {
+    transition-duration: 0.2s;
+  }
+  
+  .transition-desktop-slow {
+    transition-duration: 0.6s;
+  }
+}
+
+/* ===== Accessibility Support ===== */
+@media (prefers-reduced-motion: reduce) {
+  .advanced-transition,
+  .advanced-transition-fast,
+  .advanced-transition-slow,
+  .transition-ease-out,
+  .transition-ease-in,
+  .transition-ease-in-out,
+  .transition-ease-out-quint,
+  .transition-ease-in-quint,
+  .transition-ease-in-out-quint,
+  .transition-ease-out-expo,
+  .transition-ease-in-expo,
+  .transition-ease-in-out-expo,
+  .transition-ease-out-circ,
+  .transition-ease-in-circ,
+  .transition-ease-in-out-circ {
+    transition: none !important;
+    animation: none !important;
+  }
+  
+  .transition-performance,
+  .transition-hardware-accelerated,
+  .transition-memory-optimized {
+    will-change: auto !important;
+    transform: none !important;
+    -webkit-transform: none !important;
+  }
+}
+
+/* ===== Transition Variants ===== */
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ===== Custom Transition Durations ===== */
+.transition-duration-75 {
+  transition-duration: 75ms;
+}
+
+.transition-duration-100 {
+  transition-duration: 100ms;
+}
+
+.transition-duration-150 {
+  transition-duration: 150ms;
+}
+
+.transition-duration-200 {
+  transition-duration: 200ms;
+}
+
+.transition-duration-300 {
+  transition-duration: 300ms;
+}
+
+.transition-duration-500 {
+  transition-duration: 500ms;
+}
+
+.transition-duration-700 {
+  transition-duration: 700ms;
+}
+
+.transition-duration-1000 {
+  transition-duration: 1000ms;
+}
+
+/* ===== Transition Delays ===== */
+.transition-delay-75 {
+  transition-delay: 75ms;
+}
+
+.transition-delay-100 {
+  transition-delay: 100ms;
+}
+
+.transition-delay-150 {
+  transition-delay: 150ms;
+}
+
+.transition-delay-200 {
+  transition-delay: 200ms;
+}
+
+.transition-delay-300 {
+  transition-delay: 300ms;
+}
+
+.transition-delay-500 {
+  transition-delay: 500ms;
+}
+
+.transition-delay-700 {
+  transition-delay: 700ms;
+}
+
+.transition-delay-1000 {
+  transition-delay: 1000ms;
+}
+
+/* ===== Advanced Animation Classes ===== */
+.animate-fade-in {
+  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.animate-fade-out {
+  animation: fadeOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.animate-slide-in-up {
+  animation: slideInUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.animate-slide-in-down {
+  animation: slideInDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.animate-slide-in-left {
+  animation: slideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.animate-slide-in-right {
+  animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.animate-scale-out {
+  animation: scaleOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+/* ===== Keyframe Animations ===== */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInDown {
+  from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes scaleOut {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+
+/* ===== Staggered Animations ===== */
+.animate-stagger-1 {
+  animation-delay: 0ms;
+}
+
+.animate-stagger-2 {
+  animation-delay: 100ms;
+}
+
+.animate-stagger-3 {
+  animation-delay: 200ms;
+}
+
+.animate-stagger-4 {
+  animation-delay: 300ms;
+}
+
+.animate-stagger-5 {
+  animation-delay: 400ms;
+}
+
+/* ===== Performance Monitoring Classes ===== */
+.transition-monitored {
+  position: relative;
+}
+
+.transition-monitored::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 255, 0, 0.1);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+.transition-monitored.transitioning::before {
+  opacity: 1;
+}
+
+/* ===== Battery-Aware Transitions ===== */
+@media (prefers-reduced-motion: no-preference) {
+  .transition-battery-aware {
+    transition-duration: 0.25s;
+  }
+  
+  .transition-battery-aware.low-battery {
+    transition-duration: 0.15s;
+  }
+  
+  .transition-battery-aware.critical-battery {
+    transition-duration: 0.1s;
+  }
+}
+
+/* ===== High-Performance Transitions ===== */
+.transition-high-performance {
+  will-change: transform, opacity;
+  transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  perspective: 1000px;
+  -webkit-perspective: 1000px;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ===== Reduced Motion Overrides ===== */
+@media (prefers-reduced-motion: reduce) {
+  .transition-high-performance {
+    will-change: auto;
+    transform: none;
+    -webkit-transform: none;
+    transition: none;
+  }
+}