/* ============================================================
   加入我们 · 页面专用组件（aw.css 之后加载）
     rotator  首屏轮播的岗位名
     value    价值观卡（两张走品牌色爆点）
     tale     超人故事（同事特写）
     wall     合影墙（错位马赛克 + 视差）
     reel     工作日常照片跑马灯（双向无限滚动）
     jobs     岗位手风琴（展开一个自动折叠其他）+ 部门筛选
     say      CEO 寄语（左邀请大字 / 右引言卡）
   通栏照片带用 aw.css 的 .band，大字导语用 .lede；
   长引言不要用 aw.css 的 .pull（那是 24ch 窄栏的短句版式，本页 77 字会被压成字带），
   用下面的 .say__card。这里只补 aw.css 没有的东西，不重复定义已有组件。
   ============================================================ */

/* ---------- 首屏 ---------- */
/* ---------- 首屏巨标：JOIN 被推走 → 拉出 SAVEHMI ----------
   一条 4s 主时间轴（--jw-t），每个部件各跑一个同时长的动画，用百分比对齐节拍：
     0.35–1.25s  小机器人从右边跑进来
     1.40–2.42s  三下发力，把 JOIN 顶到容器最左
     2.55–2.85s  原地跳起转身
     2.95–3.80s  拽绳子，把 SAVEHMI 从右边界外拉进来
     4.00s 起    待机微呼吸
   不用 delay 拼接是为了让「绳长」和「SAVEHMI 位移」严格同步 —— 两者共用同一组关键帧
   百分比与缓动，绳头才不会脱手。静止态写的就是终态，动画只负责提供起始帧。 */

.jw {
  container-type: inline-size;
  --jw-t: 4s;
  /* 整行按容器宽度定尺：JOIN 2.201em + 机器人 .62em + SAVEHMI 4.272em = 7.09em（Inter Tight 实测），
     取 7.15 留 0.8% 余量。改这三个词或空档宽度就得重算这个数。
     字体没换上来的那一瞬间按回落字族排会宽出约 4%，末尾的 I 被 clip-path 切一下，字体一到就归位。 */
  --jw-fs: 13.986cqw;   /* = 100cqw / 7.15 */
  margin: 2px 0 28px;
  /* 左右正好卡在容器边线上：SAVEHMI 是「从版心外面被拉进来」的；
     上下放行，别切掉天线和脚下的影子。 */
  clip-path: inset(-34% 0 -14% 0);
}

.jw .jw__line.display {
  margin: 0;
  font-size: var(--jw-fs);
  white-space: nowrap;
  /* 这行本来就是拉丁字，英文态那条 -0.015em 字距只会让它短一截、右边不齐 */
  letter-spacing: normal;
}

.jw__w { display: inline-block; }

