/* FSD Jobs motion + design pass for every page except the listings board.
   Progressive: scroll-driven reveals where supported, a simple load-in elsewhere, nothing with reduced motion. */

@property --jm-p { syntax: '<number>'; inherits: true; initial-value: 0; }

/* ── Profile completion: vacancy sidebar card + avatar badge ── */
.jobs-pm-card { padding: 18px; border-radius: 16px; background: linear-gradient(150deg, #fbf1f3 0%, #fff 62%); border: 1px solid #efd9df; display: grid; gap: 12px; }
.jobs-pm-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.jobs-pm-head h2 { margin: 0 0 3px; font-size: 17px; }
.jobs-pm-head p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #5d6470; }
.jobs-pm-ring { --jm-p: var(--p, 0); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, #fff 0 60%, transparent 62%), conic-gradient(#831d32 calc(var(--jm-p) * 1%), #efe6e9 0); }
.jobs-pm-ring b { font: 800 14px Inter, sans-serif; color: #831d32; }
.jobs-pm-missing { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.jobs-pm-missing li { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px dashed #d9b9c2; font: 600 12px Inter, sans-serif; color: #6b3442; }
.jobs-pm-missing li.is-more { border-style: solid; color: #8a8780; }
.jobs-pm-card .jobs-button { width: 100%; }
.fsd-nav__avatar { position: relative; }
.jobs-av-pct { position: absolute; left: 22px; top: -4px; padding: 1px 5px; border-radius: 999px; background: #b7791f; color: #fff; font: 800 9.5px/1.5 Inter, sans-serif; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.jobs-av-bar { display: block; height: 5px; margin: 6px 0 2px; border-radius: 4px; background: #efe6e9; overflow: hidden; }
.jobs-av-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #b7791f, #831d32); }
.fsd-avmenu__rank em { display: block; font: 600 11px Inter, sans-serif; color: #b7791f; font-style: normal; }

/* ── Micro-interactions everywhere in Jobs (not the board rows themselves) ── */
.jobs-app .jobs-button, .jobs-app .jobs-chip-button, .rx-btn, .jobs-contact-copy, .jobs-contact-wa, .jobs-co-actions .jobs-button { transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, background-color .2s, border-color .2s, filter .2s; }
.jobs-app .jobs-button:active, .jobs-app .jobs-chip-button:active, .rx-btn:active, .jobs-contact-copy:active { transform: scale(.97); }
.jobs-app .jobs-button:not(.jobs-button--outline):hover, .rx-btn:not(.rx-btn--ghost):hover { box-shadow: 0 10px 22px -12px rgb(131 29 50 / 55%); }
.jobs-app :is(a, button, input, select, textarea, summary):focus-visible { outline: 2.5px solid #831d32; outline-offset: 2px; border-radius: 8px; }
.jobs-skill-chips li, .jx-chips a, .jobs-pm-missing li, .rx-chip { transition: transform .18s, background-color .2s, border-color .2s; }
.jobs-skill-chips li:hover, .jx-chips a:hover { transform: translateY(-1px); }
.jobs-hl { transition: background-color .2s, box-shadow .2s; }
.jobs-hl:hover { box-shadow: 0 0 0 3px rgb(131 29 50 / 12%); }
.jobs-company-card, .rx-tpl, .rx-mine-card, .jobs-co-card, .jobs-alert-row { transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s; }
.rx-tpl:hover, .rx-mine-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -28px rgb(64 27 41 / 55%); border-color: #e3cdd4; }
.rx-tpl:hover .rx-tpl-thumb { background: #e9ecf1; }
.jx-more > summary, .jobs-panel > summary, .rx-panel > summary { transition: background-color .2s; }
.jx-more > summary:hover, .rx-panel > summary:hover { background: #fbf8f9; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes jm-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes jm-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes jm-pop { 0% { opacity: 0; transform: scale(.86); } 70% { transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
  @keyframes jm-ring { from { --jm-p: 0; } }
  @keyframes jm-grow { from { transform: scaleX(0); } }
  @keyframes jm-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
  @keyframes jm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
  @keyframes jm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

  /* Load-in for the top of each page (heroes, headers, first cards). */
  .jobs-detail-heading, .jobs-co-head, .jobs-dir-hero, .jobs-foryou-hero, .jobs-tracker-hero, .jx-hero, .rx-hero, .jobs-account-intro, .jobs-pref-hero, .jobs-alerts-hero { animation: jm-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
  .jobs-detail-aside > section:nth-child(1), .jobs-detail-aside > *:first-child { animation: jm-rise .6s cubic-bezier(.2, .8, .2, 1) .08s both; }
  .jobs-co-id .jobs-monogram, .jobs-co-id .jobs-employer-logo, .jobs-detail-company .jobs-monogram { animation: jm-pop .55s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
  .jobs-co-head .jobs-employer-cover > img { animation: jm-kenburns 1.6s cubic-bezier(.2, .8, .2, 1) both; transform-origin: 60% 40%; }
  .jobs-co-head { overflow: hidden; }

  /* Progress visuals fill as they appear. */
  .jobs-pm-ring, .jcc-ring { animation: jm-ring 1.1s cubic-bezier(.2, .8, .2, 1) .2s both; }
  .jobs-av-bar i, .jobs-meter i, .rx-meter i, .jobs-pay-band div.is-mid { transform-origin: left; }
  .jobs-av-bar i, .rx-meter i { animation: jm-grow .9s cubic-bezier(.2, .8, .2, 1) .2s both; }
  .jobs-av-pct { animation: jm-pop .5s cubic-bezier(.34, 1.56, .64, 1) .6s both; }
  .jobs-pm-card .jobs-button { background-image: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 22%) 50%, transparent 65%); background-size: 220% 100%; animation: jm-shimmer 3.6s linear 1.2s 2; }

  /* Resume Studio entrance. */
  .rx-hero-page { animation: jm-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
  .rx-hero-page:nth-child(1) { animation-delay: .1s; } .rx-hero-page:nth-child(2) { animation-delay: .22s; } .rx-hero-page:nth-child(3) { animation-delay: .34s; }
  .rx-hero-badge { animation: jm-pop .6s cubic-bezier(.34, 1.56, .64, 1) .7s both, jm-float 5s ease-in-out 1.4s infinite; }
  .rx-hero-badge--match { animation-delay: .9s, 2s; }
  .rx-steps li { animation: jm-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
  .rx-steps li:nth-child(2) { animation-delay: .06s } .rx-steps li:nth-child(3) { animation-delay: .12s } .rx-steps li:nth-child(4) { animation-delay: .18s } .rx-steps li:nth-child(5) { animation-delay: .24s }

  /* Below the fold: reveal sections as they scroll into view. */
  @supports (animation-timeline: view()) {
    .jobs-detail > section, .jobs-detail > .jx-more, .jobs-detail-aside > section, .jobs-similar, .jobs-co-card, .jobs-co-side > *, .jx-section, .jx-links, .rx-section-head, .rx-tpl, .rx-mine-card, .jobs-company-card, .jobs-alert-row, .jobs-profile-section, .jobs-fb-card {
      animation: jm-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
    .jobs-skill-chips li { animation: jm-pop linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .jobs-pay-band div { animation: jm-rise linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    .jobs-check li, .jobs-qs li { animation: jm-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    .jcc-bars li i, .jobs-detail-list li { animation: jm-fade linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
  /* Browsers without scroll timelines: a short stagger on load instead. */
  @supports not (animation-timeline: view()) {
    .jobs-detail > section, .jobs-detail-aside > section, .jobs-co-card, .jx-section, .rx-tpl, .jobs-company-card { animation: jm-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
    .jobs-detail > section:nth-child(n+3), .jobs-detail-aside > section:nth-child(n+2) { animation-delay: .08s; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .jobs-app *, .rx * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}