/* =========================================================
   4rooms. — страница «Найм и адаптация брокера»
   Подключается ТОЛЬКО к hiring.html. Общие токены — из styles.css.
   Здесь живут: анимированная воронка (SVG + offset-path),
   рельс этапов, радар критериев экзамена, две колонки профиля.
   ========================================================= */

/* ---------- 1. Первый экран с воронкой ---------- */
.hf{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:calc(var(--index)*3);
  align-items:center;
}
.hf__art{position:relative;justify-self:center;width:100%;max-width:520px}
.hf__svg{width:100%;height:auto;overflow:visible}

/* стеклянные полосы воронки проявляются каскадом */
.fn__band{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:fnBand .9s var(--ease) forwards;
}
@keyframes fnBand{
  from{opacity:0;transform:scaleX(.55)}
  to{opacity:1;transform:scaleX(1)}
}

/* контур воронки прорисовывается линией */
.fn__edge{
  stroke-dasharray:640;
  stroke-dashoffset:640;
  animation:fnDraw 1.8s var(--ease) forwards;
}
@keyframes fnDraw{to{stroke-dashoffset:0}}

/* поток кандидатов: точки идут по траектории внутри воронки */
.fn__dot{
  offset-path:path("M 280 4 C 296 150 264 320 280 604");
  offset-rotate:0deg;
  animation:fnFlow 7s linear infinite;
}
.fn__dot circle{animation:fnLife 7s linear infinite}
@keyframes fnFlow{
  from{offset-distance:0%}
  to{offset-distance:100%}
}
/* кандидат либо доходит до низа, либо гаснет на своём этапе — это и есть отсев */
@keyframes fnLife{
  0%{opacity:0;r:2}
  6%{opacity:.95;r:4.2}
  92%{opacity:.95;r:4.2}
  100%{opacity:0;r:2}
}
/* три точки отсеиваются раньше — гаснут на 30 / 52 / 74 % пути */
.fn__dot--out1 circle{animation-name:fnOut1}
.fn__dot--out2 circle{animation-name:fnOut2}
.fn__dot--out3 circle{animation-name:fnOut3}
@keyframes fnOut1{
  0%{opacity:0;r:2}8%{opacity:.9;r:4.2}
  26%{opacity:.9;r:4.2}34%{opacity:0;r:9}100%{opacity:0;r:0}
}
@keyframes fnOut2{
  0%{opacity:0;r:2}8%{opacity:.9;r:4.2}
  48%{opacity:.9;r:4.2}56%{opacity:0;r:9}100%{opacity:0;r:0}
}
@keyframes fnOut3{
  0%{opacity:0;r:2}8%{opacity:.9;r:4.2}
  70%{opacity:.9;r:4.2}78%{opacity:0;r:9}100%{opacity:0;r:0}
}

/* дышащий ореол на выходе воронки */
.fn__out{transform-box:fill-box;transform-origin:center;animation:fnPulse 3.2s var(--ease-soft) infinite}
@keyframes fnPulse{
  0%,100%{opacity:.25;transform:scale(1)}
  50%{opacity:.7;transform:scale(1.22)}
}
.fn__ring{transform-box:fill-box;transform-origin:center;animation:fnRing 3.2s var(--ease-soft) infinite}
@keyframes fnRing{
  0%{opacity:.55;transform:scale(.9)}
  70%,100%{opacity:0;transform:scale(1.7)}
}

/* засечки этапов подсвечиваются по очереди, как бегущая волна */
.fn__tick{animation:fnTick 9s linear infinite}
@keyframes fnTick{
  0%,88%,100%{opacity:.22}
  4%{opacity:1}
  14%{opacity:.22}
}

/* цифры этапов */
.fn__num{
  font-family:'Lato',sans-serif;font-weight:900;
  font-size:11px;letter-spacing:.06em;fill:currentColor;opacity:.5;
}