/* 逐字上浮：与 aw.css 的 [data-split] 同一套遮罩和缓动，只是改成 animation 好和主时间轴共存 */
.jw__c {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.jw__c > i {
  display: inline-block;
  font-style: inherit;
  animation: jwRise 0.92s cubic-bezier(0.16, 0.84, 0.28, 1) calc(var(--i) * 44ms) both;
}
@keyframes jwRise { from { transform: translateY(108%); } to { transform: none; } }

/* JOIN：站在偏中间等着被推，三下发力挪到最左 */
.jw__w--join {
  transform-origin: 0% 86%;
  animation: jwPush var(--jw-t) linear both, jwThud var(--jw-t) linear both;
}
@keyframes jwPush {
  0%, 35%     { translate: 32cqw 0;   animation-timing-function: cubic-bezier(0.32, 0.72, 0.4, 1); }
  43%         { translate: 21.5cqw 0; animation-timing-function: linear; }
  45%         { translate: 21cqw 0;   animation-timing-function: cubic-bezier(0.32, 0.72, 0.4, 1); }
  52.5%       { translate: 10.5cqw 0; animation-timing-function: linear; }
  54.5%       { translate: 10cqw 0;   animation-timing-function: cubic-bezier(0.3, 0.68, 0.32, 1); }
  60.5%, 100% { translate: 0 0; }
}
/* 撞到最左那一下的挤压，原点在基线左端，左边缘不动 */
@keyframes jwThud {
  0%, 60.5% { scale: 1 1; }
  62%       { scale: 0.985 1.02; }
  64.5%     { scale: 1.008 0.992; }
  67%, 100% { scale: 1 1; }
}

/* SAVEHMI：被绳子从版心右边界外拽进来，两顿一停 */
.jw__w--save {
  transform-origin: 0% 86%;
  animation: jwPull var(--jw-t) linear both, jwLand var(--jw-t) linear both;
}
@keyframes jwPull {
  /* 63cqw 才够藏到版心右边线外：SAVEHMI 静止时左边缘在 39.5cqw 处 */
  0%, 73.5% { translate: 63cqw 0; animation-timing-function: cubic-bezier(0.3, 0.74, 0.44, 1); }
  81%       { translate: 36cqw 0; animation-timing-function: linear; }
  82.5%     { translate: 35cqw 0; animation-timing-function: cubic-bezier(0.25, 0.78, 0.3, 1); }
  95%, 100% { translate: 0 0; }
}
@keyframes jwLand {
  0%, 95% { scale: 1 1; }
  96.5%   { scale: 0.99 1.014; }
  98%     { scale: 1.006 0.994; }
  100%    { scale: 1 1; }
}

/* ---- 小机器人 ---- */
/* 高度 0 的行内块：底边落在基线上，又不会把巨标的行盒撑高 */
.jw__bot {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  width: 0.62em;
  height: 0;
  animation: jwWalk var(--jw-t) linear both;
}
/* 支点：词间空档的正中 + 基线（= 它的脚底），倾斜和翻面都绕这里 */
.jw__bot-b {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  animation:
    jwLean var(--jw-t) linear both,
    jwFlip var(--jw-t) linear both,
    jwBreathe 3.4s ease-in-out var(--jw-t) infinite none;
}
.jw__bot-svg {
  position: absolute;
  left: 0;
  bottom: 0;
  /* 尺寸必须写死：外层 .jw__bot-b 是 0 宽的定位锚点，auto 宽度会被收缩成 0。
     .7805em = viewBox 128 / 164 */
  width: 0.7805em;
  height: 1em;
  max-width: none;     /* aw.css 给 svg 设了 max-width:100%，0 宽的锚点会把它压没 */
  overflow: visible;   /* 影子画在 viewBox 下沿之外 */
  transform: translate(-50%, 0);
  animation: jwBob var(--jw-t) linear both;
}

/* 跑进来 → 顶着 JOIN 一起往左 → 撞停后回弹到词间空档 */
@keyframes jwWalk {
  0%, 8.75% { translate: 78cqw 0;   animation-timing-function: linear; }
  26%       { translate: 40cqw 0;   animation-timing-function: cubic-bezier(0.25, 0.6, 0.4, 1); }
  31.25%    { translate: 31.4cqw 0; animation-timing-function: linear; }
  35%       { translate: 31.4cqw 0; animation-timing-function: cubic-bezier(0.32, 0.72, 0.4, 1); }
  43%       { translate: 20.9cqw 0; animation-timing-function: linear; }
  45%       { translate: 20.4cqw 0; animation-timing-function: cubic-bezier(0.32, 0.72, 0.4, 1); }
  52.5%     { translate: 9.9cqw 0;  animation-timing-function: linear; }
  54.5%     { translate: 9.4cqw 0;  animation-timing-function: cubic-bezier(0.3, 0.68, 0.32, 1); }
  60.5%     { translate: -0.6cqw 0; animation-timing-function: cubic-bezier(0.3, 0, 0.35, 1); }
  65%, 100% { translate: 0 0; }
}
/* 身体倾角：跑步前倾 / 顶住时死撑 / 拉绳时往后坐 */
@keyframes jwLean {
  0%, 6%  { rotate: 0deg; }
  11%     { rotate: -7deg; }
  26%     { rotate: -8deg; }
  31.25%  { rotate: -1deg; }
  35%     { rotate: -16deg; }
  43%     { rotate: -12deg; }
  45%     { rotate: -17deg; }
  52.5%   { rotate: -12deg; }
  54.5%   { rotate: -17deg; }
  60.5%   { rotate: -13deg; }
  63%     { rotate: 5deg; }
  67%     { rotate: 0deg; }
  71%     { rotate: 0deg; }
  73.5%   { rotate: -8deg; }
  81%     { rotate: -13deg; }
  84%     { rotate: -9deg; }
  92%     { rotate: -12deg; }
  95%     { rotate: -2deg; }
  100%    { rotate: 0deg; }
}
/* 转身：跳到最高点时正好侧过来，像翻牌 */
@keyframes jwFlip {
  0%, 64%   { scale: -1 1; animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); }
  71%, 100% { scale: 1 1; }
}
/* 上下起伏：跑步每一步、发力每一顿、转身那一跳、拉绳的后坐 */
@keyframes jwBob {
  0%, 8.75% { transform: translate(-50%, 0); }
  12.6%     { transform: translate(-50%, -4.5%); }
  16.4%     { transform: translate(-50%, 0); }
  20.3%     { transform: translate(-50%, -4.5%); }
  24.1%     { transform: translate(-50%, 0); }
  28%       { transform: translate(-50%, -3.5%); }
  31.25%    { transform: translate(-50%, 0); }
  38%       { transform: translate(-50%, -1.6%); }
  43%       { transform: translate(-50%, 0); }
  48%       { transform: translate(-50%, -1.6%); }
  52.5%     { transform: translate(-50%, 0); }
  57%       { transform: translate(-50%, -1.6%); }
  60.5%     { transform: translate(-50%, 0); }
  64%       { transform: translate(-50%, 0); animation-timing-function: cubic-bezier(0.3, 0.9, 0.5, 1); }
  67.5%     { transform: translate(-50%, -14%); animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.2); }
  71%       { transform: translate(-50%, 0); }
  76%       { transform: translate(-50%, -2.4%); }
  81%       { transform: translate(-50%, 0); }
  88%       { transform: translate(-50%, -2.4%); }
  95%, 100% { transform: translate(-50%, 0); }
}
/* 站定之后的微呼吸 */
@keyframes jwBreathe {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -0.016em; }
}

