/**
 * Matrix Design System - Animation Tokens
 * Cyberpunk-inspired animations and transitions
 */

@layer base {
  :root {
    /* Timing Functions */
    --matrix-ease-linear: linear;
    --matrix-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --matrix-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --matrix-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --matrix-ease-back-in: cubic-bezier(0.36, 0, 0.66, -0.56);
    --matrix-ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1);
    --matrix-ease-back-in-out: cubic-bezier(0.68, -0.6, 0.32, 1.6);
    
    /* Duration */
    --matrix-duration-75: 75ms;
    --matrix-duration-100: 100ms;
    --matrix-duration-150: 150ms;
    --matrix-duration-200: 200ms;
    --matrix-duration-300: 300ms;
    --matrix-duration-500: 500ms;
    --matrix-duration-700: 700ms;
    --matrix-duration-1000: 1000ms;
    
    /* Delays */
    --matrix-delay-75: 75ms;
    --matrix-delay-100: 100ms;
    --matrix-delay-150: 150ms;
    --matrix-delay-200: 200ms;
    --matrix-delay-300: 300ms;
    --matrix-delay-500: 500ms;
    --matrix-delay-700: 700ms;
    --matrix-delay-1000: 1000ms;
  }
}

/* Matrix-specific animations */
@keyframes matrix-glow {
  0% { 
    box-shadow: 
      0 0 5px var(--matrix-green),
      0 0 10px var(--matrix-green),
      0 0 15px var(--matrix-green);
    text-shadow: 0 0 5px var(--matrix-green);
  }
  100% { 
    box-shadow: 
      0 0 10px var(--matrix-green),
      0 0 20px var(--matrix-green),
      0 0 30px var(--matrix-green);
    text-shadow: 0 0 10px var(--matrix-green);
  }
}

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

@keyframes matrix-flicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  75% {
    opacity: 0.9;
  }
}

@keyframes matrix-scan-line {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

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

@keyframes matrix-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes matrix-fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes matrix-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes matrix-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes matrix-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes matrix-terminal-cursor {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

@keyframes matrix-loading-dots {
  0%, 20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes matrix-progress-bar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Animation utility classes */
@layer utilities {
  .animate-matrix-glow {
    animation: matrix-glow 2s ease-in-out infinite alternate;
  }
  
  .animate-matrix-pulse {
    animation: matrix-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  .animate-matrix-flicker {
    animation: matrix-flicker 3s ease-in-out infinite;
  }
  
  .animate-matrix-fade-in {
    animation: matrix-fade-in 0.5s ease-out;
  }
  
  .animate-matrix-fade-in-up {
    animation: matrix-fade-in-up 0.6s ease-out;
  }
  
  .animate-matrix-fade-in-down {
    animation: matrix-fade-in-down 0.6s ease-out;
  }
  
  .animate-matrix-slide-in-left {
    animation: matrix-slide-in-left 0.5s ease-out;
  }
  
  .animate-matrix-slide-in-right {
    animation: matrix-slide-in-right 0.5s ease-out;
  }
  
  .animate-matrix-zoom-in {
    animation: matrix-zoom-in 0.5s ease-out;
  }
  
  .animate-matrix-terminal-cursor {
    animation: matrix-terminal-cursor 1s infinite;
  }
  
  /* Transition utilities */
  .transition-matrix-fast {
    transition-duration: var(--matrix-duration-150);
    transition-timing-function: var(--matrix-ease-out);
  }
  
  .transition-matrix-normal {
    transition-duration: var(--matrix-duration-300);
    transition-timing-function: var(--matrix-ease-in-out);
  }
  
  .transition-matrix-slow {
    transition-duration: var(--matrix-duration-500);
    transition-timing-function: var(--matrix-ease-in-out);
  }
  
  /* Hover effects */
  .hover-matrix-glow {
    transition: all var(--matrix-duration-300) var(--matrix-ease-out);
  }
  
  .hover-matrix-glow:hover {
    box-shadow: var(--matrix-shadow-glow);
    text-shadow: var(--matrix-text-glow);
  }
  
  .hover-matrix-lift {
    transition: transform var(--matrix-duration-200) var(--matrix-ease-out);
  }
  
  .hover-matrix-lift:hover {
    transform: translateY(-2px);
  }
  
  /* Disable hover lift for no-hover cards */
  .card-matrix-no-hover.hover-matrix-lift:hover,
  .card-matrix-no-hover:hover {
    transform: none !important;
  }
}