/* ---------- 2. Рельс этапов воронки ---------- */
.rail{position:relative;margin-top:calc(var(--index)*2.4)}
.rail::before{
  content:'';position:absolute;left:calc(var(--index)*1.1);top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--accent) 8%,var(--accent) 92%,transparent);
  opacity:.35;
}
.step2{
  position:relative;
  padding:0 0 calc(var(--index)*2.2) calc(var(--index)*3.4);
}
.step2:last-child{padding-bottom:0}
.step2__dot{
  position:absolute;left:calc(var(--index)*.55);top:2px;
  width:calc(var(--index)*1.15);height:calc(var(--index)*1.15);
  min-width:22px;min-height:22px;
  border-radius:50%;
  border:1px solid currentColor;
  display:grid;place-items:center;
  font-size:var(--fs-eyebrow);font-weight:900;letter-spacing:.02em;
  background:var(--light);
  transition:background var(--tr),color var(--tr),border-color var(--tr),transform var(--tr);
}
.dark .step2__dot,.dark-2 .step2__dot{background:var(--dark)}
.step2.in .step2__dot{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.06)}
.step2__t{font-size:var(--fs-h3);font-weight:400;line-height:1.24}
.step2__do{margin-top:calc(var(--index)*.5);font-size:var(--fs-body);opacity:.82;max-width:74ch}
.step2__goal{
  margin-top:calc(var(--index)*.5);font-size:var(--fs-small);opacity:.62;max-width:72ch;
  padding-left:calc(var(--index)*.7);border-left:2px solid var(--accent);
}
.step2__auto{
  display:inline-flex;align-items:center;gap:.5em;margin-top:calc(var(--index)*.6);
  font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:.1em;
  padding:.42em .9em;border-radius:2em;
  background:rgba(43,71,239,.1);color:var(--accent);font-weight:700;
}
.dark .step2__auto,.dark-2 .step2__auto{background:rgba(255,255,255,.1);color:#fff}

/* ---------- 3. Радар критериев экзамена ---------- */
.exam{display:grid;grid-template-columns:.9fr 1.1fr;gap:calc(var(--index)*3);align-items:center}
.radar{width:100%;max-width:460px;height:auto;overflow:visible;justify-self:center}
.radar__web{stroke:currentColor;fill:none;opacity:.16}
.radar__axis{stroke:currentColor;opacity:.14}
.radar__area{
  fill:rgba(43,71,239,.16);stroke:var(--accent);stroke-width:1.6;
  transform-box:fill-box;transform-origin:center;
  opacity:0;animation:radarIn 1.1s var(--ease) .2s forwards;
}
@keyframes radarIn{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
.radar__pt{fill:var(--accent);opacity:0;animation:radarPt .5s var(--ease) forwards}
@keyframes radarPt{to{opacity:1}}
/* луч-развёртка, как у настоящего радара */
.radar__sweep{
  transform-box:view-box;transform-origin:230px 230px;
  animation:radarSweep 6s linear infinite;
}
@keyframes radarSweep{to{transform:rotate(360deg)}}
.radar__lab{
  font-family:'Lato',sans-serif;font-size:12.5px;font-weight:700;
  fill:currentColor;opacity:.75;letter-spacing:.01em;
}

/* ---------- 4. Профиль и антипрофиль ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--index)*1.6)}
.duo__col{
  border:1px solid var(--line-d);border-radius:calc(var(--index)*.5);
  padding:calc(var(--index)*1.5);
  transition:border-color var(--tr),transform var(--tr);
}
.dark .duo__col,.dark-2 .duo__col{border-color:var(--line)}
.duo__col:hover{transform:translateY(-3px)}
.duo__col--yes{border-color:rgba(43,71,239,.4)}
.duo__col--no{border-top:3px solid #d8543f}
.duo__h{
  display:flex;align-items:center;gap:.6em;
  font-size:var(--fs-h3);font-weight:400;margin-bottom:calc(var(--index)*1);
}
.duo__ico{width:1.5em;height:1.5em;flex:none}
.duo__list li{
  position:relative;padding:.55em 0 .55em 1.5em;
  font-size:var(--fs-body);opacity:.85;border-bottom:1px solid var(--line-d);
}
.dark .duo__list li,.dark-2 .duo__list li{border-color:var(--line)}
.duo__list li:last-child{border-bottom:none}
.duo__list li::before{
  content:'';position:absolute;left:0;top:1.1em;
  width:.5em;height:.5em;border-radius:50%;background:var(--accent);
}
.duo__col--no .duo__list li::before{
  background:none;width:.6em;height:.6em;top:1em;
  border-left:2px solid #d8543f;border-bottom:2px solid #d8543f;
  transform:rotate(-45deg) translateY(-.1em);border-radius:0;
}

/* ---------- 5. Карточки вопросов собеседования ---------- */
.qblk{
  border-top:1px solid var(--line-d);
  padding:calc(var(--index)*1.3) 0;
  display:grid;grid-template-columns:.55fr 1.45fr;gap:calc(var(--index)*1.6);
}
.dark .qblk,.dark-2 .qblk{border-color:var(--line)}
.qblk__n{font-size:var(--fs-h3);font-weight:900;color:var(--accent);line-height:1}
.qblk__t{font-size:var(--fs-h3);font-weight:400;margin-top:.35em}
.qblk__goal{font-size:var(--fs-small);opacity:.6;margin-top:.5em;max-width:30ch}
.qblk__list li{
  position:relative;padding:.4em 0 .4em 1.35em;font-size:var(--fs-body);opacity:.86;
}
.qblk__list li::before{
  content:'';position:absolute;left:.1em;top:1em;width:.55em;height:1px;background:var(--accent);opacity:.7;
}
.qblk__list li.is-star::after{
  content:'нестандартный';margin-left:.7em;font-size:.62em;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);vertical-align:.25em;font-weight:700;
}

/* ---------- 6. Плашка лид-магнита ---------- */
.magnet{
  display:grid;grid-template-columns:1.15fr .85fr;gap:calc(var(--index)*2.4);
  align-items:center;
  border:1px solid var(--line);border-radius:calc(var(--index)*.6);
  padding:calc(var(--index)*2);
  position:relative;overflow:hidden;
}
.magnet::after{
  content:'';position:absolute;right:-14%;top:-40%;width:52%;aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(43,71,239,.32),transparent 68%);
  animation:fnPulse 6s var(--ease-soft) infinite;pointer-events:none;
}

/* ---------- адаптив ---------- */
@media (max-width:1000px){
  .hf,.exam,.duo,.magnet{grid-template-columns:1fr}
  .hf__art{max-width:400px;order:-1}
  .qblk{grid-template-columns:1fr;gap:calc(var(--index)*.9)}
  .qblk__goal{max-width:none}
}
@media (max-width:600px){
  .step2{padding-left:calc(var(--index)*3.8)}
  .radar__lab{font-size:15px}
}

/* доступность: движение отключается, картинка остаётся */
@media (prefers-reduced-motion:reduce){
  .fn__band,.fn__edge,.fn__dot,.fn__dot circle,.fn__out,.fn__ring,.fn__tick,
  .radar__area,.radar__pt,.radar__sweep,.magnet::after{
    animation:none!important;opacity:1!important;transform:none!important;
    stroke-dashoffset:0!important;
  }
  .radar__sweep{display:none}
}