/* 机身配色：墨色为主，青柠只落在屏幕和胸牌，紫罗兰只有天线那一颗 */
.m-sh     { fill: rgba(34, 34, 34, 0.16); transform-origin: 60px 156px; animation: jwShadow var(--jw-t) linear both; }
.m-torso,
.m-skull,
.m-face   { fill: var(--ink); }
.m-leg--f rect  { fill: var(--ink); }
.m-arm--f path   { stroke: var(--ink); }
.m-face path     { stroke: var(--ink); fill: none; }
/* 后侧的手脚退一档，靠明度分出前后 */
.m-leg--b rect,
.m-ear    { fill: #5a5a5a; }
.m-arm--b path   { stroke: #5a5a5a; }
/* 「贴纸」描边：同色部件叠在一起时用地色勾一圈，剪影才不会糊成一坨 */
.m-out    { fill: var(--ground); stroke: var(--ground); }
/* 白手套：黑手压在黑字上会消失，推 JOIN 的那一下就白推了 */
.m-hand   { fill: #fff; stroke: var(--ink); stroke-width: 3.5; }
.m-hand--b { fill: #eaeaea; stroke: #4d4d4d; }
.m-ant    { stroke: var(--ink); }
.m-screen { fill: var(--accent); }
.m-tag    { fill: var(--accent); }
.m-dot    { fill: var(--violet); }
.m-glare  { fill: #fff; opacity: 0.17; }
@keyframes jwShadow {
  0%, 64%   { transform: scale(1); opacity: 1; }
  67.5%     { transform: scale(0.68); opacity: 0.5; }
  71%, 100% { transform: scale(1); opacity: 1; }
}

/* 腿：外层管站姿（主时间轴），内层管跑步的迈步循环（自己 3 个周期跑完就停）。
   支点各转各的胯（前腿 74 / 后腿 46），用中线 60 会把两条腿甩成一个八字。 */
.m-leg--f, .m-leg--f .m-run { transform-origin: 74px 106px; }
.m-leg--b, .m-leg--b .m-run { transform-origin: 46px 106px; }
.m-leg--f { animation: jwStanceF var(--jw-t) linear both; }
.m-leg--b { animation: jwStanceB var(--jw-t) linear both; }
.m-run--f { animation: jwStepA 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0.35s 3 both; }
.m-run--b { animation: jwStepB 0.3s cubic-bezier(0.42, 0, 0.58, 1) 0.35s 3 both; }
@keyframes jwStepA {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(32deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-30deg); }
  100% { transform: rotate(0deg); }
}
@keyframes jwStepB {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-30deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(32deg); }
  100% { transform: rotate(0deg); }
}
/* 发力的时候两腿前后叉开蹬地，脚跟着身体倾角走 */
@keyframes jwStanceF {
  0%, 31.25% { transform: rotate(0deg); }
  35%        { transform: rotate(18deg); }
  60.5%      { transform: rotate(15deg); }
  65%        { transform: rotate(0deg); }
  71%        { transform: rotate(0deg); }
  73.5%      { transform: rotate(16deg); }
  95%        { transform: rotate(14deg); }
  100%       { transform: rotate(0deg); }
}
@keyframes jwStanceB {
  0%, 31.25% { transform: rotate(0deg); }
  35%        { transform: rotate(-22deg); }
  60.5%      { transform: rotate(-18deg); }
  65%        { transform: rotate(0deg); }
  71%        { transform: rotate(0deg); }
  73.5%      { transform: rotate(-20deg); }
  95%        { transform: rotate(-17deg); }
  100%       { transform: rotate(0deg); }
}

/* 手臂：静止时自然垂下，推和拉的时候抬平 */
/* 静止角度 48/52：再抬一点手套就会怼到 SAVEHMI 的 S 上，看着像画错位了 */
.m-arm--f { transform-origin: 74px 78px; transform: rotate(48deg); animation: jwArmF var(--jw-t) linear both, jwArmIdle 3.4s ease-in-out var(--jw-t) infinite none; }
.m-arm--b { transform-origin: 72px 84px; transform: rotate(52deg); animation: jwArmB var(--jw-t) linear both, jwArmIdleB 3.4s ease-in-out var(--jw-t) infinite none; }
@keyframes jwArmF {
  0%, 8.75%  { transform: rotate(48deg); }
  14%        { transform: rotate(20deg); }
  22%        { transform: rotate(30deg); }
  31.25%     { transform: rotate(-14deg); }
  /* 推的时候身体压到 -16deg，手臂要反向抬 20deg 才在屏幕上是水平顶住字母的 */
  35%, 60.5% { transform: rotate(-21deg); }
  64%        { transform: rotate(24deg); }
  71%        { transform: rotate(8deg); }
  73.5%, 95% { transform: rotate(0deg); }
  100%       { transform: rotate(48deg); }
}
@keyframes jwArmB {
  0%, 8.75%  { transform: rotate(52deg); }
  14%        { transform: rotate(34deg); }
  22%        { transform: rotate(22deg); }
  31.25%     { transform: rotate(-10deg); }
  35%, 60.5% { transform: rotate(-17deg); }
  64%        { transform: rotate(28deg); }
  71%        { transform: rotate(10deg); }
  73.5%, 95% { transform: rotate(2deg); }
  100%       { transform: rotate(52deg); }
}
@keyframes jwArmIdle {
  0%, 100% { transform: rotate(48deg); }
  50%      { transform: rotate(43deg); }
}
@keyframes jwArmIdleB {
  0%, 100% { transform: rotate(52deg); }
  50%      { transform: rotate(47deg); }
}

/* 头：跑起来和撞停时晃一下，比身体慢半拍 */
.m-head { transform-origin: 60px 66px; animation: jwHead var(--jw-t) linear both; }
@keyframes jwHead {
  0%, 8.75% { transform: rotate(0deg); }
  14%       { transform: rotate(4deg); }
  31.25%    { transform: rotate(-5deg); }
  36%       { transform: rotate(3deg); }
  60.5%     { transform: rotate(2deg); }
  63%       { transform: rotate(-6deg); }
  67%       { transform: rotate(0deg); }
  75%       { transform: rotate(4deg); }
  95%       { transform: rotate(3deg); }
  100%      { transform: rotate(0deg); }
}
/* 天线那颗点：一直在慢慢呼吸 */
.m-dot { transform-origin: 60px 1.5px; animation: jwDot 2.6s ease-in-out infinite; }
@keyframes jwDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.82); opacity: 0.72; }
}

/* 绳子：一头挂在机器人手上（left/bottom 就是手心在词间空档里的坐标），
   另一头咬着 SAVEHMI 的 S —— 绳长 = SAVEHMI 的位移 + .08em，
   和 jwPull 用同一组百分比和缓动，所以全程不脱手。 */
.jw__rope {
  position: absolute;
  left: calc(50% + 0.317em);   /* 手心在 viewBox 的 x=112，换算到词间空档的坐标 */
  bottom: 0.451em;             /* y=82，从基线往上量 */
  width: 0.08em;
  height: 0.022em;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0;
  animation: jwRope var(--jw-t) linear both, jwRopeIn var(--jw-t) linear both,
    jwRopeHand var(--jw-t) linear both;
}
.jw__rope::after {
  content: "";
  position: absolute;
  right: -0.045em;
  top: 50%;
  width: 0.09em;
  height: 0.09em;
  margin-top: -0.045em;
  border-radius: 50%;
  border: 0.022em solid var(--accent);
}
@keyframes jwRope {
  0%, 73.5% { width: calc(63cqw + 0.08em); animation-timing-function: cubic-bezier(0.3, 0.74, 0.44, 1); }
  81%       { width: calc(36cqw + 0.08em); animation-timing-function: linear; }
  82.5%     { width: calc(35cqw + 0.08em); animation-timing-function: cubic-bezier(0.25, 0.78, 0.3, 1); }
  95%, 100% { width: 0.08em; }
}
/* 身体后仰时手会往左偏，绳头跟着挪一点，不然拉绳的手和绳子会分家。
   位移 = 手离支点的高度(.45em) × sin(倾角)，取值抄 jwLean 的同名百分比。 */
