/* ============================================
   ZERO DEFENCE PRO - ANIMATIONS LIBRARY
   Version: 2.0.0 | GPU Accelerated | Smooth 60fps
   ============================================ */

/* --------------------------------------------
   CSS CUSTOM PROPERTIES (Variables)
-------------------------------------------- */
:root {
  /* Durations */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  --transition-slower: 800ms;
  
  /* Easing Curves */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 15px rgba(0, 255, 255, 0.3);
  --shadow-glow-hover: 0 0 25px rgba(0, 255, 255, 0.6);
}

/* --------------------------------------------
   1. FADE ANIMATIONS
------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@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);
  }
}

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

/* Fade Animation Classes */
.animate-fade-in { animation: fadeIn var(--transition-normal) ease forwards; }
.animate-fade-out { animation: fadeOut var(--transition-normal) ease forwards; }
.animate-fade-up { animation: fadeInUp 0.6s var(--ease-out-expo) forwards; }
.animate-fade-down { animation: fadeInDown 0.6s var(--ease-out-expo) forwards; }
.animate-fade-left { animation: fadeInLeft 0.6s var(--ease-out-expo) forwards; }
.animate-fade-right { animation: fadeInRight 0.6s var(--ease-out-expo) forwards; }
.animate-fade-scale { animation: fadeInScale 0.5s var(--ease-out-back) forwards; }

/* --------------------------------------------
   2. SLIDE ANIMATIONS
------------------------------------------- */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

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

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@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;
  }
}

/* Slide Animation Classes */
.animate-slide-in { animation: slideIn 0.4s var(--ease-out-expo) forwards; }
.animate-slide-out { animation: slideOut 0.4s var(--ease-out-expo) forwards; }
.animate-slide-up { animation: slideInUp 0.5s var(--ease-out-expo) forwards; }
.animate-slide-down { animation: slideInDown 0.5s var(--ease-out-expo) forwards; }
.animate-slide-left { animation: slideInLeft 0.5s var(--ease-out-expo) forwards; }
.animate-slide-right { animation: slideInRight 0.5s var(--ease-out-expo) forwards; }

/* --------------------------------------------
   3. SCALE & BOUNCE ANIMATIONS
------------------------------------------- */
@keyframes scaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

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

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

@keyframes scaleBounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
  75% { transform: scale(0.95); }
}

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

@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); }
}

/* Scale Animation Classes */
.animate-scale-in { animation: scaleIn 0.3s var(--ease-out-back) forwards; }
.animate-scale-out { animation: scaleOut 0.3s var(--ease-out-back) forwards; }
.animate-scale-pulse { animation: scalePulse 2s ease-in-out infinite; }
.animate-scale-bounce { animation: scaleBounce 0.6s var(--ease-out-back); }
.animate-bounce { animation: bounce 1s ease-in-out infinite; }
.animate-bounce-in { animation: bounceIn 0.8s var(--ease-out-back); }

/* --------------------------------------------
   4. ROTATE & FLIP ANIMATIONS
------------------------------------------- */
@keyframes rotateIn {
  from {
    transform: rotate(-180deg);
    opacity: 0;
  }
  to {
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateOut {
  from {
    transform: rotate(0);
    opacity: 1;
  }
  to {
    transform: rotate(180deg);
    opacity: 0;
  }
}

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

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

@keyframes flipHorizontal {
  from {
    transform: perspective(400px) rotateY(0);
  }
  to {
    transform: perspective(400px) rotateY(180deg);
  }
}

@keyframes flipVertical {
  from {
    transform: perspective(400px) rotateX(0);
  }
  to {
    transform: perspective(400px) rotateX(180deg);
  }
}

/* Rotate Animation Classes */
.animate-rotate-in { animation: rotateIn 0.5s var(--ease-out-expo) forwards; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-spin-slow { animation: spin 3s linear infinite; }
.animate-spin-reverse { animation: spinReverse 1.5s linear infinite; }
.animate-flip-h { animation: flipHorizontal 0.6s var(--ease-out-expo); }
.animate-flip-v { animation: flipVertical 0.6s var(--ease-out-expo); }

/* --------------------------------------------
   5. GLITCH & DISTORTION ANIMATIONS
------------------------------------------- */
@keyframes glitchShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2px, -1px); }
  50% { transform: translate(-2px, 1px); }
  75% { transform: translate(1px, 1px); }
  100% { transform: translate(-1px, -1px); }
}

@keyframes glitchText {
  0%, 100% {
    clip-path: inset(0 0 0 0);
    transform: skew(0deg);
  }
  20% {
    clip-path: inset(20% 0 30% 0);
    transform: skew(2deg);
  }
  40% {
    clip-path: inset(50% 0 10% 0);
    transform: skew(-2deg);
  }
  60% {
    clip-path: inset(10% 0 60% 0);
    transform: skew(1deg);
  }
  80% {
    clip-path: inset(40% 0 20% 0);
    transform: skew(-1deg);
  }
}

