/* vertciti 官网 v6.1 修正层 —— 叠加在 site.*.css 之后加载。
   范围：桌面版式（对照 BlackRock 企业站）＋ 全站动效体系 ＋ 两处跨视口缺陷。
   约束：≤900px 的手机版式一律不动（除明确标注"全视口"的缺陷修正）；
         所有新增动效只在 prefers-reduced-motion: no-preference 下生效。
   规格：HUIIIM/.github design/AESTHETICS.md §1–§7。 */

/* ========== 全视口缺陷修正 ========== */

/* [全视口] 黑底"下一步"带：主按钮原为黑底黑框，在黑带上不可见 → 反白；文字链接去掉误加的白框。 */
main section.page-cta .btn:not(.btn-secondary):not(.btn-text){background:#fff;color:#000;border-color:#fff}
main section.page-cta .btn:not(.btn-secondary):not(.btn-text):hover{background:var(--orange);border-color:var(--orange);color:#000}
main section.page-cta .btn-text{border-color:transparent;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:6px}
main section.page-cta .btn-secondary:hover{background:#fff;color:#000}

/* [全视口] 页内已有"下一步"区块时，不再重复黑底下一步带（技能页、技能索引）。 */
main:has(> section[aria-label="下一步"]:not(.page-cta)) > section.page-cta,
main:has(> section[aria-label="Next step"]:not(.page-cta)) > section.page-cta{display:none}

/* [全视口] 占位值（[待确认]）不按"大数字"排：诚实标注不该比真数字更显眼。 */
.m-value.is-pending{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:0;line-height:1.4;color:var(--fg-3)}

/* [全视口] 技能索引"三层结构"：原用卡片网格排行内文字导致错位 → 改为行内流。 */
.tiers{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;font-weight:800;font-size:clamp(19px,1.6vw,22px)}
.tiers > .sep{color:var(--orange)}
.tiers > span:last-child{flex-basis:100%;font-weight:400;font-size:16px;color:var(--fg-2);margin-top:8px}

/* [全视口] 建造日志版本侧栏：标签与日期原挤在 48px 版本号同一行 → 分行。 */
.ver .tag,.ver .date{display:block;letter-spacing:0;line-height:1.4}
.ver .tag{margin-top:12px;font-size:14px;font-weight:800;width:fit-content}
.ver .date{margin-top:4px;font-size:13px;font-weight:400;color:var(--fg-3);font-variant-numeric:tabular-nums}

/* ========== 桌面版式（≥901px，手机不受影响） ========== */
@media (min-width:901px){
  /* 首页"创始人"区：旧版 #people 两栏网格残留，把整张创始人卡挤进 512px 右栏 → 恢复整行。 */
  .page-home #people .wrap{display:block}
  .page-home #people .featured{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .page-home #people .featured img{min-height:520px}

  /* 文档类页面（信任/隐私/条款/无障碍/研究/团队/来信/业务版图…）：
     主视觉原掉到正文之后、通栏 1200px → 改为 BlackRock 式"正文 + 右侧粘性主视觉栏"。 */
  main section:not(.hero) > .wrap.with-art{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(40px,5vw,96px);align-items:start}
  main section:not(.hero) > .wrap.with-art > .hero-art{position:sticky;top:120px;max-width:400px;justify-self:end;aspect-ratio:5/4}

  /* 创始人页头：文字原贴底对齐，左上留出大块空白 → 垂直居中。 */
  .with-portrait{align-items:center}

  /* 创始人页"简介"：7/5 两栏只有一个子元素，右栏常年空白 → 简介正文左栏、四条事实与出处右栏。 */
  #bio .founder-grid{display:block}
  #bio .founder-bio{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,96px);align-items:start}
  #bio .founder-bio > :first-child{grid-row:1 / span 4;font-size:clamp(18px,1.5vw,21px);line-height:1.8;margin-top:0}
  #bio .founder-bio > :not(:first-child){grid-column:2}
  #bio .founder-bio > ul{margin-top:0}

  /* 下载区：卡片原单列占半屏 → 两列；下载按钮按内容宽度并排。 */
  .assets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .assets > .card{display:flex;flex-direction:column;margin:0}
  .assets > .card .dl-btn{align-self:flex-start;width:auto}
  .assets > .card .dl-btn + .dl-btn{margin-top:8px}

  /* 领导层卡片在 901–1100px 之间被挤到 ~200px 文字宽 → 该区间单列。 */
  /* （见文件末尾的区间媒体查询） */

  /* 首屏主视觉在宽屏上收敛尺寸，避免压过标题。 */
  .hero .wrap.with-art > .hero-art{max-width:460px;justify-self:end}
}

@media (min-width:901px) and (max-width:1100px){
  .leaders{grid-template-columns:minmax(0,1fr)}
}

/* ========== 动效体系 v6.1（AESTHETICS §1-7：只做功能与品牌记忆点，≤ 一屏一处主动效） ==========
   原问题：① 一次性入场动画在页面加载时就播完，视口外的主视觉用户从未看到；
          ② 唯一的常驻动效（圆环）40s 一圈，肉眼近乎静止；③ 色块网格、弧线、磁贴图形完全静态。
   方案：site-v61.js 用 IntersectionObserver 在主视觉进入视口时加 .art-on（离开时暂停，省电），
        动效只在 .art-on 下运行。 */
@media (prefers-reduced-motion:no-preference){
  .hero-art .spin{animation-duration:16s}
  .hero-art:not(.art-on) *{animation-play-state:paused!important}

  /* 柱状图：进入视口才生长，长成后缓慢呼吸。 */
  .hero-art.art-ready .grow{animation:none;transform:scaleY(0)}
  .hero-art.art-on .grow{animation:artGrow 1.1s cubic-bezier(.2,.7,.2,1) both,v61Breathe 5.6s 1.4s ease-in-out infinite;transform:none}

  /* 色块网格：逐块入场，然后像数据刷新一样依次明灭。 */
  .hero-art.grid-art rect{transform-box:fill-box;transform-origin:50% 50%}
  .hero-art.grid-art.art-on rect{animation:v61Pop .6s cubic-bezier(.2,.7,.2,1) both,v61Blink 6.4s 1s ease-in-out infinite;animation-delay:calc(var(--i,0)*70ms),calc(1s + var(--i,0)*380ms)}

  /* 圆环图：方块缓慢漂移。 */
  .hero-art.ring-art.art-on .drift{transform-box:fill-box;animation:v61Drift 9s ease-in-out infinite alternate}

  /* 弧线图：进入视口时依次描出，圆点缓慢上下浮动。 */
  .hero-art.arc-art.art-on path{stroke-dasharray:1;stroke-dashoffset:1;animation:v61Draw 1.4s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*160ms)}
  .hero-art.arc-art.art-on circle{transform-box:fill-box;animation:v61Bob 4.8s ease-in-out infinite alternate}

  /* 首页磁贴几何图形：常驻慢摆动（悬停仍有原放大效果）。 */
  .tile .art{animation:v61Sway 11s ease-in-out infinite alternate}
  .tile:nth-child(2n) .art{animation-duration:13s;animation-direction:alternate-reverse}
  .tile:hover .art{animation-play-state:paused}

  /* 关键数字区数据条：进入视口时从 0 生长到当前新鲜度（原 transition 保留）。 */
  .kstats .bar i{transition:width 1.4s cubic-bezier(.2,.7,.2,1) .2s}
}
@keyframes v61Breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.93)}}
@keyframes v61Pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes v61Blink{0%,82%,100%{opacity:1}88%{opacity:.25}}
@keyframes v61Drift{from{transform:translate(0,0)}to{transform:translate(14px,-10px)}}
@keyframes v61Draw{to{stroke-dashoffset:0}}
@keyframes v61Bob{from{transform:translateY(0)}to{transform:translateY(-14px)}}
@keyframes v61Sway{from{transform:rotate(-4deg) translate(0,0)}to{transform:rotate(5deg) translate(-6px,6px)}}
/* 对比度（WCAG AA，axe color-contrast）：橙色 #FF4713 作文字在浅灰底上只有 3.12:1（16px 正文要 ≥4.5:1）。
   下载页“规则一/二/三/四”编号改黑字，品牌橙改作下划线强调，不丢识别度 */
.rule-no{color:var(--fg);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:5px}