@keyframes jwRopeHand {
  0%, 71%   { translate: 0 0; }
  73.5%     { translate: -0.063em 0; }
  81%       { translate: -0.101em 0; }
  84%       { translate: -0.070em 0; }
  92%       { translate: -0.094em 0; }
  95%, 100% { translate: 0 0; }
}
@keyframes jwRopeIn {
  0%, 70%   { opacity: 0; }
  72.5%     { opacity: 1; }
  94%       { opacity: 1; }
  96.5%, 100% { opacity: 0; }
}

/* 关掉动效：所有动画一撤就是终态（JOIN 机器人 SAVEHMI 一行站好） */
@media (prefers-reduced-motion: reduce) {
  .jw,
  .jw *,
  .jw *::after { animation: none !important; }
}

@media (max-width: 760px) {
  /* 小屏行高本来就矮，影子和天线留的余量按比例收一点 */
  .jw { clip-path: inset(-30% 0 -12% 0); }
}

.join-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: end;
  gap: 32px var(--gap-x);
  margin-top: 8px;
}
@media (max-width: 980px) { .join-lead { grid-template-columns: minmax(0, 1fr); } }

.join-lead__aside { max-width: 46ch; }
.join-lead__hint { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; }

/* 轮播的岗位名：上一个上浮淡出，下一个从下方顶上来 */
.rotator {
  display: inline-grid;
  overflow: hidden;
  height: 30px;
  align-items: center;
}
.rotator__i {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: start;
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  white-space: nowrap;
  box-shadow: inset 0 -8px 0 rgba(217, 242, 79, 0.75);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.42s var(--ease), transform 0.42s var(--ease);
}
.rotator__i[data-on] { opacity: 1; transform: none; }
.rotator__i[data-out] { opacity: 0; transform: translateY(-100%); }

/* 照片带里的那句话：压在照片下缘的白字 */
.band__line {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 54px;
  color: #fff;
  font-size: clamp(18px, 2.3vw, 32px);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 24px rgba(10, 12, 16, 0.5);
  pointer-events: none;
}
.band__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 14, 18, 0.6) 0%, rgba(12, 14, 18, 0.1) 46%, transparent 72%);
  pointer-events: none;
}
/* 小屏：这句话要给下面的信息胶囊让出位置，否则第二行会压在胶囊上 */
@media (max-width: 760px) {
  .band__line { left: 16px; right: 16px; bottom: 64px; font-size: 19px; }
}
/* 再窄就放不下两样东西了：留住那句话，地点信息上面的胶囊里已经有 */
@media (max-width: 360px) {
  .band figcaption { display: none; }
  .band__line { bottom: 16px; }
}

/* 小屏：区块标题右侧的说明另起一行，别和标题挤在一行 */
@media (max-width: 860px) {
  .sec__head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- 价值观 ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
}

.value {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px 30px;
  min-height: 262px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 0.5px var(--line);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.value:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 0.5px var(--line), 0 18px 40px -24px rgba(0, 0, 0, 0.35);
}

/* 悬停时底部横线由左向右生长——克制的一处动态 */
.value::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.value:hover::after { transform: scaleX(1); }

.value__n { font-family: var(--mono); font-size: 12px; color: var(--mut-2); letter-spacing: 0.08em; }
.value__k { font-size: 27px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.value__en {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mut-2);
}
.value__d {
  margin-top: auto;
  padding-top: 14px;
  font-size: 15px;
  font-weight: 300;
  line-height: 26px;
  color: var(--mut);
}

