/* ==========================================================================
   HomeBased Jobs Portal - Animations & Keyframes
   Strict Vanilla CSS3
   ========================================================================== */

/* Fade In Up Reveal */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Fade In Scale */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulse / Ping Animation */
@keyframes pulseDot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes pulseDotOrange {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(253, 118, 26, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 8px rgba(253, 118, 26, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(253, 118, 26, 0);
  }
}

/* Infinite Marquee Track */
@keyframes marqueeRoll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Float Animation */
@keyframes floatBadge {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* Shimmer / Skeleton Loader */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Progress Fill */
@keyframes progressFill {
  from {
    width: 0%;
  }
}

/* Spin for Loaders */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

/* Pick Button Alert Pulse */
@keyframes pickGlow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(70, 72, 212, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(70, 72, 212, 0.6);
  }
}

/* Animation Utility Classes */
.animate-fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in-down {
  animation: fadeInDown 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in-scale {
  animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-pulse-dot {
  animation: pulseDot 2s infinite cubic-bezier(0.45, 0, 0.55, 1);
}

.animate-pulse-orange {
  animation: pulseDotOrange 2s infinite cubic-bezier(0.45, 0, 0.55, 1);
}

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

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-shimmer {
  background: linear-gradient(90deg, #f0f3ff 25%, #e2e8ff 50%, #f0f3ff 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.animate-pick {
  animation: pickGlow 2.5s infinite ease-in-out;
}

/* Reveal on Scroll default states */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

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

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }