My-website/src/styles/animations.css

/* Basic Animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

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

@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 2px var(--accent-neon)); }
  50% { filter: drop-shadow(0 0 8px var(--accent-neon)); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

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

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

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

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

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

/* System-specific animations */
@keyframes switchGlitch {
  0% { transform: translate(0) skew(0); filter: hue-rotate(0deg); }
  20% { transform: translate(-2px, 2px) skew(2deg, -2deg); filter: hue-rotate(90deg); }
  40% { transform: translate(2px, 0) skew(-2deg, 0); filter: hue-rotate(180deg); }
  60% { transform: translate(0, -2px) skew(0, 2deg); filter: hue-rotate(270deg); }
  80% { transform: translate(-2px, 0) skew(2deg, 0); filter: hue-rotate(360deg); }
  100% { transform: translate(0) skew(0); filter: hue-rotate(0deg); }
}

@keyframes statusBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.7; }
}

/* Add animation classes */
.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-bounce {
  animation: bounce 1s ease-in-out infinite;
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
}

.animate-fade-out {
  animation: fadeOut 0.5s ease-in-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out forwards;
}

.animate-slide-in-left {
  animation: slideInLeft 0.3s ease-out forwards;
}

.animate-wiggle {
  animation: wiggle 1s ease-in-out;
}

.animate-switch-glitch {
  animation: switchGlitch 0.5s ease-in-out;
}

.animate-status-blink {
  animation: statusBlink 1s infinite;
}

/* Delay Utilities */
.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.delay-500 {
  animation-delay: 500ms;
}

.delay-700 {
  animation-delay: 700ms;
}

.delay-1000 {
  animation-delay: 1000ms;
}

/* Duration Utilities */
.duration-300 {
  animation-duration: 300ms;
}

.duration-500 {
  animation-duration: 500ms;
}

.duration-700 {
  animation-duration: 700ms;
}

.duration-1000 {
  animation-duration: 1000ms;
}

.duration-2000 {
  animation-duration: 2000ms;
}

.duration-3000 {
  animation-duration: 3000ms;
}

/* Animation behavior */
.animation-once {
  animation-iteration-count: 1;
}

.animation-twice {
  animation-iteration-count: 2;
}

.animation-infinite {
  animation-iteration-count: infinite;
}

/* Pause animations when prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}