@charset "UTF-8";
/* ============================================================================
   advantage-scenes.css — 首页「产品优势」六张卡面的场景动效层
   ----------------------------------------------------------------------------
   背景：右侧展示区是六张错位堆叠的卡，卡面原本贴的是实拍位图 —— 只有两张带
   烘焙好的动画 WebP，其余四张是静态 PNG，切过去等于换一张图，没有任何
   "这个产品在做什么"的信息。这里把六张卡面统一改成「暗色屏幕 + 矢量场景」，
   每个场景按各自的产品语义设计一套入场序列 + 常驻循环。

   ｜约定｜
   1) 只用 opacity / transform / stroke-dashoffset，不做布局与重绘密集的操作；
      SVG 内元素统一 transform-box: fill-box，缩放到任意屏宽都不会跑位。
   2) 动画只在「舞台进入视口（.is-scene-live）」+「该卡是当前项（.is-active）」
      两个条件同时成立时挂载。其余四张卡不挂动画树，零开销。
   3) 静态态（没有动画时）就是完整画面，不是空白 —— prefers-reduced-motion
      或脚本失败时直接退化成静态插画，信息不丢。
   4) 线条统一带 pathLength="1"，所以 dasharray 里的 .18 就是"路径的 18%"，
      与线的实际长短无关，换长度不用重算。
   ========================================================================== */

