/* Aventa Chain Faucet - Animations
   Following PRD specifications from documentation/aventa-chain/prd/06_UNIFIED_EXPERIENCE.md
   Created: May 25, 2025
*/

/* Timing Functions as per PRD */
:root {
  --aventa-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --aventa-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --aventa-ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
}

/* Standard Animations from PRD */
@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

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

@keyframes glow {
  0%, 100% { 
    box-shadow: var(--aventa-glow-primary); 
  }
  50% { 
    box-shadow: 0 0 30px rgba(26, 84, 144, 0.8); 
  }
}

@keyframes slideIn {
  from { 
    transform: translateX(-100%); 
  }
  to { 
    transform: translateX(0); 
  }
}

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

/* AI Loading Animation */
@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* Particle Animation */
@keyframes float-up {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0);
  }
  10% {
    opacity: 1;
    transform: translateY(85vh) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-100vh) scale(0.5);
  }
}

/* Button Hover Glow */
@keyframes button-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(5, 233, 224, 0.5), 
                0 0 10px rgba(5, 233, 224, 0.3), 
                0 0 15px rgba(5, 233, 224, 0.1);
  }
  50% {
    box-shadow: 0 0 10px rgba(5, 233, 224, 0.8), 
                0 0 20px rgba(5, 233, 224, 0.6), 
                0 0 30px rgba(5, 233, 224, 0.4);
  }
}

/* Text Shimmer Effect */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Ripple Effect */
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* Success Animation */
@keyframes success-check {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

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

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

/* Gradient Animation */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Card Hover Effect */
@keyframes card-lift {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: var(--aventa-shadow-md);
  }
  100% {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--aventa-shadow-lg);
  }
}

/* AI Thinking Animation */
.ai-loading {
  display: inline-flex;
  gap: 4px;
}

.ai-loading span {
  width: 8px;
  height: 8px;
  background: var(--aventa-accent-teal);
  border-radius: 50%;
  animation: bounce 1.4s ease-in-out infinite both;
}

.ai-loading span:nth-child(1) { animation-delay: -0.32s; }
.ai-loading span:nth-child(2) { animation-delay: -0.16s; }
.ai-loading span:nth-child(3) { animation-delay: 0; }

/* Apply animations to elements */
.fade-in {
  animation: fadeIn 0.6s var(--aventa-ease-smooth) forwards;
}

.slide-up {
  animation: slideUp 0.8s var(--aventa-ease-smooth) forwards;
}

.pulse {
  animation: pulse 2s var(--aventa-ease-in-out) infinite;
}

.glow {
  animation: glow 2s var(--aventa-ease-in-out) infinite;
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--aventa-text-primary) 25%,
    var(--aventa-accent-teal) 50%,
    var(--aventa-text-primary) 75%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* Stagger animation for lists */
.stagger-in > * {
  opacity: 0;
  animation: slideUp 0.6s var(--aventa-ease-smooth) forwards;
}

.stagger-in > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-in > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-in > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-in > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-in > *:nth-child(5) { animation-delay: 0.5s; }

/* Hover Transitions */
.transition-all {
  transition: all 0.3s var(--aventa-ease-smooth);
}

.transition-transform {
  transition: transform 0.3s var(--aventa-ease-smooth);
}

.transition-colors {
  transition: color 0.3s var(--aventa-ease-smooth), 
              background-color 0.3s var(--aventa-ease-smooth),
              border-color 0.3s var(--aventa-ease-smooth);
}

/* Scale on hover */
.hover-scale:hover {
  transform: scale(1.05);
}

.hover-lift:hover {
  transform: translateY(-2px);
}

/* Button ripple effect */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  animation: ripple 0.6s ease-out;
}