osi-cards-lib 1.0.0

package/styles/core/_animations.scss

@@ -0,0 +1,766 @@
+/* ===================================================================
+   ANIMATION KEYFRAMES
+   Performance-optimized animations with hardware acceleration
+   =================================================================== */
+
+/* Entry Animations - For components appearing on screen */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, var(--motion-distance-lg), 0); /* Hardware acceleration */
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 0, 0); /* Hardware acceleration */
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fadeInSoft {
+  from {
+    opacity: 0;
+    transform: translate3d(0, var(--motion-distance-sm), 0) scale(var(--motion-scale-soft-start));
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(var(--motion-scale-soft-end));
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translate3d(0, var(--motion-distance-xl), 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translate3d(0, calc(var(--motion-distance-xl) * -1), 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translate3d(calc(var(--motion-distance-xl) * -1), 0, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translate3d(var(--motion-distance-xl), 0, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUpSoft {
+  from {
+    opacity: 0;
+    transform: translate3d(0, var(--motion-distance-md), 0) scale(var(--motion-scale-soft-start));
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(var(--motion-scale-soft-end));
+  }
+}
+
+/* Scale Animations - For interactive feedback */
+@keyframes scale {
+  0% {
+    transform: scale(var(--motion-scale-pulse-min)) translate3d(0, 0, 0);
+  }
+  70% {
+    transform: scale(var(--motion-scale-pop)) translate3d(0, 0, 0);
+  }
+  100% {
+    transform: scale(var(--motion-scale-soft-end)) translate3d(0, 0, 0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    transform: scale(var(--motion-scale-soft-start)) translate3d(0, 0, 0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(var(--motion-scale-soft-end)) translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInScaleSoft {
+  from {
+    opacity: 0;
+    transform: scale(var(--motion-scale-soft-start)) translate3d(0, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: scale(var(--motion-scale-soft-end)) translate3d(0, 0, 0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(var(--motion-scale-soft-end)) translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(var(--motion-scale-pop)) translate3d(0, 0, 0);
+    opacity: 0.8;
+  }
+}
+
+/* Enhanced hover elevation for cards - subtle lift */
+@keyframes hoverLift {
+  from {
+    transform: translateY(0px) translate3d(0, 0, 0);
+  }
+  to {
+    transform: translateY(-2px) translate3d(0, 0, 0);
+  }
+}
+
+/* Glow accent animation - brand color pulse */
+@keyframes glowAccent {
+  0%, 100% {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  }
+  50% {
+    text-shadow: 0 2px 6px rgba(255, 121, 0, 0.25);
+  }
+}
+
+/* Value emphasis - gentle highlight on important numbers */
+@keyframes valueEmphasize {
+  0%, 100% {
+    color: var(--card-text-primary);
+  }
+  50% {
+    color: color-mix(in srgb, var(--card-text-primary) 85%, var(--color-brand) 15%);
+  }
+}
+
+/* Glow & Effect Animations - For visual enhancements */
+@keyframes glowPulse {
+  0%, 100% {
+    opacity: 0.6;
+    filter: blur(25px);
+  }
+  50% {
+    opacity: 1;
+    filter: blur(30px);
+  }
+}
+
+@keyframes glowDrift {
+  0%, 100% {
+    opacity: 0.7;
+    transform: translate3d(0, 0, 0);
+  }
+  25% {
+    opacity: 0.8;
+    transform: translate3d(5px, -5px, 0);
+  }
+  50% {
+    opacity: 0.9;
+    transform: translate3d(0, 5px, 0);
+  }
+  75% {
+    opacity: 0.8;
+    transform: translate3d(-5px, 0, 0);
+  }
+}
+
+@keyframes shimmer {
+  0%, 100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+/* Rotation Animations - For loaders and indicators */
+@keyframes spin {
+  from {
+    transform: rotate(0deg) translateZ(0);
+  }
+  to {
+    transform: rotate(360deg) translateZ(0);
+  }
+}
+
+@keyframes spinSlow {
+  from {
+    transform: rotate(0deg) translateZ(0);
+  }
+  to {
+    transform: rotate(360deg) translateZ(0);
+  }
+}
+
+/* Shake & Attention Animations */
+@keyframes shake {
+  0%, 100% {
+    transform: translate3d(0, 0, 0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translate3d(calc(var(--motion-distance-sm) * -1), 0, 0);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translate3d(var(--motion-distance-sm), 0, 0);
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    transform: translate3d(0, 0, 0);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translate3d(0, calc(var(--motion-distance-lg) * -1), 0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+/* ===================================================================
+   LLM SIMULATION & STREAMING ANIMATIONS
+   Section entrance animations for progressive loading
+   =================================================================== */
+
+/* Section entrance animation - smooth fade-in with scale and upward motion */
+@keyframes sectionEnter {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 20px, 0) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+/* Section streaming glow effect - subtle pulse during appearance */
+@keyframes sectionStreamingGlow {
+  0%, 100% {
+    box-shadow: 0 0 0 0 rgba(255, 121, 0, 0);
+  }
+  50% {
+    box-shadow: 0 0 12px 2px rgba(255, 121, 0, 0.15);
+  }
+}
+
+/* Field entrance animation - smooth fade-in with upward motion */
+@keyframes fieldEnter {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 10px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+/* Item entrance animation - slide-in from left with fade */
+@keyframes itemEnter {
+  from {
+    opacity: 0;
+    transform: translate3d(-10px, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+/* ===================================================================
+   STATE TRANSITION ANIMATIONS
+   Smooth transitions between LLM simulation states
+   =================================================================== */
+
+/* State fade transition - smooth fade between states */
+@keyframes stateFade {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 8px, 0) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+
+/* State slide transition - slide out old, slide in new */
+@keyframes stateSlideOut {
+  from {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(0, -10px, 0);
+  }
+}
+
+@keyframes stateSlideIn {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 10px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+/* Error shake animation - for error states */
+@keyframes errorShake {
+  0%, 100% {
+    transform: translate3d(0, 0, 0);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  20%, 40%, 60%, 80% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
+
+/* Error pulse - subtle pulse for error indication */
+@keyframes errorPulse {
+  0%, 100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
+  }
+  50% {
+    opacity: 0.9;
+    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
+  }
+}
+
+/* Enhanced shimmer effect - for skeleton loaders */
+@keyframes shimmerWave {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+/* Skeleton pulse - breathing effect for loading */
+@keyframes skeletonPulse {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* ===================================================================
+   ANIMATION UTILITY CLASSES
+   Pre-configured animations using design system variables
+   =================================================================== */
+
+/* Entry Animations */
+.animate-fade-in {
+  animation: fadeIn var(--duration-moderate) var(--ease-out-smooth);
+  animation-fill-mode: var(--animation-fill-mode);
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp var(--duration-moderate) var(--ease-out-smooth);
+  animation-fill-mode: var(--animation-fill-mode);
+}
+
+.animate-fade-in-soft {
+  animation: fadeInSoft var(--duration-slow) var(--ease-out-smooth);
+  animation-fill-mode: var(--animation-fill-mode);
+}
+
+.animate-fade-in-up-soft {
+  animation: fadeInUpSoft var(--duration-slow) var(--ease-out-smooth);
+  animation-fill-mode: var(--animation-fill-mode);
+}
+
+.animate-fade-in-scale-soft {
+  animation: fadeInScaleSoft var(--duration-moderate) var(--ease-out-smooth);
+  animation-fill-mode: var(--animation-fill-mode);
+}
+
+.animate-slide-up {
+  animation: slideUp var(--duration-moderate) var(--ease-out-smooth);
+  animation-fill-mode: var(--animation-fill-mode);
+}
+
+.animate-slide-down {
+  animation: slideDown var(--duration-moderate) var(--ease-out-smooth);
+  animation-fill-mode: var(--animation-fill-mode);
+}
+
+.animate-slide-in-left {
+  animation: slideInLeft var(--duration-moderate) var(--ease-out-smooth);
+  animation-fill-mode: var(--animation-fill-mode);
+}
+
+.animate-slide-in-right {
+  animation: slideInRight var(--duration-moderate) var(--ease-out-smooth);
+  animation-fill-mode: var(--animation-fill-mode);
+}
+
+/* Scale Animations */
+.animate-scale {
+  animation: scale var(--duration-moderate) var(--ease-spring);
+  animation-fill-mode: var(--animation-fill-mode);
+}
+
+.animate-scale-in {
+  animation: scaleIn var(--duration-moderate) var(--ease-out-smooth);
+  animation-fill-mode: var(--animation-fill-mode);
+}
+
+.animate-pulse {
+  animation: pulse var(--duration-slow) var(--ease-in-out-smooth) infinite;
+}
+
+/* Rotation Animations */
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+.animate-spin-slow {
+  animation: spinSlow 3s linear infinite;
+}
+
+/* Attention Animations */
+.animate-shake {
+  animation: shake var(--duration-slow) var(--ease-in-out-smooth);
+}
+
+.animate-bounce {
+  animation: bounce 1s infinite;
+}
+
+/* ===================================================================
+   LLM SIMULATION ANIMATION CLASSES
+   Section streaming and entrance animations
+   =================================================================== */
+
+/* Section entrance animation - for progressive section appearance */
+.section-streaming {
+  animation: sectionEnter 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  opacity: 0;
+  transform: translate3d(0, 20px, 0) scale(0.95);
+  will-change: transform, opacity;
+  /* Performance optimization: GPU acceleration */
+  backface-visibility: hidden;
+  perspective: 1000px;
+  /* Additional performance optimizations */
+  contain: layout style paint;
+  transform-origin: center center;
+}
+
+/* Section entered state - animation complete */
+.section-entered {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+  will-change: auto;
+  /* Remove GPU hints after animation */
+  backface-visibility: visible;
+  perspective: none;
+}
+
+/* Section with streaming glow effect */
+.section-streaming-glow {
+  animation: sectionStreamingGlow 1.5s ease-in-out infinite;
+}
+
+/* Stagger delay utilities for section animations */
+.section-stagger-0 { animation-delay: 0ms; }
+.section-stagger-1 { animation-delay: 80ms; }
+.section-stagger-2 { animation-delay: 160ms; }
+.section-stagger-3 { animation-delay: 240ms; }
+.section-stagger-4 { animation-delay: 320ms; }
+.section-stagger-5 { animation-delay: 400ms; }
+.section-stagger-6 { animation-delay: 480ms; }
+.section-stagger-7 { animation-delay: 560ms; }
+.section-stagger-8 { animation-delay: 640ms; }
+.section-stagger-9 { animation-delay: 720ms; }
+.section-stagger-10 { animation-delay: 800ms; }
+
+/* ===================================================================
+   FIELD & ITEM ANIMATION CLASSES
+   Progressive reveal animations for fields and items within sections
+   =================================================================== */
+
+/* Field entrance animation - for progressive field reveal */
+.field-streaming {
+  animation: fieldEnter 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  opacity: 0;
+  transform: translate3d(0, 10px, 0);
+  will-change: transform, opacity;
+  /* Performance optimization: GPU acceleration */
+  backface-visibility: hidden;
+  perspective: 1000px;
+  /* Additional performance optimizations */
+  contain: layout style paint;
+  transform-origin: center center;
+}
+
+/* Field entered state - animation complete */
+.field-entered {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+  will-change: auto;
+  /* Remove GPU hints after animation */
+  backface-visibility: visible;
+  perspective: none;
+}
+
+/* Item entrance animation - for progressive item reveal */
+.item-streaming {
+  animation: itemEnter 350ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  opacity: 0;
+  transform: translate3d(-10px, 0, 0);
+  will-change: transform, opacity;
+  /* Performance optimization: GPU acceleration */
+  backface-visibility: hidden;
+  perspective: 1000px;
+  /* Additional performance optimizations */
+  contain: layout style paint;
+  transform-origin: center center;
+}
+
+/* Item entered state - animation complete */
+.item-entered {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+  will-change: auto;
+  /* Remove GPU hints after animation */
+  backface-visibility: visible;
+  perspective: none;
+}
+
+/* Stagger delay utilities for field animations (30ms increments) */
+.field-stagger-0 { animation-delay: 0ms; }
+.field-stagger-1 { animation-delay: 30ms; }
+.field-stagger-2 { animation-delay: 60ms; }
+.field-stagger-3 { animation-delay: 90ms; }
+.field-stagger-4 { animation-delay: 120ms; }
+.field-stagger-5 { animation-delay: 150ms; }
+.field-stagger-6 { animation-delay: 180ms; }
+.field-stagger-7 { animation-delay: 210ms; }
+.field-stagger-8 { animation-delay: 240ms; }
+.field-stagger-9 { animation-delay: 270ms; }
+.field-stagger-10 { animation-delay: 300ms; }
+.field-stagger-11 { animation-delay: 330ms; }
+.field-stagger-12 { animation-delay: 360ms; }
+.field-stagger-13 { animation-delay: 390ms; }
+.field-stagger-14 { animation-delay: 420ms; }
+.field-stagger-15 { animation-delay: 450ms; }
+
+/* Stagger delay utilities for item animations (40ms increments) */
+.item-stagger-0 { animation-delay: 0ms; }
+.item-stagger-1 { animation-delay: 40ms; }
+.item-stagger-2 { animation-delay: 80ms; }
+.item-stagger-3 { animation-delay: 120ms; }
+.item-stagger-4 { animation-delay: 160ms; }
+.item-stagger-5 { animation-delay: 200ms; }
+.item-stagger-6 { animation-delay: 240ms; }
+.item-stagger-7 { animation-delay: 280ms; }
+.item-stagger-8 { animation-delay: 320ms; }
+.item-stagger-9 { animation-delay: 360ms; }
+.item-stagger-10 { animation-delay: 400ms; }
+.item-stagger-11 { animation-delay: 440ms; }
+.item-stagger-12 { animation-delay: 480ms; }
+.item-stagger-13 { animation-delay: 520ms; }
+.item-stagger-14 { animation-delay: 560ms; }
+.item-stagger-15 { animation-delay: 600ms; }
+
+/* ===================================================================
+   STATE TRANSITION ANIMATION CLASSES
+   Smooth transitions between thinking, streaming, and complete states
+   =================================================================== */
+
+/* State transition - fade in new state */
+.state-transition-enter {
+  animation: stateFade 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  opacity: 0;
+  transform: translate3d(0, 8px, 0) scale(0.98);
+  will-change: transform, opacity;
+  /* Performance optimization: GPU acceleration */
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+/* State transition - fade out old state */
+.state-transition-exit {
+  animation: stateSlideOut 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  will-change: transform, opacity;
+  /* Performance optimization: GPU acceleration */
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+/* State entered - transition complete */
+.state-entered {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+  will-change: auto;
+  /* Remove GPU hints after animation */
+  backface-visibility: visible;
+  perspective: none;
+}
+
+/* Error state animations */
+.error-shake {
+  animation: errorShake 500ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.error-pulse {
+  animation: errorPulse 2s ease-in-out infinite;
+}
+
+/* Enhanced skeleton shimmer */
+.skeleton-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--muted, rgba(255, 255, 255, 0.1)) 0%,
+    var(--muted-foreground, rgba(255, 255, 255, 0.2)) 20%,
+    var(--muted, rgba(255, 255, 255, 0.1)) 40%,
+    var(--muted, rgba(255, 255, 255, 0.1)) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmerWave 1.5s ease-in-out infinite;
+}
+
+/* Skeleton pulse effect */
+.skeleton-pulse {
+  animation: skeletonPulse 2s ease-in-out infinite;
+}
+
+/* Stagger Animation Delays - For sequential animations */
+.animate-delay-1 {
+  animation-delay: calc(var(--stagger-delay-base) * 1);
+}
+
+.animate-delay-2 {
+  animation-delay: calc(var(--stagger-delay-base) * 2);
+}
+
+.animate-delay-3 {
+  animation-delay: calc(var(--stagger-delay-base) * 3);
+}
+
+.animate-delay-4 {
+  animation-delay: calc(var(--stagger-delay-base) * 4);
+}
+
+.animate-delay-5 {
+  animation-delay: calc(var(--stagger-delay-base) * 5);
+}
+
+/* ===================================================================
+   PERFORMANCE OPTIMIZATION
+   Hardware acceleration hints for smooth animations
+   =================================================================== */
+
+/* Apply to animated elements for better performance */
+.will-animate {
+  will-change: transform, opacity;
+}
+
+.will-animate-transform {
+  will-change: transform;
+}
+
+.will-animate-opacity {
+  will-change: opacity;
+}
+
+/* Remove will-change after animation to free resources */
+.animation-complete {
+  will-change: auto;
+}
+
+/* Hardware acceleration hint */
+.gpu-accelerated {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+/* ===================================================================
+   REDUCED MOTION SUPPORT
+   Respect user preferences for reduced motion
+   =================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  /* Disable all custom animations */
+  .animate-fade-in,
+  .animate-fade-in-up,
+  .animate-slide-up,
+  .animate-slide-down,
+  .animate-slide-in-left,
+  .animate-slide-in-right,
+  .animate-scale,
+  .animate-scale-in,
+  .animate-pulse,
+  .animate-spin,
+  .animate-spin-slow,
+  .animate-shake,
+  .animate-bounce,
+  .section-streaming,
+  .section-streaming-glow,
+  .field-streaming,
+  .item-streaming,
+  .state-transition-enter,
+  .state-transition-exit,
+  .error-shake,
+  .error-pulse,
+  .skeleton-shimmer,
+  .skeleton-pulse {
+    animation: none !important;
+    transition: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+  
+  /* Remove will-change hints */
+  .will-animate,
+  .will-animate-transform,
+  .will-animate-opacity,
+  .section-streaming {
+    will-change: auto !important;
+  }
+}