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

/* --------------------------------------------------------------------------
   ENTRANCE ANIMATIONS
   -------------------------------------------------------------------------- */
.animate-fade-up {
  animation: sjFadeUp 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
   -------------------------------------------------------------------------- */

/* Pulse ring */

/* --------------------------------------------------------------------------
   COUNTER ANIMATION (JS-driven via data-target)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   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 */

/* Press */

/* 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);
}

/* Notification ping */

/* --------------------------------------------------------------------------
   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); }
}