/* 品牌色爆点：六张里只有两张上色 */
.value--lime { background: linear-gradient(150deg, #eef8c4 0%, #dff36a 58%, #d9f24f 100%); box-shadow: none; }
.value--violet { background: linear-gradient(150deg, #e7e4ff 0%, #f3e9ff 46%, #ffeef4 100%); box-shadow: none; }
.value--lime .value__d,
.value--violet .value__d { color: rgba(34, 34, 34, 0.72); }
.value--lime .value__n, .value--lime .value__en,
.value--violet .value__n, .value--violet .value__en { color: rgba(34, 34, 34, 0.5); }
.value--lime::after { background: var(--ink); }
.value--violet::after { background: var(--violet); }
.value--lime:hover, .value--violet:hover { box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.35); }

@media (max-width: 1100px) { .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .value-grid { grid-template-columns: 1fr; }
  .value { min-height: 0; padding: 24px 22px 26px; }
}

/* ---------- 超人故事 ---------- */
.tales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
}
.tale {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 24px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: inset 0 0 0 0.5px var(--line);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.tale:hover {
  transform: translateY(-5px);
  box-shadow: inset 0 0 0 0.5px var(--line), 0 18px 40px -24px rgba(0, 0, 0, 0.35);
}
.tale__mark {
  width: 22px;
  height: 3px;
  background: var(--accent);
  transition: width 0.45s var(--ease);
}
.tale:hover .tale__mark { width: 46px; }
.tale blockquote {
  font-size: 20.6px;
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.015em;
}
.tale p { font-size: 14px; font-weight: 300; line-height: 26px; color: var(--mut); }
.tale footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 0.5px solid var(--line);
}
.tale footer b { font-size: 15px; font-weight: 500; }
.tale footer span { font-family: var(--mono); font-size: 11px; color: var(--mut-2); margin-left: auto; }

@media (max-width: 980px) { .tales { grid-template-columns: 1fr; } }

/* ---------- 合影墙 ---------- */
.wall {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
}
.wall__cell {
  grid-column: span 4;
  position: relative;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--grey);
  aspect-ratio: 3 / 2;
  will-change: transform;
}
.wall__cell--wide { grid-column: span 8; }
.wall__cell--port { grid-column: span 4; aspect-ratio: 3 / 4; }
.wall__cell--half { grid-column: span 6; aspect-ratio: 2 / 1; }

.wall__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.wall__cell:hover img { transform: scale(1.045); }

.wall__cell figcaption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(1.4) blur(3px);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.wall__cell figcaption i { width: 5px; height: 5px; border-radius: 1px; background: var(--accent); flex: none; }
.wall__cell:hover figcaption { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall__cell,
  .wall__cell--wide,
  .wall__cell--port,
  .wall__cell--half { grid-column: span 1; aspect-ratio: 3 / 2; }
  .wall__cell--wide { grid-column: span 2; }
  .wall__cell figcaption { opacity: 1; transform: none; }
}

/* ---------- 工作日常跑马灯 ---------- */
.reel {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-x);
  /* 通栏：抵消 .inner 的左右留白，照片贴着两边跑出去 */
  margin-inline: calc(var(--pad) * -1);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.reel__row { overflow: hidden; }
.reel__track { display: flex; gap: var(--gap-x); width: max-content; }
/* 轨道被 JS 复制成两份后才开跑，否则会滚出一半空白 */
.reel__track[data-dup] { animation: reelRun 68s linear infinite; }
.reel__row--back .reel__track[data-dup] { animation-direction: reverse; animation-duration: 84s; }
.reel:hover .reel__track { animation-play-state: paused; }

@keyframes reelRun {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* 轨道里放了两份，走一半正好接上 */
}

.reel__i {
  flex: none;
  height: 208px;
  border-radius: var(--r-media);
  overflow: hidden;
  background: var(--grey);
}
.reel__i img { height: 100%; width: auto; object-fit: cover; }

@media (max-width: 760px) { .reel__i { height: 130px; } }

/* ---------- 部门筛选 ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.filters button {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 0.5px var(--line);
  font-size: 13px;
  font-weight: 400;
  color: var(--mut);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.filters button:hover { color: var(--ink); box-shadow: inset 0 0 0 0.5px var(--ink); }
.filters button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  box-shadow: none;
}
.filters em {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.6;
  margin-left: 6px;
}

/* ---------- 岗位手风琴 ---------- */
.jobs { border-top: 0.5px solid var(--line); }

.job { border-bottom: 0.5px solid var(--line); }
.job[hidden] { display: none; }

.job__bt {
  width: 100%;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 0.95fr) 44px;
  align-items: center;
  gap: 20px;
  padding: 26px 0;
  text-align: left;
  transition: background-color 0.3s var(--ease), padding-inline 0.3s var(--ease);
}
.job__bt:hover { background: rgba(34, 34, 34, 0.03); padding-inline: 16px; }
.job[data-open="true"] .job__bt { padding-inline: 16px; background: rgba(34, 34, 34, 0.03); }

