/* 三个 AI 角色的扁平图标：尺寸与微动态
   图形在 index.html 内联（微动态需要页面 CSS 能触及 SVG 内部）。
   注意：每枚 SVG 的渐变用的是固定 ID，同一页面内不可重复内联同一枚，否则会撞 ID。 */

.home-page .agent-card .agent-symbol{
  width:52px;height:52px;
  border:0;background:none;box-shadow:none;border-radius:0;
  font-size:0;margin:0 0 14px;
  display:grid;place-items:center;
}
.agent-card .agent-symbol .role-icon{display:block;width:52px;height:52px;overflow:visible}

/* ---- 微动态：只做一下就够 ---- */
.role-icon [data-part]{transform-box:view-box}

/* 投手：高光沿外环持续加载，飞镖与靶心保持稳定。 */
@keyframes promeRoleRing{to{transform:rotate(360deg)}}
/* 销冠：成交勾逐笔画出 */
@keyframes promeRoleDraw{0%,12%{stroke-dashoffset:40}40%,86%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
/* 社媒：前三角向右展开，像复制出下一版 */
@keyframes promeRoleFront{0%{transform:translateX(-4px);opacity:.35}25%{opacity:1}75%{transform:translateX(12px);opacity:1}100%{transform:translateX(20px);opacity:0}}
@keyframes promeRoleBack{0%,100%{opacity:.65}40%,70%{opacity:1}}

.role-icon-ogilvy [data-part="target"]>circle:first-child{stroke:#a7ddff;stroke-width:7;stroke-dasharray:48 141;transform-origin:50px 52px;animation:promeRoleRing 2s linear infinite}
.role-icon-medici [data-part="check"]{stroke-dasharray:40;animation:promeRoleDraw 4.6s ease-in-out infinite}
.role-icon-warhol [data-part="front"]{animation:promeRoleFront 2s ease-in-out infinite}
.role-icon-warhol [data-part="back"]{animation:promeRoleBack 2s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .role-icon [data-part],.role-icon [data-part]>circle{animation:none!important}
  .role-icon-medici [data-part="check"]{stroke-dashoffset:0}
}

@media(max-width:580px){
  .home-page .agent-card .agent-symbol{width:46px;height:46px}
  .agent-card .agent-symbol .role-icon{width:46px;height:46px}
}

/* ---- why-prome 环形图里的同一套图标 ---- */
.orbit-agent i{display:grid;place-items:center;align-items:center;justify-items:center}
/* 窄屏基线：对齐站点 580px 以下固定的 24px 字号 */
.orbit-agent i .role-icon{width:24px;height:24px;align-self:center;justify-self:center}
@media(min-width:581px){
  /* 站点桌面端字号是 3.5cqw，图标放大到约 46px 视觉尺寸。
     卡片宽度由文字列撑着（min-width 只有 20.5cqw），列宽只影响几 px；
     真正会撑满卡片观感的是图标本身，所以这里同时把内边距压紧，
     避免图标占掉卡片一半高度。
     注：SVG 默认会被拉伸到所在网格行高，必须显式 align-self/justify-self 才不会走形 */
  .why-hero-visual .orbit-agent{min-width:18.5cqw;padding:1.7cqw 2cqw;grid-template-columns:5.4cqw auto}
  .orbit-agent i .role-icon{width:5cqw;height:5cqw;align-self:center;justify-self:center}
}