/* ================================
   KEYFRAME ANIMATIONS
   ================================ */

/* Fade Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Slide Animations */
@keyframes slideInLeft {
  from {
    transform: translateX(-100px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

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

/* Floating Animation */
@keyframes floating {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* Floating Variants */
@keyframes floating-1 {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-30px) rotate(5deg);
  }
}

@keyframes floating-2 {
  0%, 100% {
    transform: translateY(-10px) rotate(10deg);
  }
  50% {
    transform: translateY(10px) rotate(-5deg);
  }
}

@keyframes floating-3 {
  0%, 100% {
    transform: translateY(10px) rotate(-10deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

/* Glow Pulse Animation */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(14, 165, 233, 0.6);
  }
}

/* Shimmer Effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/* Rotate Animation */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

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

/* Text Gradient Animation */
@keyframes textGradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Glow Effect */
@keyframes glow {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(14, 165, 233, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.6));
  }
}

/* Bounce Animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Slide Up Animation */
@keyframes slideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Slide Down Animation */
@keyframes slideDown {
  from {
    transform: translateY(-100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Rotate Zoom */
@keyframes rotateZoom {
  0% {
    transform: rotate(0) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Parallax Titles */
@keyframes parallaxMove {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Blink Animation */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* Neon Glow */
@keyframes neonGlow {
  0%, 100% {
    text-shadow: 
      0 0 10px rgba(14, 165, 233, 0.5),
      0 0 20px rgba(14, 165, 233, 0.3);
  }
  50% {
    text-shadow: 
      0 0 20px rgba(14, 165, 233, 0.8),
      0 0 30px rgba(168, 85, 247, 0.6);
  }
}

/* Float Animation for Cards */
@keyframes floatCard {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-15px) rotate(1deg);
  }
  66% {
    transform: translateY(-10px) rotate(-1deg);
  }
}

/* Fade In Stagger */
@keyframes fadeInStagger {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover Scale */
@keyframes hoverScale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes floatZoom {
  0% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-20px) scale(1.05);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

/* Border Glow */
@keyframes borderGlow {
  0%, 100% {
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.2);
  }
  50% {
    border-color: rgba(14, 165, 233, 0.8);
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.5);
  }
}

/* 3D Flip */
@keyframes flip3D {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}

/* Diagonal Slide */
@keyframes diagonalSlide {
  from {
    transform: translate(-50px, -50px);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* Appear */
@keyframes appear {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Shrink and Appear */
@keyframes shrinkAppear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Gradient Background Shift */
@keyframes bgGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Text Reveal */
@keyframes textReveal {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Glow Pulse Border */
@keyframes glowPulseBorder {
  0%, 100% {
    box-shadow: 
      0 0 5px rgba(14, 165, 233, 0.3),
      inset 0 0 5px rgba(14, 165, 233, 0.1);
  }
  50% {
    box-shadow: 
      0 0 20px rgba(14, 165, 233, 0.6),
      inset 0 0 10px rgba(14, 165, 233, 0.3);
  }
}

/* Float Up and Fade */
@keyframes floatUpFade {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Slide In From Top */
@keyframes slideInFromTop {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Zoom In */
@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Zoom Out */
@keyframes zoomOut {
  from {
    transform: scale(1.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Pulse Scale */
@keyframes pulseScale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Tilt Animation */
@keyframes tilt {
  0%, 100% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
}

/* Swing Animation */
@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Wobble Animation */
@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-5px) rotate(-5deg);
  }
  30% {
    transform: translateX(5px) rotate(3deg);
  }
  45% {
    transform: translateX(-5px) rotate(-3deg);
  }
  60% {
    transform: translateX(3px) rotate(2deg);
  }
  75% {
    transform: translateX(-2px) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}

/* Stagger Item Animation */
.stagger-item {
  animation: fadeInUp 0.8s ease-out forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(6) { animation-delay: 0.6s; }
.stagger-item:nth-child(7) { animation-delay: 0.7s; }
.stagger-item:nth-child(8) { animation-delay: 0.8s; }
.stagger-item:nth-child(9) { animation-delay: 0.9s; }
.stagger-item:nth-child(10) { animation-delay: 1s; }