/* career360.css — 「员工360评价」台阶页组件样式（全部 c3- 前缀，配合 css/steps.css 引擎）
   结构见 sections/career360.html；扫描线 / 雷达扫掠等循环动效常驻（组件不激活时不可见），
   入场动效用 .st-steps:not(.st-static) + .st-comp.active 门控（同 sj-/lz- 约定），
   移动端 .st-static 退化时一切内容直接以终态呈现。 */

/* ---- L0：MacBook 报告 + iPhone 问卷（marvel-device 框，真实截图） ---- */
.c3-shots { position: relative; width: 100%; height: 100%; }
.c3-mac-wrap {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-57%, -50%) scale(.6);
  transform-origin: center;
  filter: drop-shadow(0 26px 50px rgba(0,0,0,.22));
}
.c3-ipx-wrap {
  position: absolute; right: 1%; bottom: 3%;
  transform: scale(.42) rotate(-4deg);
  transform-origin: bottom right;
  filter: drop-shadow(0 20px 44px rgba(0,0,0,.3));
}
.c3-shots .marvel-device .screen img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
}
.st-steps:not(.st-static) .st-comp.active .c3-mac-wrap { animation: c3-mac-in .45s cubic-bezier(.2,.9,.25,1) both; }
@keyframes c3-mac-in {
  from { opacity: 0; transform: translate(-57%, -47%) scale(.56); }
  to { opacity: 1; transform: translate(-57%, -50%) scale(.6); }
}
.st-steps:not(.st-static) .st-comp.active .c3-ipx-wrap { animation: c3-ipx-in .45s cubic-bezier(.2,.9,.25,1) .12s both; }
@keyframes c3-ipx-in {
  from { opacity: 0; transform: scale(.38) rotate(-4deg) translateY(30px); }
  to { opacity: 1; transform: scale(.42) rotate(-4deg); }
}

/* ---- 01：权重条（段内数字 + 微 3D，逐级伸展） ---- */
.c3-wbar { width: min(560px, 96%); transform: perspective(900px) rotateX(6deg); }
.c3-wbar h5 { font-size: 14px; color: rgba(0,0,0,.44); font-weight: 600; letter-spacing: .08em; margin: 0 0 22px; }
.c3-wbar-track {
  display: flex; height: 84px; border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(46,125,82,.18), inset 0 0 0 1px rgba(0,0,0,.08);
}
.c3-wbar-seg {
  width: var(--w);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 17px;
}
.c3-wbar-seg span { opacity: 1; }
.st-steps:not(.st-static) .c3-wbar-seg { width: 0; transition: width 1s cubic-bezier(.2,.7,.3,1); }
.st-steps:not(.st-static) .c3-wbar-seg span { opacity: 0; transition: opacity .5s .8s; }
.st-steps:not(.st-static) .st-comp.active .c3-wbar-seg { width: var(--w); }
.st-steps:not(.st-static) .st-comp.active .c3-wbar-seg span { opacity: 1; }
.st-steps:not(.st-static) .st-comp.active .c3-wbar-seg:nth-child(1) { transition-delay: .08s; }
.st-steps:not(.st-static) .st-comp.active .c3-wbar-seg:nth-child(2) { transition-delay: .2s; }
.st-steps:not(.st-static) .st-comp.active .c3-wbar-seg:nth-child(3) { transition-delay: .32s; }
.st-steps:not(.st-static) .st-comp.active .c3-wbar-seg:nth-child(4) { transition-delay: .44s; }
.st-steps:not(.st-static) .st-comp.active .c3-wbar-seg:nth-child(5) { transition-delay: .56s; }
.c3-wbar-legend { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; }
.c3-wbar-legend div { font-size: 14.5px; color: rgba(0,0,0,.68); display: flex; justify-content: space-between; }
.c3-wbar-legend b { font-weight: 600; color: #1d1d1f; }
.c3-wbar-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 3.5px; margin-right: 9px; vertical-align: -1px; }