.product-advantages {
  /* 场景配色：深底 + 品牌蓝 + 健康绿 + 告警橙，四个角色固定，六套场景共用 */
  --a-blue: #4b8bff;
  --a-blue-dim: rgba(75, 139, 255, .42);
  --a-blue-glow: rgba(96, 156, 255, .9);
  --a-green: #3ddc97;
  --a-warn: #ff7a59;
  --a-ink: rgba(240, 246, 255, .96);
  --a-ink-2: rgba(206, 220, 244, .76);
  --a-ink-3: rgba(178, 196, 226, .54);
  --a-hair: rgba(126, 160, 214, .21);
  --a-screen: #080d15;
  --a-ease: cubic-bezier(.22, .61, .24, 1);
  --a-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------------------------------------------------------------------------
   1. 场景基础：字体、配色、静态态
   ------------------------------------------------------------------------ */
.adv-scene {
  pointer-events: none;
  /* 六张卡面朝左下依次叠压。只有抽出来的那张显示屏幕内容，其余保持白卡面 ——
     否则六层深色网格叠在一起互相穿透，字全糊成一团。这条与旧版
     .advantage-layer-texture 的行为一致（原本是 opacity 0 → is-active 时 1）。 */
  opacity: 0;
  transition: opacity 200ms ease;
}

.advantage-visual.is-active .adv-scene {
  opacity: 1;
  transition-duration: 280ms;
  transition-delay: 60ms;
}

.adv-scene text {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-size: 7px;
  font-weight: 500;
  letter-spacing: .12em;
  fill: var(--a-ink-2);
  text-rendering: geometricPrecision;
}

.adv-scene .adv-key-title {
  font-size: 9.4px;
  font-weight: 600;
  letter-spacing: .18em;
  fill: var(--a-ink);
}

.adv-scene .adv-sub {
  font-size: 7.2px;
  letter-spacing: .04em;
  fill: var(--a-ink-3);
}

.adv-scene .adv-key-warn {
  fill: rgba(255, 122, 89, .78);
}

.adv-scene .adv-key-skip {
  fill: rgba(168, 186, 216, .34);
  text-decoration: line-through;
  text-decoration-thickness: .8px;
}

.adv-scene .adv-key-ok {
  font-size: 7.2px;
  letter-spacing: .08em;
  fill: rgba(74, 228, 162, .9);
}

.adv-scene .adv-num {
  font-size: 8.2px;
  letter-spacing: .06em;
  fill: var(--a-ink-2);
}

.adv-scene .adv-num-sm {
  font-size: 7.2px;
  fill: var(--a-ink-3);
}

.adv-scene .adv-num-v {
  font-size: 10.4px;
  font-weight: 600;
  fill: var(--a-blue);
}

.adv-scene .adv-status {
  font-size: 7.2px;
  letter-spacing: .06em;
  fill: var(--a-ink-3);
}

.adv-scene .adv-grid {
  fill: none;
  stroke: var(--a-hair);
  stroke-width: .5;
  vector-effect: non-scaling-stroke;
}

/* ---- 线：三类角色 ---- */
.adv-scene .adv-rule,
.adv-scene .adv-rule-dim {
  fill: none;
  stroke: rgba(128, 162, 218, .3);
  stroke-width: .7;
  stroke-linecap: round;
  /* pathLength="1"，dash 1 + gap 1 = 整条实线；配合 dashoffset 1→0 做成
     "从一端长出来"的绘制动画，不需要知道线有多长。 */
  stroke-dasharray: 1 1;
}

.adv-scene .adv-line {
  fill: none;
  stroke: rgba(96, 156, 255, .58);
  stroke-width: .9;
  stroke-linecap: round;
}

.adv-scene .adv-line-out {
  stroke: rgba(130, 184, 255, .62);
}

.adv-scene .adv-line-warn {
  stroke: rgba(255, 132, 100, .7);
}

.adv-scene .adv-line-ok {
  stroke: rgba(74, 228, 162, .68);
}

.adv-scene .adv-line-time {
  stroke: var(--a-blue);
  stroke-width: 1.1;
  stroke-dasharray: 1 1;
}

/* 备案那条弧线始终是虚线（表示"常规但冗长的流程"），所以走淡入而不是绘制，
   否则 dasharray 会在 1 1 和虚线之间跳一次。 */
.adv-scene .adv-line-skip {
  stroke: rgba(150, 178, 220, .38);
  stroke-dasharray: .03 .022;
}

/* 流动线：dasharray 常驻，靠 dashoffset 匀速推进，不做绘制入场（避免两次
   dasharray 切换的跳变）。opacity 淡入独立进行，两者互不覆盖。 */
.adv-scene .adv-flow {
  stroke-dasharray: .18 .12;
  stroke-dashoffset: 0;
}

.adv-scene .adv-flow-fast {
  stroke-dasharray: .12 .1;
  stroke-dashoffset: 0;
}

/* ---- 点 ---- */
.adv-scene .adv-dot {
  fill: var(--a-blue-dim);
}

.adv-scene .adv-dot-ok {
  fill: var(--a-green);
}

.adv-scene .adv-dot-core {
  fill: var(--a-blue-glow);
}

.adv-scene .adv-pulse {
  fill: none;
  stroke: var(--a-blue);
  stroke-width: .9;
  opacity: .5;
}

.adv-scene .adv-spark {
  fill: var(--a-warn);
  opacity: .9;
}

/* ---- 资源格 / 柱 / 通道块 ---- */
.adv-scene .adv-cell {
  fill: rgba(78, 142, 255, .34);
  stroke: rgba(112, 167, 255, .58);
  stroke-width: .4;
}

.adv-scene .adv-bar {
  fill: rgba(78, 142, 255, .44);
  stroke: rgba(118, 172, 255, .66);
  stroke-width: .3;
}

.adv-scene .adv-chan .adv-key {
  fill: rgba(228, 238, 255, .9);
}

.adv-scene .adv-chan rect {
  fill: rgba(26, 38, 58, .95);
  stroke: rgba(126, 164, 220, .4);
  stroke-width: .6;
}

.adv-scene .adv-node circle {
  fill: rgba(120, 152, 204, .5);
  stroke: rgba(8, 13, 21, .9);
  stroke-width: 1.2;
}

.adv-scene .adv-node .adv-node-ok {
  fill: var(--a-green);
}

.adv-scene .adv-shield-bar {
  fill: none;
  stroke: rgba(120, 176, 255, .5);
  stroke-width: 1.1;
  stroke-dasharray: 1 1;
}

.adv-scene .adv-shield-dash {
  fill: none;
  stroke: rgba(96, 156, 255, .8);
  stroke-width: 1.6;
  stroke-dasharray: .03 .035;
}

.adv-scene .adv-skip-mark {
  fill: none;
  stroke: rgba(255, 122, 89, .72);
  stroke-width: 1.3;
  stroke-linecap: round;
}

.adv-scene .adv-rise {
  fill: none;
  stroke: rgba(61, 220, 151, .68);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 压暗层：原本是给实拍照片压边的，场景本身就是深色屏幕，再压会吃掉底部
   状态行。这里关掉（refine.css 在最后加载，所以选择器要压得更具体）。 */
body:not(.market-page) .product-advantages .advantages-stage .advantage-visual .adv-scene ~ .adv-grade {
  opacity: 0;
}

/* ---------------------------------------------------------------------------
   2. 入场动画（每次切到该卡时从头播一遍）
   ------------------------------------------------------------------------ */
@keyframes advFadeUp {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes advFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes advPopIn {
  0%   { opacity: 0; transform: scale(.4); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes advSlideIn {
  from { opacity: 0; transform: translateX(-7px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes advGrowY {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes advDraw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------------------
   3. 循环动画（常驻，周期统一在 1.6s – 4.2s）
   ------------------------------------------------------------------------ */
@keyframes advFlowRun {
  to { stroke-dashoffset: -.3; }
}

@keyframes advFlowRunFast {
  to { stroke-dashoffset: -.22; }
}

@keyframes advBreathe {
  0%, 100% { opacity: .62; }
  50%      { opacity: 1; }
}

@keyframes advDimBreathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: .68; }
}

@keyframes advRing {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(2.4); }
  100% { opacity: 0;   transform: scale(2.4); }
}

@keyframes advSpark {
  0%   { opacity: .9; transform: scale(.3); }
  55%  { opacity: .7; transform: scale(2); }
  100% { opacity: 0;  transform: scale(3.4); }
}

@keyframes advBobY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@keyframes advSweep {
  0%   { opacity: 0; transform: translateX(-6px); }
  35%  { opacity: .9; }
  100% { opacity: 0; transform: translateX(6px); }
}

/* ---------------------------------------------------------------------------
   4. 通用时序：标题 / 副标题 / 状态行 / 基线
   六套场景共用，保证切换时的节奏一致（先抬头，再出数据，最后落结论）
   ------------------------------------------------------------------------ */
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene .adv-key-title {
  animation: advFadeUp .5s var(--a-ease-out) both .05s;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene .adv-sub {
  animation: advFadeUp .5s var(--a-ease-out) both .13s;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene .adv-status {
  animation: advFadeIn .56s var(--a-ease) both .46s;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene .adv-grid {
  animation: advFadeIn .7s var(--a-ease) both;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene .adv-dot-ok {
  animation: advBreathe 2.6s ease-in-out infinite .7s;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene .adv-rule,
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene .adv-rule-dim {
  animation: advDraw .72s var(--a-ease-out) both .3s;
}

/* 流动线：淡入后立刻开始推进，两者分别动 opacity / dashoffset，不打架 */
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene .adv-flow {
  animation:
    advFadeIn .5s var(--a-ease) both .22s,
    advFlowRun 2.4s linear infinite .7s;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene .adv-flow-fast {
  animation:
    advFadeIn .4s var(--a-ease) both .1s,
    advFlowRunFast 1.15s linear infinite .5s;
}

/* ---------------------------------------------------------------------------
   5. 场景一｜自营资源 DIRECT CONTRACT
   语义：机柜 / 电力 / 带宽三行直签单元，逐格验收点亮，到位后常亮微呼吸。
   ------------------------------------------------------------------------ */
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-owned .adv-cell {
  animation:
    advFadeUp .42s var(--a-ease) both calc(120ms + var(--i) * 46ms + var(--r, 0) * 130ms),
    advDimBreathe 3.8s ease-in-out infinite calc(900ms + var(--i) * 90ms + var(--r, 0) * 160ms);
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-owned .adv-key:not(.adv-key-title) {
  animation: advFadeIn .44s var(--a-ease) both calc(60ms + var(--r, 0) * 130ms);
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-owned .adv-num-v {
  animation:
    advFadeIn .5s var(--a-ease) both calc(.52s + var(--r, 0) * 130ms),
    advDimBreathe 3.4s ease-in-out infinite calc(1.05s + var(--r, 0) * 160ms);
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-owned .adv-num {
  animation: advFadeIn .5s var(--a-ease) both calc(.52s + var(--r, 0) * 130ms);
}

/* ---------------------------------------------------------------------------
   6. 场景二｜多线接入 MULTI-LINE
   语义：电信 / 联通 / 移动三路各自从源点汇聚到 BGP 节点，再出一路回源。
   三路同时接通（同一张网），BGP 节点用雷达波表示"在收流量"。
   ------------------------------------------------------------------------ */
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-multiline .adv-flow {
  animation:
    advFadeIn .55s var(--a-ease) both .18s,
    advFlowRun 2.1s linear infinite .6s;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-multiline .adv-pulse {
  animation: advRing 2.6s var(--a-ease-out) infinite .8s;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-multiline .adv-dot {
  animation:
    advPopIn .46s var(--a-ease-out) both calc(.2s + var(--i, 0) * 120ms),
    advBreathe 2.8s ease-in-out infinite calc(1s + var(--i, 0) * 200ms);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-multiline .adv-dot-core {
  animation:
    advPopIn .5s var(--a-ease-out) both .68s,
    advBreathe 2.2s ease-in-out infinite 1.2s;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-multiline .adv-key:not(.adv-key-title) {
  animation: advFadeIn .5s var(--a-ease) both .4s;
}

/* ---------------------------------------------------------------------------
   7. 场景三｜高防清洗 DDoS MITIGATION
   语义：左侧攻击流持续冲击 WAF 屏障，撞上去的位置炸出火花；右侧只有正常
   请求穿过回源。攻击线快、回源线慢，速度差就是"清洗"的读感。
   ------------------------------------------------------------------------ */
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-defense .adv-spark {
  animation: advSpark 1.7s var(--a-ease-out) infinite calc(var(--i) * 260ms);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-defense .adv-shield-bar {
  animation: advDraw .6s var(--a-ease-out) both .15s;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-defense .adv-shield-dash {
  animation:
    advFadeIn .5s var(--a-ease) both .3s,
    advBreathe 2.4s ease-in-out infinite .8s;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-defense .adv-num-v {
  animation:
    advPopIn .52s var(--a-ease-out) both .8s,
    advDimBreathe 3s ease-in-out infinite 1.4s;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-defense .adv-num,
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-defense .adv-key-warn {
  animation: advFadeIn .5s var(--a-ease) both .5s;
}

/* ---------------------------------------------------------------------------
   8. 场景四｜免备案上线 NO ICP FILING
   语义：正常路径要先走一条又长又慢的备案弧线，这里把它划掉；下面是一条
   当天就到位的时间轴，三个节点依次落位，最后一颗变绿。
   ------------------------------------------------------------------------ */
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-nocommit .adv-line-skip {
  animation:
    advFadeIn .6s var(--a-ease) both .1s,
    advSkipFlow 6s linear infinite 1.2s;
}

@keyframes advSkipFlow {
  to { stroke-dashoffset: -.052; }
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-nocommit .adv-skip-mark {
  animation: advPopIn .5s var(--a-ease-out) both .55s;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-nocommit .adv-key-skip {
  animation: advFadeIn .4s var(--a-ease) both .35s;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-nocommit .adv-line-time {
  animation: advDraw 1.15s var(--a-ease-out) both .5s;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-nocommit .adv-node circle {
  animation: advPopIn .46s var(--a-ease-out) both;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-nocommit .adv-node-1 circle { animation-delay: .62s; }
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-nocommit .adv-node-2 circle { animation-delay: .92s; }
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-nocommit .adv-node-3 circle { animation-delay: 1.2s; }

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-nocommit .adv-node text {
  animation: advFadeUp .44s var(--a-ease) both;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-nocommit .adv-node-1 text { animation-delay: .7s; }
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-nocommit .adv-node-2 text { animation-delay: 1s; }
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-nocommit .adv-node-3 text { animation-delay: 1.28s; }

/* 终点节点的绿环：落位之后再开始脉冲，表示"已经对外服务" */
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-nocommit .adv-node-ok {
  animation:
    advPopIn .46s var(--a-ease-out) both 1.2s,
    advBreathe 2.4s ease-in-out infinite 1.7s;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* ---------------------------------------------------------------------------
   9. 场景五｜弹性升降 ONLINE SCALING
   语义：三组资源（带宽 / 防御 / 配置）从基线长起来，越高越"阶梯"；右侧箭头
   持续向上浮动，说明这是可以反复调的动作。
   ------------------------------------------------------------------------ */
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-elastic .adv-bar {
  animation:
    advGrowY .62s var(--a-ease-out) both calc(160ms + var(--i) * 92ms + var(--r, 0) * 150ms),
    advDimBreathe 3.2s ease-in-out infinite calc(1s + var(--i) * 110ms + var(--r, 0) * 140ms);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-elastic .adv-rise {
  animation:
    advFadeIn .5s var(--a-ease) both .5s,
    advBobY 2.4s ease-in-out infinite 1s;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-elastic .adv-key:not(.adv-key-title) {
  animation: advFadeIn .44s var(--a-ease) both calc(.5s + var(--r, 0) * 110ms);
}

/* ---------------------------------------------------------------------------
   10. 场景六｜7×8 响应 SUPPORT CHANNELS
   语义：两条受理通道（工单 / 企业微信）交替亮起，像是两边轮流有单进来；
   下面是一条响应计时条，走到 0.5h 停住，落一个"已响应"。
   ------------------------------------------------------------------------ */
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-support .adv-chan {
  animation: advSlideIn .5s var(--a-ease-out) both;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-support .adv-chan-1 { animation-delay: .12s; }
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-support .adv-chan-2 { animation-delay: .3s; }

/* 通道块交替"有单"：描边亮一下再退回去，两根错开半个周期 */
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-support .adv-chan rect {
  animation: advChanFlash 3.4s ease-in-out infinite;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-support .adv-chan-1 rect { animation-delay: .9s; }
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-support .adv-chan-2 rect { animation-delay: 2.6s; }

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-support .adv-chan .adv-dot {
  animation: advBreathe 3.4s ease-in-out infinite;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-support .adv-chan-1 .adv-dot { animation-delay: .9s; }
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-support .adv-chan-2 .adv-dot { animation-delay: 2.6s; }

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-support .adv-line-time {
  animation: advDraw .95s var(--a-ease-out) both .55s;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-support .adv-arrive {
  animation:
    advPopIn .46s var(--a-ease-out) both 1.35s,
    advBreathe 2.2s ease-in-out infinite 1.9s;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-support .adv-num-sm,
.product-advantages.is-scene-live .advantage-visual.is-active .adv-scene-support .adv-key-ok {
  animation: advFadeUp .46s var(--a-ease) both 1.4s;
}

@keyframes advChanFlash {
  0%, 100% { stroke: rgba(120, 152, 204, .26); }
  14%      { stroke: rgba(120, 176, 255, .82); }
  30%      { stroke: rgba(120, 152, 204, .26); }
}

/* ---------------------------------------------------------------------------
   11. 降级：减少动态效果
   静态态本身就是完整画面，这里只要把动画全部拿掉即可。
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .product-advantages .adv-scene,
  .product-advantages .adv-scene * {
    animation: none !important;
  }

  .adv-scene .adv-line-time,
  .adv-scene .adv-rule,
  .adv-scene .adv-rule-dim,
  .adv-scene .adv-shield-bar,
  .adv-scene .adv-line-skip {
    stroke-dashoffset: 0 !important;
  }

  .adv-scene .adv-bar,
  .adv-scene .adv-cell,
  .adv-scene .adv-pulse {
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   12. 窄屏：舞台缩到 400–500px 宽，场景里的 6.4px 小字会被压到 3px 以下，
   变成噪点。这里把最外层的两行说明藏掉，只留图形语言（图形在缩略尺寸下
   反而是最清楚的），图签本来就在 ≤960 收起。
   ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .adv-scene .adv-status,
  .adv-scene .adv-key-warn,
  .adv-scene .adv-key-ok {
    display: none;
  }
}