/* 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;
}