@keyframes glitchSplit {
  0% {
    transform: translate(0);
    opacity: 1;
  }
  20% {
    transform: translate(-5px, 2px);
    opacity: 0.8;
  }
  40% {
    transform: translate(5px, -2px);
    opacity: 0.9;
  }
  60% {
    transform: translate(-3px, 1px);
    opacity: 0.85;
  }
  80% {
    transform: translate(3px, -1px);
    opacity: 0.95;
  }
  100% {
    transform: translate(0);
    opacity: 1;
  }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  10%, 30%, 50%, 70%, 90% { opacity: 0.8; }
  20%, 40%, 60%, 80% { opacity: 0.95; }
}

/* Glitch Animation Classes */
.animate-glitch { animation: glitchShift 0.2s infinite alternate; }
.animate-glitch-text { animation: glitchText 3s infinite; }
.animate-glitch-split { animation: glitchSplit 0.3s infinite; }
.animate-flicker { animation: flicker 3s infinite; }

/* --------------------------------------------
   6. PULSE, GLOW & RIPPLE ANIMATIONS
------------------------------------------- */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 255, 0.3); }
  50% { box-shadow: 0 0 25px rgba(0, 255, 255, 0.8), 0 0 10px rgba(0, 255, 255, 0.5); }
}

@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 5px rgba(0, 255, 255, 0.3); }
  50% { text-shadow: 0 0 20px rgba(0, 255, 255, 0.8); }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(0, 255, 255, 0.3); }
  50% { border-color: rgba(0, 255, 255, 0.8); }
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(0, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 255, 0);
  }
}

@keyframes softPulse {
  0%, 100% {
    transform: scale(1);
    background-color: rgba(0, 255, 255, 0.1);
  }
  50% {
    transform: scale(1.02);
    background-color: rgba(0, 255, 255, 0.2);
  }
}

/* Pulse Animation Classes */
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }
.animate-text-glow { animation: textGlow 2s ease-in-out infinite; }
.animate-border-glow { animation: borderGlow 2s ease-in-out infinite; }
.animate-ripple { animation: ripple 1.5s ease-out infinite; }
.animate-soft-pulse { animation: softPulse 2s ease-in-out infinite; }

/* --------------------------------------------
   7. LOADING & PROGRESS ANIMATIONS
------------------------------------------- */
@keyframes loadingDots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

@keyframes loadingWave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}

@keyframes loadingPulse {
  0%, 100% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
}

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

@keyframes shimmerMetal {
  0% {
    background-position: -200% 0;
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
  100% {
    background-position: 200% 0;
    filter: brightness(1);
  }
}

/* Loading Animation Classes */
.animate-loading-wave { animation: loadingWave 1s ease-in-out infinite; }
.animate-loading-pulse { animation: loadingPulse 1.5s ease-in-out infinite; }
.animate-shimmer { 
  background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.15), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}
