/* Premium Animations with Smooth Easing */ /* Pulsating Heartbeat for Clusters */ @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.15); opacity: 1; } } /* Glowing Effect for Data Points */ @keyframes glow { 0%, 100% { box-shadow: 0 0 8px currentColor, 0 0 16px currentColor; opacity: 0.9; } 50% { box-shadow: 0 0 16px currentColor, 0 0 32px currentColor, 0 0 48px currentColor; opacity: 1; } } /* Smooth Fade In */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Smooth Fade Out */ @keyframes fadeOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(0.95); } } /* Slide In from Right */ @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } /* Slide Out to Right */ @keyframes slideOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } } /* Ripple Effect */ @keyframes ripple { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } } /* Shimmer Effect */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } /* Bounce In */ @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); } } /* Utility Classes */ .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .animate-glow { animation: glow 2.5s ease-in-out infinite; } .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 { animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .animate-slide-out { animation: slideOutRight 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .animate-bounce-in { animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; } /* Transition Utilities */ .transition-smooth { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .transition-fast { transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); } .transition-slow { transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* Hover Effects */ .hover-lift { transition: transform 0.2s ease; } .hover-lift:hover { transform: translateY(-4px); } .hover-glow { transition: box-shadow 0.3s ease; } .hover-glow:hover { box-shadow: 0 0 20px currentColor; } /* Loading Spinner */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spinner { animation: spin 1s linear infinite; }