/* ============================================================
   JOBNOVA — ANIMATIONS.CSS
   Keyframes, reveals, transitions, motion effects
   ============================================================ */

/* ──────────────── KEYFRAMES ──────────────── */
@keyframes floatBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -30px) scale(1.05); }
  66%       { transform: translate(-15px, 15px) scale(0.97); }
}

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

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

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

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

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,101,63,0.2); }
  50%       { box-shadow: 0 0 40px rgba(255,101,63,0.45); }
}

@keyframes borderGlow {
  0%, 100% { border-color: var(--border-light); }
  50%       { border-color: var(--accent); }
}

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

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.05); }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.4; }
  100% { transform: scale(4); opacity: 0; }
}

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

/* ──────────────── SCROLL REVEAL STATES ──────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1),
              transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.12s; }
.stagger-3 { transition-delay: 0.18s; }
.stagger-4 { transition-delay: 0.24s; }
.stagger-5 { transition-delay: 0.30s; }
.stagger-6 { transition-delay: 0.36s; }

/* ──────────────── PAGE LOAD ANIMATIONS ──────────────── */
.animate-hero-headline {
  animation: fadeInUp 0.7s cubic-bezier(0.4,0,0.2,1) both;
  animation-delay: 0.15s;
}
.animate-hero-desc {
  animation: fadeInUp 0.7s cubic-bezier(0.4,0,0.2,1) both;
  animation-delay: 0.28s;
}
.animate-hero-ctas {
  animation: fadeInUp 0.7s cubic-bezier(0.4,0,0.2,1) both;
  animation-delay: 0.40s;
}
.animate-hero-stats {
  animation: fadeInUp 0.7s cubic-bezier(0.4,0,0.2,1) both;
  animation-delay: 0.52s;
}
.animate-hero-badge {
  animation: slideInDown 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  animation-delay: 0.05s;
}
.animate-hero-right {
  animation: fadeInRight 0.8s cubic-bezier(0.4,0,0.2,1) both;
  animation-delay: 0.2s;
}

/* ──────────────── FILTER ACTIVE ANIMATION ──────────────── */
.filter-btn.active {
  animation: bounceIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ──────────────── JOB CARD ENTRY ──────────────── */
.job-card {
  animation: scaleIn 0.4s cubic-bezier(0.4,0,0.2,1) both;
}
.job-card:nth-child(1)  { animation-delay: 0.03s; }
.job-card:nth-child(2)  { animation-delay: 0.06s; }
.job-card:nth-child(3)  { animation-delay: 0.09s; }
.job-card:nth-child(4)  { animation-delay: 0.12s; }
.job-card:nth-child(5)  { animation-delay: 0.15s; }
.job-card:nth-child(6)  { animation-delay: 0.18s; }
.job-card:nth-child(7)  { animation-delay: 0.21s; }
.job-card:nth-child(8)  { animation-delay: 0.24s; }
.job-card:nth-child(9)  { animation-delay: 0.27s; }
.job-card:nth-child(10) { animation-delay: 0.30s; }
.job-card:nth-child(11) { animation-delay: 0.33s; }
.job-card:nth-child(12) { animation-delay: 0.36s; }

/* ──────────────── GLOW BORDERS ──────────────── */
.glow-on-hover {
  transition: box-shadow var(--dur-normal) var(--ease-smooth);
}
.glow-on-hover:hover {
  box-shadow: var(--shadow-glow) !important;
}

/* ──────────────── RIPPLE EFFECT ──────────────── */
.ripple-container {
  position: relative;
  overflow: hidden;
}
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  width: 60px;
  height: 60px;
  margin-top: -30px;
  margin-left: -30px;
  animation: ripple 0.7s linear;
  pointer-events: none;
}

/* ──────────────── TYPING CURSOR ──────────────── */
.typing-cursor::after {
  content: '|';
  animation: pulse 0.9s ease-in-out infinite;
  color: var(--accent);
  font-weight: 300;
  margin-left: 2px;
}

/* ──────────────── GRADIENT ANIMATED BORDER CARD ──────────────── */
.grad-border-card {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), var(--primary), var(--accent));
  background-size: 300% 300%;
  animation: gradientBorder 4s ease infinite;
}
.grad-border-inner {
  background: var(--card-bg);
  border-radius: calc(var(--radius-xl) - 1px);
  overflow: hidden;
}

/* ──────────────── NUMBER COUNT UP ──────────────── */
.count-up { display: inline; }

/* ──────────────── REDUCED MOTION ──────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
  }
}