.job__n { font-family: var(--mono); font-size: 13px; color: var(--mut-2); }
.job__title { font-size: 20.6px; font-weight: 500; line-height: 24.8px; }
.job__title small {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--mut-2);
  text-transform: uppercase;
}
.job__meta { display: flex; gap: 6px; flex-wrap: wrap; }

/* 加号 → 减号：竖笔旋转 90° 并淡出 */
.job__sign {
  justify-self: end;
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px var(--line);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.job__sign i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1.4px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), background-color 0.3s var(--ease);
}
.job__sign i:last-child { transform: translate(-50%, -50%) rotate(90deg); }
.job__bt:hover .job__sign { background: var(--ink); box-shadow: none; }
.job__bt:hover .job__sign i { background: #fff; }
.job[data-open="true"] .job__sign { background: var(--accent); box-shadow: none; }
.job[data-open="true"] .job__sign i { background: var(--ink); }
.job[data-open="true"] .job__sign i:last-child { transform: translate(-50%, -50%) rotate(180deg); opacity: 0; }

/* 展开：grid 行高 0fr → 1fr，高度自适应且可过渡 */
.job__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.55s var(--ease), visibility 0.55s;
}
.job[data-open="true"] .job__panel { grid-template-rows: 1fr; visibility: visible; }
.job__panel > div { overflow: hidden; min-height: 0; }

.job__in {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  padding: 2px 16px 34px;
}
.job__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.78fr);
  gap: 30px;
}
.job__col > h4 {
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 0.5px solid var(--line);
}
.job__col li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 6px;
  padding: 7px 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 25px;
  color: var(--mut);
}
.job__col li::before {
  content: "";
  margin-top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mut-2);
}
.job__col li b { font-weight: 500; color: var(--ink); }

.job__side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--grey-2);
  align-self: start;
}
.job__side p { font-size: 13px; font-weight: 300; line-height: 22px; color: var(--mut); }
.job__side .button { align-self: flex-start; }
.job__side dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 14px;
  font-size: 13px;
  line-height: 22px;
}
.job__side dt { color: var(--mut-2); font-weight: 300; }
.job__side dd { font-weight: 500; }

/* 展开后内容逐列上浮 */
.job[data-open="true"] .job__col,
.job[data-open="true"] .job__side { animation: jobIn 0.55s var(--ease) backwards; }
.job[data-open="true"] .job__col + .job__col { animation-delay: 0.07s; }
.job[data-open="true"] .job__side { animation-delay: 0.14s; }

@keyframes jobIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  .job__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .job__side { grid-column: span 2; }
}
@media (max-width: 860px) {
  .job__bt { grid-template-columns: 40px minmax(0, 1fr) 34px; row-gap: 8px; padding: 22px 0; }
  .job__meta { grid-column: 2; }
  .job__sign { grid-row: 1; grid-column: 3; align-self: start; }
  .job__bt:hover { padding-inline: 0; background: none; }
  .job[data-open="true"] .job__bt { padding-inline: 0; }
  .job__in { grid-template-columns: 1fr; padding: 0 0 28px; }
  .job__cols { grid-template-columns: 1fr; gap: 24px; }
  .job__side { grid-column: span 1; }
}

/* ---------- 没有合适职位时的兜底块 ---------- */
.opencall {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding: 30px;
  border-radius: var(--r-card);
  background: var(--grey-2);
}
.opencall h3 { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.opencall p { margin-top: 10px; font-size: 15px; font-weight: 300; line-height: 26px; color: var(--mut); max-width: 52ch; }
@media (max-width: 680px) { .opencall { padding: 24px; } }

/* ---------- 减少动效：留结构，去掉所有循环与位移 ---------- */
@media (prefers-reduced-motion: reduce) {
  .reel__track { animation: none; }
  /* 不跑马灯时，让每一行自己可以横向滑，照片不至于被裁在外面 */
  .reel__row { overflow-x: auto; }
  .reel { -webkit-mask-image: none; mask-image: none; }
  .value, .value::after, .tale, .tale__mark,
  .wall__cell img, .wall__cell figcaption, .rotator__i { transition: none; }
  .job__panel { transition: none; }
  .job[data-open="true"] .job__col,
  .job[data-open="true"] .job__side { animation: none; }
}

/* 无 JS 时手风琴全部展开，内容不丢 */
.no-js .job__panel { grid-template-rows: 1fr; visibility: visible; }
.no-js .filters { display: none; }
.no-js .rotator { height: auto; }
.no-js .rotator__i { opacity: 1; transform: none; }
.no-js .rotator__i ~ .rotator__i { display: none; }

/* ============================================================
   CEO 寄语（为什么叫「拯救 HMI」）
   旧版把 77 字的长引言塞进 .pull 的 24ch 窄栏 + 46px 巨号，
   压成一条又高又窄的字带，右侧还空着大半屏——这里换成
   「左：邀请大字 / 右：引言卡」的双栏，引言回到可读的 21px。
   ============================================================ */
.say {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: start;
  gap: 44px var(--gap-x);
  margin-top: 46px;
}

.say__lead .lede { margin: 0; max-width: 18ch; }

.say__note {
  max-width: 46ch;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 0.5px solid var(--line);
  font-size: 15px;
  font-weight: 300;
  line-height: 28px;
  color: var(--mut);
}
.say__note b { font-weight: 500; color: var(--ink); }

.say__card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 34px 36px 28px;
  border-radius: var(--r-card);
  background: var(--grey-2);
}

/* 右下角的青柠柔光：Inter 的 ” 在 300px 下是两块斜杠，压在字上像坏图，
   换成不会和文字打架的柔光块 */
.say__card::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -90px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 242, 79, 0.9) 0%, rgba(217, 242, 79, 0) 68%);
  pointer-events: none;
}

/* 引号：两笔青柠短杠，和 .tale__mark 同一套语言 */
.say__mark {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 3px;
  background: var(--accent);
  flex: none;
  box-shadow: 34px 0 0 var(--accent);
}

.say__card blockquote {
  position: relative;
  z-index: 1;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 400;
  line-height: 1.74;
  letter-spacing: -0.008em;
}
.say__card blockquote b { font-weight: 600; }

.say__card figcaption {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 0.5px solid var(--line);
}
.say__card figcaption b { font-size: 15px; font-weight: 500; }
.say__card figcaption span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mut-2);
  margin-left: auto;
}

@media (max-width: 980px) {
  .say { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .say__lead .lede { max-width: none; }
  .say__card { padding: 28px 24px 24px; }
  /* 窄栏里柔光会糊到正文上，收小并压回角里 */
  .say__card::after { width: 200px; height: 200px; right: -56px; bottom: -62px; }
}

/* ---------- 视觉化改造（2026-09-05）----------
   六条价值观加了 emoji 圆章（vibe.css 的 .vb-ico），编号行改成图标 + 数字。 */
/* 圆章走 .vb-e 的 ::before，位移与色板都在 vibe.css，这里不用再写 */

/* ============================================================
   投递简历表单（2026-09-06）
   控件样式在 assets/css/forms.css，这里只排版：左说明右表单。
   ============================================================ */
.jn-apply__grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 84px);
  align-items: start;
}
@media (max-width: 940px) { .jn-apply__grid { grid-template-columns: 1fr; gap: 34px; } }

.jn-apply__side .heading-5 { margin-top: 10px; }
.jn-apply__p { color: var(--mut); margin-top: 16px; max-width: 38ch; }
.jn-apply__list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.jn-apply__list li {
  position: relative;
  padding: 12px 0 12px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--mut);
  line-height: 1.6;
}
.jn-apply__list li::before {
  content: "";
  position: absolute;
  left: 2px; top: 20px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.jn-apply__list a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.jn-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: clamp(22px, 3.4vw, 42px);
}
.jn-form .sfield input,
.jn-form .sfield select,
.jn-form .sfield textarea,
.jn-form .sfield__file { background-color: var(--ground); }
.jn-form .sfield input:focus,
.jn-form .sfield select:focus,
.jn-form .sfield textarea:focus { background-color: var(--card); }
.jn-form[data-state="done"] { padding: 0; border: 0; }
.jn-form .sform__done { border-radius: var(--r-card); }