/* ==========================================================================
   SPARKS CLASSES - ANIMATIONS & KEYFRAMES
   ========================================================================== */

/* Floating Blobs */
@keyframes floatBlob {
  0% {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1) rotate(120deg);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9) rotate(240deg);
  }
  100% {
    transform: translate(0px, 0px) scale(1) rotate(360deg);
  }
}

/* Subtle Pulse */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(20, 184, 166, 0.2), 0 0 30px rgba(15, 118, 110, 0.1);
  }
  50% {
    box-shadow: 0 0 25px rgba(20, 184, 166, 0.4), 0 0 50px rgba(245, 158, 11, 0.25);
  }
}

/* Gradient Rotation */
@keyframes gradientRotate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Floating Card / Badge */
@keyframes floatVertical {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Scroll Down Indicator Bounce */
@keyframes bounceDown {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-8px);
  }
  60% {
    transform: translateY(-4px);
  }
}

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

@keyframes pulseLogo {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.85;
  }
}

/* Button Ripple Effect */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Shimmer Loading / Border animation */
@keyframes shimmerBorder {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Typing Caret Blink */
@keyframes caretBlink {
  0%, 100% { border-color: transparent; }
  50% { border-color: var(--accent); }
}

/* Intersection Scroll Reveal Classes */
.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.reveal-left {
  transform: translateX(-40px);
}

.reveal.reveal-right {
  transform: translateX(40px);
}

.reveal.reveal-zoom {
  transform: scale(0.9);
}

.reveal.active {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Stagger Delay Utilities */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }