/* Animations & Transitions for Jobdrive Theme */

/*
 * Vertical marquee for a duplicated conveyor list.
 *
 * Named jdResumeFlow until the keyframes below were ported: the Resume
 * Screening pattern references jdResumeFlow for a completely different
 * animation (resume cards flying across the viewport), and this definition
 * was winning, which is why that conveyor never worked. Renamed so the two
 * stop colliding. Nothing currently uses .jd-resume-conveyor-track.
 */
@keyframes jdConveyorScroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}

.jd-resume-conveyor-track {
  animation: jdConveyorScroll 25s linear infinite;
}

.jd-resume-conveyor-track:hover {
  animation-play-state: paused;
}

/* Hero Rotator Cross-fade */
.jd-hero-fig {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.jd-hero-fig.jd-active {
  opacity: 1;
  position: relative;
}

/* Timeline Pulse */
@keyframes jdPulseRing {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(56, 189, 248, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
  }
}

.jd-pulse-ring {
  animation: jdPulseRing 2s infinite;
}

/* Sticky Panels */
.jd-sticky-panel {
  position: sticky;
  top: 0;
  min-height: 100vh;
}

/* Global Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  .jd-resume-conveyor-track,
  .jd-pulse-ring {
    animation: none !important;
  }

  .jd-hero-fig {
    transition: none !important;
  }
}

/* ==========================================================================
 * Pattern keyframes
 *
 * The patterns carry inline `animation:` shorthands naming these keyframes,
 * but the definitions lived in per-page inline <style> blocks on the source
 * site and were not carried over, so every one of them resolved to nothing.
 * Ported verbatim from the source; the file each came from is noted.
 *
 * Deliberately not disabled under prefers-reduced-motion: several of these
 * (jdOcrBox, jdScanBand, jdResultReveal) start at opacity 0 and are only
 * made visible by the animation itself, so switching them off hides content
 * rather than calming it.
 * ========================================================================== */

/* Resume Screening — a resume card flying across the scanner and out again. */
@keyframes jdResumeFlow {
  0% {
    left: 110%;
    opacity: 0;
    transform: translateY(-50%) scale(0.9) rotate(2deg);
  }
  6% {
    opacity: 1;
  }
  14% {
    left: 60%;
    transform: translateY(-50%) scale(0.95) rotate(0deg);
  }
  32% {
    left: 60%;
    transform: translateY(-50%) scale(0.95) rotate(0deg);
  }
  40% {
    left: 5%;
    transform: translateY(-50%) scale(1) rotate(0deg);
  }
  60% {
    left: 5%;
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0deg);
  }
  70% {
    left: -62%;
    opacity: 0;
    transform: translateY(-50%) scale(0.93) rotate(-2deg);
  }
  100% {
    left: -62%;
    opacity: 0;
    transform: translateY(-50%) scale(0.93) rotate(-2deg);
  }
}

/* Resume Screening — OCR boxes flashing over the parsed resume. */
@keyframes jdOcrBox {
  0% {
    opacity: 0;
    border-color: rgba(56, 189, 248, 0);
    background: rgba(56, 189, 248, 0);
  }
  3% {
    opacity: 1;
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.34);
  }
  8% {
    border-color: #38bdf8;
    background: rgba(56, 189, 248, 0.34);
  }
  14% {
    border-color: rgba(56, 189, 248, 0.55);
    background: rgba(56, 189, 248, 0.14);
  }
  22% {
    opacity: 1;
    border-color: rgba(56, 189, 248, 0.55);
    background: rgba(56, 189, 248, 0.14);
  }
  30% {
    opacity: 0;
    border-color: rgba(56, 189, 248, 0);
    background: rgba(56, 189, 248, 0);
  }
  100% {
    opacity: 0;
    border-color: rgba(56, 189, 248, 0);
    background: rgba(56, 189, 248, 0);
  }
}

/* Resume Screening — the scan band sweeping down the page. */
@keyframes jdScanBand {
  0% {
    top: 6%;
    height: 0%;
    opacity: 0;
  }
  13% {
    top: 6%;
    height: 0%;
    opacity: 1;
  }
  75% {
    top: 6%;
    height: 84%;
    opacity: 1;
  }
  82% {
    opacity: 0;
  }
  100% {
    top: 6%;
    height: 84%;
    opacity: 0;
  }
}

/* Resume Screening — the score badge popping in once scanning finishes. */
@keyframes jdResultReveal {
  0%,
  62% {
    opacity: 0;
    transform: scale(0.7);
  }
  70% {
    opacity: 1;
    transform: scale(1.08);
  }
  74% {
    transform: scale(1);
  }
  88% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

/* Resume Screening — soft halo on each pipeline station. */
@keyframes jdStationPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(56, 189, 248, 0.08);
  }
}

/* AI Interviews — the equaliser bars beside the interviewer. */
@keyframes jdBar {
  0%,
  100% {
    transform: scaleY(0.22);
  }
  50% {
    transform: scaleY(1);
  }
}

/* AI Interviews — expanding ring around the mic. */
@keyframes jdRing {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

/* AI Interviews — the mic button's breathing glow. */
@keyframes jdMicPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.35), 0 10px 28px rgba(56, 189, 248, 0.35);
  }
  50% {
    box-shadow: 0 0 0 16px rgba(56, 189, 248, 0), 0 10px 28px rgba(56, 189, 248, 0.45);
  }
}

/* AI Interviews and Resume Screening — the "live" status dot. */
@keyframes jdDotBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

/* High Volume Hiring — waveform bars. */
@keyframes jdWave {
  0%,
  100% {
    transform: scaleY(0.42);
  }
  50% {
    transform: scaleY(1);
  }
}

/* High Volume Hiring — the typing caret. */
@keyframes jdCaret {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* Staffing Agencies — bars growing out from the left. */
@keyframes jdGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Staffing Agencies — placeholder rows breathing while data loads. */
@keyframes jdPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* Staffing Agencies — the skeleton shimmer sweep. */
@keyframes jdShimmer {
  0% {
    background-position: -140px 0;
  }
  100% {
    background-position: 220px 0;
  }
}

/* Product Overview — the text caret in the job description mock. */
@keyframes jdBlink {
  0%,
  55% {
    opacity: 1;
  }
  56%,
  100% {
    opacity: 0;
  }
}