/* ════════════════════════════════════════════════════════════════════════
   features.css —— 功能卡共用样式(2026-10-17:功能页 app.html#features 与首页 index.html 共用一份,配 features.js)
   两页的设计变量不完全一样,这里每个变量都带默认值,哪一页引用都能独立成立。
   ════════════════════════════════════════════════════════════════════════ */
#features .bandh .hl{background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.9) 50%,transparent 62%) 0 0/260% 100% no-repeat,linear-gradient(95deg,#9FF0FF 0%,#A99BFF 48%,#FF9AD5 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:ufSheen 5.5s cubic-bezier(.22,.61,.36,1) infinite;padding-top:.16em;padding-bottom:.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:nowrap;font-style:normal}
@keyframes ufSheen{0%,55%{background-position:160% 0,0 0}100%{background-position:-60% 0,0 0}}

/* 布局(2026-10-18 选定 A「交错长廊」):不要卡片框和分割线,一行一个功能,图文左右交替,行间大留白 */
.feat-grid{display:flex;flex-direction:column;gap:clamp(120px,16vh,200px)}
.feat2{position:relative;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:clamp(48px,6vw,104px)}
.feat2 .feat-viz{position:relative;height:clamp(260px,min(28vw,44vh),360px);overflow:hidden;border-radius:24px;background:radial-gradient(120% 140% at 50% 0%,#232529 0%,#1c1d21 72%)}
.feat2:nth-child(even) .feat-viz{order:2}
.feat2 .feat-viz canvas{display:block;width:100%;height:100%}
.feat2 .feat-viz::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:24px;background:radial-gradient(135% 150% at 50% -35%,transparent 34%,#1c1d21 100%)}
.feat2 .feat-viz[data-anim="radar"]::after,.feat2 .feat-viz[data-anim="grid"]::after{display:none}
.feat2 .feat-bd{order:1}
.feat2 .feat-ic2{width:56px;height:56px;border-radius:15px;display:flex;align-items:center;justify-content:center;gap:2px;margin-bottom:32px;color:#eef1f5;background:linear-gradient(145deg,#2f3238 0%,#191a1e 55%,#25272c 100%);box-shadow:inset 0 0 0 1px #FFFFFF1e,inset 0 1px 0 #FFFFFF30,0 8px 18px #0007}
.feat2 .feat-ic2 svg{width:26px;height:26px}
.feat2 .feat-ic-pair svg{width:21px;height:21px}
.feat2 h3{font-family:var(--font-display,'Inter','Noto Serif SC',serif);font-size:clamp(24px,2.2vw,30px);font-weight:600;color:var(--ink,#FFFFFF);margin:0 0 18px;letter-spacing:-.01em}
.feat2 p{margin:0;max-width:26em;font-size:16px;line-height:1.7;color:var(--ink2,#B0B0B0)}
@media(max-width:760px){
  .feat-grid{gap:96px}
  .feat2{grid-template-columns:1fr;gap:36px}
  .feat2:nth-child(even) .feat-viz{order:0}
  .feat2 .feat-viz{height:260px}
}
/* 进视口淡入(两页各自的 reveal 机制不管动态生成的卡,这里自带) */
.uf-card{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.uf-card.uf-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.uf-card{opacity:1;transform:none;transition:none}}
.rec-n{color:var(--ink,#FFFFFF);font-weight:600;font-family:var(--font-mono,'Inter',sans-serif);font-variant-numeric:tabular-nums;letter-spacing:0}

/* 拼写 / 读音:字母定格时相同的亮、不同的暗;右上角眼睛 / 耳朵 */
.viz-scramble{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:24px;font-weight:500;letter-spacing:.16em;color:#FFFFFF;-webkit-text-fill-color:#FFFFFF}
.viz-scramble .nm-x{-webkit-text-fill-color:#737882;color:#737882}   /* 2026-10-18 Kerry"这个暗色对于这个背景来说太像了……太费眼睛":#3A3F47 对卡片底 1.59:1 → 3.8:1(最亮处 3.5);白字对它仍 4.4:1,相同亮、不同暗照旧 */
.viz-kind{position:absolute;top:12px;right:14px;z-index:2;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--ink,#FFFFFF);background:#FFFFFF10;box-shadow:inset 0 0 0 1px #FFFFFF18;opacity:0;transform:scale(.85);transition:opacity .25s,transform .25s}
.viz-kind.on{opacity:1;transform:none}
.viz-kind .kind-ic{width:17px;height:17px}

/* 45 个尼斯类:选中红、官方协调类黄、其余灰 */
.viz-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(5,1fr);gap:6px;padding:28px 36px}
.viz-grid i{display:flex;align-items:center;justify-content:center;border-radius:3px;background:#FFFFFF10;color:#FFFFFF73;font:500 9px/1 ui-monospace,"SF Mono",Menlo,monospace;font-style:normal;letter-spacing:.04em;transition:background .45s,color .45s}   /* 2026-10-19 底色 B:类号 40% → 45% 白,留对比度余量 */
/* 2026-10-18 同上(暗字压深底):类号 22% 白 → 40% 白,对格子底 2.0:1 → 约 3.4:1 */
.viz-grid i.sel{background:var(--stop,#FF4438);color:#FFFFFF}
.viz-grid i.rel{background:#FFD23038;color:var(--warn,#FFD230)}

/* 结论可追溯:档案号逐字打出 + 状态 */
.viz-proof{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px}
.vp-id{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:20px;letter-spacing:.08em;color:#FFFFFF;min-width:9.2em;text-align:right;white-space:nowrap}
.vp-id::after{content:"";display:inline-block;width:2px;height:1em;margin-left:4px;vertical-align:-3px;background:#FFFFFF;animation:vpCaret 1s steps(1) infinite}
@keyframes vpCaret{50%{opacity:0}}
.vp-st{display:inline-flex;align-items:center;gap:8px;min-width:6.5em;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
.vp-st.on{opacity:1;transform:none}
.vp-st.st-live{color:#00E676;background:#0F261A}
.vp-st.st-pending{color:#FFD230;background:#2D2714}
.vp-st.st-dead{color:var(--ink2,#B0B0B0);background:#2b2b2b}
.viz-proof .ll{display:inline-grid;grid-template-columns:repeat(3,4px);gap:2px;flex:0 0 auto;color:inherit}
.viz-proof .ll-cell{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.15}
.viz-proof .ll-cell.on{opacity:1}
.viz-proof .ll-cell.hole{visibility:hidden}
.viz-proof .ll-breathe .ll-cell{animation:ufBreathe 2.6s ease-in-out infinite}
@keyframes ufBreathe{0%,100%{opacity:.35}50%{opacity:1}}

/* 每日更新:政府建筑节点 → 传输线 → 字符画 */
.feat-viz .pipe-cv{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:1}
.feat-viz .pipe-src{position:absolute;left:22px;top:50%;z-index:2;width:36px;height:36px;margin-top:-18px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--ink,#FFFFFF);background:#FFFFFF0b;box-shadow:inset 0 0 0 1px #FFFFFF1c}
.feat-viz .pipe-src svg{width:18px;height:18px}
.feat-viz .pipe-dest{position:absolute;top:0;bottom:0;left:60%;right:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 26%);mask-image:linear-gradient(90deg,transparent,#000 26%)}
.feat-viz .pipe-dest canvas{display:block}