.animate-shimmer-metal {
  background: linear-gradient(90deg, #1a1a2e, #2a2a4e, #1a1a2e);
  background-size: 200% 100%;
  animation: shimmerMetal 2.5s infinite;
}

/* --------------------------------------------
   8. HOVER & INTERACTION ANIMATIONS
------------------------------------------- */
.hover-lift {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.hover-glow {
  transition: box-shadow var(--transition-normal);
}
.hover-glow:hover {
  box-shadow: var(--shadow-glow-hover);
}

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

.hover-scale-grow {
  transition: transform var(--transition-normal);
}
.hover-scale-grow:hover {
  transform: scale(1.1);
}

.hover-rotate {
  transition: transform var(--transition-normal);
}
.hover-rotate:hover {
  transform: rotate(5deg);
}

.hover-shake {
  transition: transform var(--transition-fast);
}
.hover-shake:hover {
  animation: glitchShift 0.2s infinite;
}

.hover-bright {
  transition: filter var(--transition-normal), brightness var(--transition-normal);
}
.hover-bright:hover {
  filter: brightness(1.2);
}

/* --------------------------------------------
   9. SCROLL REVEAL ANIMATIONS
------------------------------------------- */
@keyframes scrollReveal {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

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

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

.scroll-reveal {
  opacity: 0;
  animation: scrollReveal 0.6s var(--ease-out-expo) forwards;
}

.scroll-reveal-left {
  opacity: 0;
  animation: scrollRevealLeft 0.6s var(--ease-out-expo) forwards;
}

.scroll-reveal-right {
  opacity: 0;
  animation: scrollRevealRight 0.6s var(--ease-out-expo) forwards;
}

.scroll-reveal-scale {
  opacity: 0;
  animation: scrollRevealScale 0.5s var(--ease-out-back) forwards;
}

/* Stagger Children */
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.5s var(--ease-out-expo) forwards;
}

.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-children > *:nth-child(8) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(9) { animation-delay: 0.45s; }
.stagger-children > *:nth-child(10) { animation-delay: 0.5s; }

/* --------------------------------------------
   10. PARTICLE & FLOATING ANIMATIONS
------------------------------------------- */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

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

@keyframes drift {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(10px, -5px) rotate(2deg);
  }
  66% {
    transform: translate(-5px, 8px) rotate(-2deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}

/* Float Animation Classes */
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-float-slow { animation: floatSlow 4s ease-in-out infinite; }
.animate-drift { animation: drift 6s ease-in-out infinite; }
.animate-particle { animation: particleFloat 8s linear infinite; }

/* --------------------------------------------
   11. TERMINAL & TYPEWRITER ANIMATIONS
------------------------------------------- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

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

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

@keyframes cursorBlink {
  0%, 100% { border-right-color: #00ffff; }
  50% { border-right-color: transparent; }
}

/* Terminal Animation Classes */
.animate-blink { animation: blink 1s step-end infinite; }
.animate-typing {
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typing 3s steps(40, end) forwards;
}
.animate-cursor {
  border-right: 2px solid #00ffff;
  animation: cursorBlink 0.75s step-end infinite;
}

/* --------------------------------------------
   12. UTILITY ANIMATION CLASSES
------------------------------------------- */
/* Animation Durations */
.duration-50 { animation-duration: 50ms; }
.duration-100 { animation-duration: 100ms; }
.duration-150 { animation-duration: 150ms; }
.duration-200 { animation-duration: 200ms; }
.duration-250 { animation-duration: 250ms; }
.duration-300 { animation-duration: 300ms; }
.duration-350 { animation-duration: 350ms; }
.duration-400 { animation-duration: 400ms; }
.duration-450 { animation-duration: 450ms; }
.duration-500 { animation-duration: 500ms; }
.duration-600 { animation-duration: 600ms; }
.duration-700 { animation-duration: 700ms; }
.duration-800 { animation-duration: 800ms; }
.duration-900 { animation-duration: 900ms; }
.duration-1000 { animation-duration: 1000ms; }
.duration-1500 { animation-duration: 1500ms; }
.duration-2000 { animation-duration: 2000ms; }

/* Animation Delays */
.delay-0 { animation-delay: 0ms; }
.delay-50 { animation-delay: 50ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-250 { animation-delay: 250ms; }
.delay-300 { animation-delay: 300ms; }
.delay-350 { animation-delay: 350ms; }
.delay-400 { animation-delay: 400ms; }
.delay-450 { animation-delay: 450ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }
.delay-700 { animation-delay: 700ms; }
.delay-800 { animation-delay: 800ms; }
.delay-900 { animation-delay: 900ms; }
.delay-1000 { animation-delay: 1000ms; }

/* Animation Iterations */
.iteration-1 { animation-iteration-count: 1; }
.iteration-2 { animation-iteration-count: 2; }
.iteration-3 { animation-iteration-count: 3; }
.iteration-infinite { animation-iteration-count: infinite; }

/* Animation Fill Modes */
.fill-none { animation-fill-mode: none; }
.fill-forwards { animation-fill-mode: forwards; }
.fill-backwards { animation-fill-mode: backwards; }
.fill-both { animation-fill-mode: both; }

/* Animation Direction */
.direction-normal { animation-direction: normal; }
.direction-reverse { animation-direction: reverse; }
.direction-alternate { animation-direction: alternate; }
.direction-alternate-reverse { animation-direction: alternate-reverse; }

/* Animation Play State */
.running { animation-play-state: running; }
.paused { animation-play-state: paused; }

/* Easing Utilities */
.ease-linear { animation-timing-function: linear; }
.ease-in { animation-timing-function: ease-in; }
.ease-out { animation-timing-function: ease-out; }
.ease-in-out { animation-timing-function: ease-in-out; }
.ease-expo { animation-timing-function: var(--ease-out-expo); }
.ease-back { animation-timing-function: var(--ease-out-back); }

/* Performance Optimizations */
.gpu-accelerated {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* --------------------------------------------
   13. SPECIAL EFFECTS
------------------------------------------- */
@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

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

@keyframes matrixRain {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* Special Effect Classes */
.animate-scanline {
  position: relative;
  overflow: hidden;
}
.animate-scanline::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, transparent, #0ff, transparent);
  animation: scanline 3s linear infinite;
}

.animate-radar {
  animation: radar 3s linear infinite;
  transform-origin: center;
}

/* --------------------------------------------
   REDUCED MOTION SUPPORT
------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-glitch,
  .animate-glitch-text,
  .animate-glitch-split,
  .animate-flicker {
    animation: none !important;
  }
  
  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --------------------------------------------
   DEMO & TESTING CLASSES (Optional)
------------------------------------------- */
.demo-box {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #0ff, #3b82f6);
  border-radius: 12px;
  margin: 20px;
  cursor: pointer;
}

.demo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 40px;
}