/* ==========================================================================
   SevaJobs — Animations & Micro-interactions
   ========================================================================== */

/* --------------------------------------------------------------------------
   ENTRANCE ANIMATIONS
   -------------------------------------------------------------------------- */
.animate-fade-in {
  animation: sjFadeIn var(--sj-duration-lg) var(--sj-ease) both;
}
.animate-fade-up {
  animation: sjFadeUp var(--sj-duration-lg) var(--sj-ease) both;
}
.animate-fade-down {
  animation: sjFadeDown var(--sj-duration-lg) var(--sj-ease) both;
}
.animate-fade-left {
  animation: sjFadeLeft var(--sj-duration-lg) var(--sj-ease) both;
}
.animate-fade-right {
  animation: sjFadeRight var(--sj-duration-lg) var(--sj-ease) both;
}
.animate-scale-in {
  animation: sjScaleIn var(--sj-duration-lg) var(--sj-ease) both;
}
.animate-bounce-in {
  animation: sjBounceIn .6s cubic-bezier(.68,-.55,.27,1.55) both;
}

/* Stagger children */
.stagger-children > *:nth-child(1) { animation-delay: .05s; }
.stagger-children > *:nth-child(2) { animation-delay: .1s; }
.stagger-children > *:nth-child(3) { animation-delay: .15s; }
.stagger-children > *:nth-child(4) { animation-delay: .2s; }
.stagger-children > *:nth-child(5) { animation-delay: .25s; }
.stagger-children > *:nth-child(6) { animation-delay: .3s; }
.stagger-children > *:nth-child(7) { animation-delay: .35s; }
.stagger-children > *:nth-child(8) { animation-delay: .4s; }

/* --------------------------------------------------------------------------
   LOADING STATES
   -------------------------------------------------------------------------- */
.spinner-dots {
  display: inline-flex; gap: 4px; align-items: center;
}
.spinner-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sj-primary);
  animation: sjDotPulse .6s ease-in-out infinite alternate;
}
.spinner-dots span:nth-child(2) { animation-delay: .2s; }
.spinner-dots span:nth-child(3) { animation-delay: .4s; }

.loading-overlay {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(255,255,255,.8); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit;
}

/* Pulse ring */
.pulse-ring {
  position: relative;
}
.pulse-ring::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--sj-primary);
  animation: sjPulseRing 1.5s ease-out infinite;
}

/* --------------------------------------------------------------------------
   COUNTER ANIMATION (JS-driven via data-target)
   -------------------------------------------------------------------------- */
.counter-animate {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */
/* Hover lift */
.hover-lift {
  transition: transform var(--sj-duration-md) var(--sj-ease),
              box-shadow var(--sj-duration-md) var(--sj-ease);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--sj-shadow-lg);
}

/* Hover glow */
.hover-glow {
  transition: box-shadow var(--sj-duration-md) var(--sj-ease);
}
.hover-glow:hover {
  box-shadow: var(--sj-shadow-glow);
}

/* Press */
.press-effect {
  transition: transform .1s var(--sj-ease);
}
.press-effect:active {
  transform: scale(.97);
}

/* Reveal on scroll (used with IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--sj-duration-lg) var(--sj-ease),
              transform var(--sj-duration-lg) var(--sj-ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Notification ping */
.ping {
  position: relative;
}
.ping::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sj-danger);
  animation: sjPing 1.5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   PAGE TRANSITIONS
   -------------------------------------------------------------------------- */
.page-enter {
  animation: sjPageEnter .35s var(--sj-ease) both;
}

/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes sjFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

@keyframes sjFadeRight {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes sjScaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes sjBounceIn {
  from { opacity: 0; transform: scale(.3); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes sjDotPulse {
  from { opacity: .3; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes sjPulseRing {
  0%   { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes sjPing {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(1.3); }
}

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