/* ---- 02：雷达图（扫描线常驻，多边形/顶点入场展开） ---- */
.c3-radar-wrap { text-align: center; position: relative; }
.c3-radar-wrap svg { width: min(520px, 92%); height: auto; filter: drop-shadow(0 16px 34px rgba(46,125,82,.18)); }
.c3-radar-axis { stroke: rgba(0,0,0,.12); stroke-width: 1; }
.c3-radar-grid { fill: none; stroke: rgba(0,0,0,.09); }
.c3-radar-sweep {
  stroke: rgba(46,125,82,.35); stroke-width: 2; stroke-linecap: round;
  transform-origin: 160px 148px; animation: c3-sweep 7s linear infinite;
}
@keyframes c3-sweep { to { transform: rotate(360deg); } }
.c3-radar-poly {
  fill: rgba(46,125,82,.24); stroke: #2e7d52; stroke-width: 3; stroke-linejoin: round;
  transform-origin: center;
}
.st-steps:not(.st-static) .c3-radar-poly {
  transform: scale(0); opacity: 0;
  transition: transform .9s cubic-bezier(.2,.8,.26,1) .15s, opacity .5s .15s;
}
.st-steps:not(.st-static) .st-comp.active .c3-radar-poly { transform: scale(1); opacity: 1; }
.st-steps:not(.st-static) .c3-radar-dot { opacity: 0; transition: opacity .4s; }
.st-steps:not(.st-static) .st-comp.active .c3-radar-dot { opacity: 1; }
.st-steps:not(.st-static) .st-comp.active .c3-radar-dot:nth-of-type(1) { transition-delay: .5s; }
.st-steps:not(.st-static) .st-comp.active .c3-radar-dot:nth-of-type(2) { transition-delay: .58s; }
.st-steps:not(.st-static) .st-comp.active .c3-radar-dot:nth-of-type(3) { transition-delay: .66s; }
.st-steps:not(.st-static) .st-comp.active .c3-radar-dot:nth-of-type(4) { transition-delay: .74s; }
.st-steps:not(.st-static) .st-comp.active .c3-radar-dot:nth-of-type(5) { transition-delay: .82s; }
.st-steps:not(.st-static) .st-comp.active .c3-radar-dot:nth-of-type(6) { transition-delay: .9s; }
.c3-radar-dot { fill: #2e7d52; }
.c3-radar-label { font-size: 13px; fill: rgba(0,0,0,.68); }
.c3-radar-cap { margin-top: 4px; font-size: 13.5px; color: rgba(0,0,0,.44); }

/* ---- 03：综合分（无卡片巨型数字 + 等级 pill + 导出 PDF） ---- */
.c3-score { text-align: center; }
.c3-score-num {
  font-size: clamp(130px, 15vw, 210px); font-weight: 700; letter-spacing: -.05em; line-height: .95;
  background: linear-gradient(135deg, #256b45, #34c7a0);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.c3-score-row { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.c3-score-pill {
  font-size: 15px; font-weight: 600; color: #248a3d;
  background: rgba(36,138,61,.12); border-radius: 980px; padding: 7px 18px;
}
.c3-score-sub { font-size: 14px; color: rgba(0,0,0,.44); }
.c3-score-pdf {
  margin-top: 30px; display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 500; color: #fff; background: #0071e3;
  border-radius: 980px; padding: 13px 28px;
  box-shadow: 0 12px 30px rgba(0,113,227,.35);
  transition: transform .25s, box-shadow .25s; cursor: pointer;
}
.c3-score-pdf:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,113,227,.45); }
.c3-score-pdf svg { width: 17px; height: 17px; }

/* ---- 04：扫码场景（iPhone mock + 伪二维码扫描线 + 机构 pill） ---- */
.c3-scan { position: relative; width: 100%; height: 100%; }
.c3-scan-ipx {
  position: absolute; left: 4%; top: 50%;
  transform: translateY(-50%) scale(.4);
  transform-origin: left center;
  filter: drop-shadow(0 22px 44px rgba(0,0,0,.26));
}
.c3-scan .marvel-device .screen img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
}
.c3-scan-right {
  position: absolute; right: 6%; top: 50%; transform: translateY(-50%);
  width: 220px; display: flex; flex-direction: column; gap: 18px;
}
.c3-scan-qr { position: relative; width: 200px; }
.c3-scan-qr svg { display: block; width: 100%; border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.c3-scan-line {
  position: absolute; left: 4%; right: 4%; height: 34px; border-radius: 8px;
  background: linear-gradient(180deg, transparent, rgba(46,125,82,.28), transparent);
  animation: c3-scan 2.6s ease-in-out infinite;
}
@keyframes c3-scan { 0%, 100% { top: 2%; } 50% { top: 88%; } }
.c3-scan-cap { font-size: 14px; color: rgba(0,0,0,.68); line-height: 1.6; }
.c3-scan-cap b { display: block; font-size: 16px; color: #1d1d1f; margin-bottom: 4px; }
.c3-scan-pills { position: absolute; left: 6%; bottom: 6%; display: flex; gap: 10px; }
.c3-scan-pills span {
  font-size: 12.5px; font-weight: 500; color: var(--st-cat, #2e7d52);
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 980px; padding: 7px 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* ==================== 移动端退化（≤900px，.st-static 长页） ==================== */
@media (max-width: 900px) {
  .c3-shots { height: 300px; }
  .c3-mac-wrap { top: 46%; transform: translate(-57%, -50%) scale(.34); }
  .c3-ipx-wrap { right: 0; bottom: 0; transform: scale(.24) rotate(-4deg); }
  .c3-wbar { width: 100%; transform: none; }
  .c3-wbar-track { height: 64px; }
  .c3-wbar-legend { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .c3-radar-wrap svg { width: min(320px, 88%); }
  .c3-score-num { font-size: 96px; }
  .c3-score-row { flex-wrap: wrap; gap: 10px; }
  .c3-scan { height: 340px; }
  .c3-scan-ipx { left: 0; transform: translateY(-50%) scale(.26); }
  .c3-scan-right { right: 0; width: 172px; gap: 12px; }
  .c3-scan-qr { width: 150px; }
  .c3-scan-pills { left: 0; right: 0; bottom: 0; flex-wrap: wrap; gap: 8px; }
}