/* Enhanced Flying Icons and Micro-Animation Effects */
/* VETKAD Tech - Advanced Animation System */

:root {
  --animation-speed: 1s;
  --animation-delay: 0s;
  --bounce-height: 20px;
  --rotate-angle: 360deg;
  --scale-factor: 1.2;
}

/* Floating Animation Variants */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}

@keyframes float-medium {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(-2deg); }
}

@keyframes float-strong {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-25px) rotate(3deg); }
}

/* Icon-Specific Animations */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(123, 166, 255, 0.3);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(123, 166, 255, 0.6);
    filter: brightness(1.2);
  }
}

@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(100px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px);
  }
  70% {
    transform: scale(0.9) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

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

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

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

@keyframes zoom-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotate-in {
  0% {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

/* Advanced Hover Effects */
@keyframes hover-lift {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  100% {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }
}

@keyframes hover-glow {
  0% {
    filter: brightness(1) drop-shadow(0 0 0 transparent);
  }
  100% {
    filter: brightness(1.1) drop-shadow(0 0 10px rgba(123, 166, 255, 0.4));
  }
}

/* Utility Classes for Quick Implementation */
.animate-float-gentle {
  animation: float-gentle 4s ease-in-out infinite;
}

.animate-float-medium {
  animation: float-medium 3s ease-in-out infinite;
}

.animate-float-strong {
  animation: float-strong 2.5s ease-in-out infinite;
}

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

.animate-bounce-in {
  animation: bounce-in 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.animate-slide-in-left {
  animation: slide-in-left 0.6s ease-out;
}

.animate-slide-in-right {
  animation: slide-in-right 0.6s ease-out;
}

.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out;
}

.animate-zoom-in {
  animation: zoom-in 0.5s ease-out;
}

.animate-rotate-in {
  animation: rotate-in 0.7s ease-out;
}

/* Enhanced Interactive States */
.interactive-icon {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

.interactive-icon:hover {
  animation: hover-lift 0.3s ease-out forwards, hover-glow 0.3s ease-out forwards;
}

.interactive-icon:active {
  transform: scale(0.95);
}

/* Stagger Animation Delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* Service-Specific Icon Animations */
.web-dev-icon {
  animation: float-gentle 4s ease-in-out infinite;
}

.web-dev-icon:hover {
  animation: pulse-glow 1s ease-in-out;
}

.ai-icon {
  animation: float-medium 3.5s ease-in-out infinite;
}

.ai-icon:hover {
  animation: rotate-in 0.5s ease-out;
}

.automation-icon {
  animation: float-strong 3s ease-in-out infinite;
}

.automation-icon:hover {
  transform: rotate(15deg) scale(1.1);
}

.whatsapp-icon {
  animation: float-gentle 4.5s ease-in-out infinite;
}

.whatsapp-icon:hover {
  animation: bounce-in 0.6s ease-out;
}

.marketing-icon {
  animation: float-medium 3.8s ease-in-out infinite;
}

.marketing-icon:hover {
  animation: zoom-in 0.4s ease-out;
}

.internship-icon {
  animation: float-gentle 4.2s ease-in-out infinite;
}

.internship-icon:hover {
  animation: slide-in-left 0.5s ease-out;
}

/* Particle Effect Background */
.particles-bg {
  position: relative;
  overflow: hidden;
}

.particles-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(123, 166, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(31, 157, 106, 0.1) 0%, transparent 50%);
  animation: float-gentle 10s ease-in-out infinite;
  pointer-events: none;
}

/* Loading States */
.loading-pulse {
  animation: pulse-glow 1.5s ease-in-out infinite;
}

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

.loading-rotate {
  animation: rotate-in 1s linear infinite;
}

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

/* Mobile Optimizations */
@media (max-width: 768px) {
  .animate-float-gentle,
  .animate-float-medium,
  .animate-float-strong {
    animation-duration: 6s; /* Slower animations on mobile for battery */
  }
  
  .interactive-icon:hover {
    animation: none; /* Disable hover animations on touch devices */
  }
}

/* Dark Mode Adaptations */
.dark .animate-pulse-glow {
  animation: pulse-glow-dark 2s ease-in-out infinite;
}

@keyframes pulse-glow-dark {
  0%, 100% {
    box-shadow: 0 0 5px rgba(126, 166, 255, 0.4);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(126, 166, 255, 0.7);
    filter: brightness(1.3);
  }
}

/* Accessibility Support */
@media (prefers-reduced-motion: reduce) {
  .animate-float-gentle,
  .animate-float-medium,
  .animate-float-strong,
  .animate-pulse-glow,
  .animate-bounce-in,
  .animate-slide-in-left,
  .animate-slide-in-right,
  .animate-fade-in-up,
  .animate-zoom-in,
  .animate-rotate-in,
  .interactive-icon,
  .web-dev-icon,
  .ai-icon,
  .automation-icon,
  .whatsapp-icon,
  .marketing-icon,
  .internship-icon {
    animation: none !important;
    transition: none !important;
  }
}

/* High Performance GPU Acceleration */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* Container Query Support for Responsive Animations */
@container (max-width: 400px) {
  .service-card .animate-float-gentle {
    animation-duration: 8s;
  }
}

/* Advanced Easing Functions */
.ease-bounce {
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.ease-smooth {
  animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ease-elastic {
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}