animations.css

```css
/* ========================================
   GYM FITNESS - COMPLETE ANIMATIONS LIBRARY
   Dark Theme with Premium Accents
   ======================================== */

/* CSS Custom Properties for Dark Theme */
:root {
  /* Dark Theme Colors */
  --primary-dark: #0a0a0a;
  --secondary-dark: #1a1a1a;
  --accent-dark: #2a2a2a;
  
  /* Premium Accents */
  --gold: #ffd700;
  --electric-blue: #00bfff;
  --neon-green: #39ff14;
  --platinum: #e5e4e2;
  --crimson: #dc143c;
  
  /* Animation Timings */
  --timing-fast: 0.2s;
  --timing-normal: 0.5s;
  --timing-slow: 1s;
  --timing-extra-slow: 2s;
  
  /* Easing Functions */
  --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ========================================
   FADE ANIMATIONS
   ======================================== */

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

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

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

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ========================================
   SCALE & BOUNCE ANIMATIONS
   ======================================== */

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

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

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes heartbeat {
  0%, 50%, 100% {
    transform: scale(1);
  }
  5%, 15% {
    transform: scale(1.2);
  }
  25%, 35% {
    transform: scale(1.1);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateY(0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translateY(-30px);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translateY(-15px);
  }
  90% {
    transform: translateY(-4px);
  }
}

/* ========================================
   ROTATION & MOVEMENT ANIMATIONS
   ======================================== */

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

@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25px) rotate(-5deg);
  }
  30% {
    transform: translateX(20px) rotate(3deg);
  }
  45% {
    transform: translateX(-15px) rotate(-3deg);
  }
  60% {
    transform: translateX(10px) rotate(2deg);
  }
  75% {
    transform: translateX(-5px) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    transform: scale3d(1.05, 0.95, 1);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

/* ========================================
   SLIDE ANIMATIONS
   ======================================== */

@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 slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ========================================
   PREMIUM EFFECT ANIMATIONS
   ======================================== */

@keyframes glow {
  0%, 100% {
    box-shadow: 
      0 0 5px var(--gold),
      0 0 10px var(--gold),
      0 0 15px var(--gold),
      0 0 20px var(--gold);
  }
  50% {
    box-shadow: 
      0 0 10px var(--gold),
      0 0 20px var(--gold),
      0 0 30px var(--gold),
      0 0 40px var(--gold);
  }
}

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

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

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

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes cursorBlink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

@keyframes neonFlicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px var(--electric-blue),
      0 0 80px var(--electric-blue),
      0 0 90px var(--electric-blue),
      0 0 100px var(--electric-blue),
      0 0 150px var(--electric-blue);
  }
  20%, 24%, 55% {
    text-shadow: none;
  }
}

@keyframes morphBlob {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

@keyframes particleFloat {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100vh) scale(1);
  }
}

@keyframes progressFill {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

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

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Basic Animation Classes */
.animate-fadeIn { animation: fadeIn var(--timing-normal) var(--ease-smooth); }
.animate-fadeInUp { animation: fadeInUp var(--timing-normal) var(--ease-smooth); }
.animate-fadeInDown { animation: fadeInDown var(--timing-normal) var(--ease-smooth); }
.animate-fadeInLeft { animation: fadeInLeft var(--timing-normal) var(--ease-smooth); }
.animate-fadeInRight { animation: fadeInRight var(--timing-normal) var(--ease-smooth); }

.animate-scaleIn { animation: scaleIn var(--timing-normal) var(--ease-bounce); }
.animate-scaleOut { animation: scaleOut var(--timing-normal) var(--ease-smooth); }
.animate-pulse { animation: pulse var(--timing-extra-slow) ease-in-out infinite; }
.animate-heartbeat { animation: heartbeat var(--timing-slow) ease-in-out infinite; }
.animate-bounce { animation: bounce var(--timing-slow) infinite; }

.animate-spin { animation: spin var(--timing-slow) linear infinite; }
.animate-wobble { animation: wobble var(--timing-slow) ease-in-out; }
.animate-shake { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.animate-rubberBand { animation: rubberBand var(--timing-slow) var(--ease-elastic); }

.animate-slideInLeft { animation: slideInLeft var(--timing-normal) var(--ease-smooth); }
.animate-slideInRight { animation: slideInRight var(--timing-normal) var(--ease-smooth); }
.animate-slideInUp { animation: slideInUp var(--timing-normal) var(--ease-smooth); }

.animate-glow { animation: glow var(--timing-extra-slow) ease-in-out infinite alternate; }
.animate-shimmer { animation: shimmer 1.6s linear infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-neonFlicker { animation: neonFlicker 1.5s infinite alternate; }
.animate-morphBlob { animation: morphBlob 3s ease-in-out infinite; }
.animate-particleFloat { animation: particleFloat 8s linear infinite; }
.animate-progressFill { animation: progressFill 2s var(--ease-smooth) forwards; }

/* ========================================
   DELAY UTILITIES
   ======================================== */

.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-900 { animation-delay: 0.9s; }
.delay-1000 { animation-delay: 1s; }

/* ========================================
   DURATION UTILITIES
   ======================================== */

.duration-fast { animation-duration: var(--timing-fast); }
.duration-normal { animation-duration: var(--timing-normal); }
.duration-slow { animation-duration: var(--timing-slow); }
.duration-extra-slow { animation-duration: var(--timing-extra-slow); }

/* ========================================
   HOVER ANIMATION CLASSES
   ======================================== */

.hover-lift {
  transition: transform var(--timing-fast) var(--ease-smooth);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.hover-scale {
  transition: transform var(--timing-fast) var(--ease-smooth);
}

.hover-scale:hover {
  transform: scale(1.05);
}

.hover-glow {
  transition: box-shadow var(--timing-fast) ease-in-out;
}

.hover-glow:hover {
  box-shadow: 
    0 0 10px var(--gold),
    0 0 20px var(--gold),
    0 0 30px var(--gold);
}

.hover-pulse:hover {
  animation: pulse 0.5s ease-in-out;
}

.hover-shake:hover {
  animation: shake 0.5s ease-in-out;
}

.hover-wobble:hover {
  animation: wobble 0.8s ease-in-out;
}

.hover-neon {
  transition: all var(--timing-fast) ease-in-out;
  color: var(--platinum);
}

.hover-neon:hover {
  color: var(--electric-blue);
  text-shadow:
    0 0 5px var(--electric-blue),
    0 0 10px var(--electric-blue),
    0 0 15px var(--electric-blue),
    0 0 20px var(--electric-blue);
}

/* ========