@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 12px var(--clr-primary-glow); }
  50%       { box-shadow: 0 0 28px var(--clr-primary-glow), 0 0 48px rgba(108,99,255,0.2); }
}


.animate-fade-in  { animation: fadeIn  0.25s ease forwards; }
.animate-fade-up  { animation: fadeUp  0.35s ease forwards; }
.animate-fade-down{ animation: fadeDown 0.3s ease forwards; }
.animate-scale-in { animation: scaleIn 0.25s ease forwards; }
.animate-pulse    { animation: pulse   2s ease infinite; }
.animate-float    { animation: float   3s ease-in-out infinite; }
.animate-glow     { animation: glow    2s ease-in-out infinite; }


.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }


.skeleton {
  background: linear-gradient(
    90deg,
    var(--clr-surface-2) 25%,
    var(--clr-surface-3) 50%,
    var(--clr-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-50 { width: 50%; }
.skeleton-circle { border-radius: 50%; }


.page-enter {
  animation: fadeUp 0.3s ease forwards;
}


.gradient-text-anim {
  background: linear-gradient(270deg, var(--clr-primary), var(--clr-accent), var(--clr-primary));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s linear infinite;
}


.counter-animate {
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.hover-lift {
  transition: transform var(--ease-base), box-shadow var(--ease-base);
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}


.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.status-dot.active  { background: var(--clr-success); box-shadow: 0 0 6px var(--clr-success); animation: pulse 2s infinite; }
.status-dot.revoked { background: var(--clr-error); }
.status-dot.expired { background: var(--clr-warning); }
.status-dot.suspended{ background: var(--clr-text-3); }


.ripple {
  position: relative;
  overflow: hidden;
}
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  background-color: rgba(255, 255, 255, 0.15);
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}


.chart-container {
  position: relative;
  height: 240px;
  width: 100%;
}
.chart-container canvas { border-radius: var(--radius-md); }