/* AI-Themed Animations CSS */

/* Keyframes for AI animations */
@keyframes ai-glow {
  0%, 100% { 
    text-shadow: 0 0 10px rgba(79, 172, 254, 0.3);
  }
  50% { 
    text-shadow: 0 0 20px rgba(79, 172, 254, 0.6), 0 0 30px rgba(79, 172, 254, 0.4);
  }
}

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

@keyframes ai-slide-in-left {
  0% { 
    transform: translateX(-100px);
    opacity: 0;
  }
  100% { 
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes ai-slide-in-right {
  0% { 
    transform: translateX(100px);
    opacity: 0;
  }
  100% { 
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes ai-fade-in {
  0% { 
    opacity: 0;
    transform: translateY(20px);
  }
  100% { 
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ai-slide-up {
  0% { 
    transform: translateY(50px);
    opacity: 0;
  }
  100% { 
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes ai-typewriter {
  0% { 
    width: 0;
    opacity: 0;
  }
  1% { 
    opacity: 1;
  }
  100% { 
    width: 100%;
    opacity: 1;
  }
}

@keyframes ai-scan-line {
  0% { 
    transform: translateY(-100%);
    opacity: 0;
  }
  50% { 
    opacity: 1;
  }
  100% { 
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes ai-particle-float {
  0%, 100% { 
    transform: translateY(0px) rotate(0deg);
  }
  33% { 
    transform: translateY(-20px) rotate(120deg);
  }
  66% { 
    transform: translateY(10px) rotate(240deg);
  }
}

@keyframes ai-circuit-pulse {
  0%, 100% { 
    opacity: 0.3;
  }
  50% { 
    opacity: 0.8;
  }
}

/* AI Animation Classes */
.ai-title-animate {
  animation: ai-fade-in 1.5s ease-out, ai-glow 3s ease-in-out infinite;
}

.ai-text-animate {
  animation: ai-fade-in 2s ease-out 0.5s both;
}

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

.ai-glow-subtle {
  animation: ai-glow 4s ease-in-out infinite;
}

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

.ai-fade-in {
  animation: ai-fade-in 1s ease-out;
}

.ai-fade-in-delay {
  animation: ai-fade-in 1s ease-out 0.3s both;
}

.ai-fade-in-delay-2 {
  animation: ai-fade-in 1s ease-out 0.6s both;
}

.ai-slide-in-left {
  animation: ai-slide-in-left 1s ease-out;
}

.ai-slide-in-right {
  animation: ai-slide-in-right 1s ease-out;
}

.ai-slide-up {
  animation: ai-slide-up 1s ease-out 0.8s both;
}

.ai-typewriter {
  overflow: hidden;
  border-right: 2px solid rgba(79, 172, 254, 0.7);
  white-space: nowrap;
  animation: ai-typewriter 3s steps(50, end) 1s both;
}

.ai-hero-title {
  animation: ai-slide-up 1.5s ease-out, ai-glow 3s ease-in-out infinite 2s;
}

/* AI Visual Elements */
.ai-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.ai-particles::before,
.ai-particles::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(79, 172, 254, 0.6);
  border-radius: 50%;
  animation: ai-particle-float 6s ease-in-out infinite;
}

.ai-particles::before {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.ai-particles::after {
  top: 60%;
  right: 20%;
  animation-delay: 2s;
}

.ai-neural-network {
  position: relative;
  height: 100px;
  margin: 20px 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(79, 172, 254, 0.1) 50%, 
    transparent 100%);
  border-radius: 10px;
  overflow: hidden;
}

.ai-neural-network::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(79, 172, 254, 0.5) 20%, 
    rgba(79, 172, 254, 0.8) 50%, 
    rgba(79, 172, 254, 0.5) 80%, 
    transparent 100%);
  animation: ai-slide-in-left 2s ease-out 1s both;
}

.ai-circuit-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: 
    linear-gradient(90deg, transparent 0%, rgba(79, 172, 254, 0.1) 50%, transparent 100%),
    linear-gradient(0deg, transparent 0%, rgba(79, 172, 254, 0.1) 50%, transparent 100%);
  background-size: 200px 200px;
  animation: ai-circuit-pulse 4s ease-in-out infinite;
}

.ai-scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(79, 172, 254, 0.8) 50%, 
    transparent 100%);
  animation: ai-scan-line 3s ease-in-out infinite 2s;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ai-typewriter {
    white-space: normal;
    border-right: none;
    animation: ai-fade-in 1s ease-out 1s both;
  }
  
  .ai-neural-network {
    height: 50px;
  }
  
  .ai-particles::before,
  .ai-particles::after {
    width: 3px;
    height: 3px;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .ai-title-animate,
  .ai-text-animate,
  .ai-glow,
  .ai-glow-subtle,
  .ai-pulse,
  .ai-fade-in,
  .ai-fade-in-delay,
  .ai-fade-in-delay-2,
  .ai-slide-in-left,
  .ai-slide-in-right,
  .ai-slide-up,
  .ai-typewriter,
  .ai-hero-title,
  .ai-particles::before,
  .ai-particles::after,
  .ai-neural-network::before,
  .ai-circuit-lines,
  .ai-scan-line {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Interaction enhancements */
.ai-glow:hover {
  animation-duration: 1s;
}

.ai-pulse:hover {
  animation-duration: 0.5s;
}

/* Loading states */
.ai-loading {
  position: relative;
  overflow: hidden;
}

.ai-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(79, 172, 254, 0.3) 50%, 
    transparent 100%);
  animation: ai-slide-in-left 2s ease-in-out infinite;
}