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

@keyframes loadProgress {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes orbMove1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(60px, -80px) scale(1.08); }
  50% { transform: translate(120px, 30px) scale(0.92); }
  75% { transform: translate(30px, 80px) scale(1.04); }
}

@keyframes orbMove2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-80px, 60px) scale(1.1); }
  66% { transform: translate(-40px, -100px) scale(0.9); }
}

@keyframes orbMove3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, 70px) scale(1.15); }
}

@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ringRotateReverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes badgeFloat1 {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes badgeFloat2 {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes slideInfinite {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes heroImageFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =============================================
   ANIMATION UTILITY CLASSES
   ============================================= */

.orb-1 { animation: orbMove1 22s ease-in-out infinite; }
.orb-2 { animation: orbMove2 28s ease-in-out infinite; }
.orb-3 { animation: orbMove3 18s ease-in-out infinite; }

.ring-1 { animation: ringRotate 20s linear infinite; }
.ring-2 { animation: ringRotateReverse 14s linear infinite; }
.ring-3 { animation: ringRotate 28s linear infinite; }

.typing-cursor { animation: blink 1s step-start infinite; }

.badge-data { animation: badgeFloat1 4s ease-in-out infinite; }
.badge-ios  { animation: badgeFloat2 4.8s ease-in-out infinite; }
.badge-ds   { animation: badgeFloat1 5.5s ease-in-out infinite 0.8s; }

.scroll-line { animation: scrollLine 2.2s ease-in-out infinite; }

.certificates-track { animation: slideInfinite 40s linear infinite; }
.certificates-track:hover { animation-play-state: paused; }