/* 平台页专用样式（几何位置由 pages/platform.js 按视口计算） */

/* 世界层四层：底层变形 → DOM 方块 → 飞行层变形 → 飞行层标签 */
.world > svg.fly { pointer-events: none; }

/* 跨页胶囊（真玻璃） */
.cap { z-index: 5; pointer-events: none; overflow: hidden; border-radius: 999px; }
.cap-head { left: 39vw; top: calc(46vh - 3.85vw); width: 22vw; height: 7.7vw; }
.cap-tail { opacity: 0; visibility: hidden; }
.cap.glass-true {
  -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.06); backdrop-filter: blur(18px) saturate(190%) brightness(1.06);
  background: linear-gradient(165deg, rgba(255,255,255,.52), rgba(255,255,255,.18) 52%, rgba(255,246,232,.38));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.75), inset 0 -1px 0 rgba(255,153,0,.25), 0 24px 60px -24px rgba(150,80,10,.4);
}
.cap-flow { position: absolute; left: 0; top: 0; width: 300%; height: 100%; opacity: .2; mix-blend-mode: soft-light;
  background: linear-gradient(90deg, #FF9900, #407AAA 16.6%, #587B3B 33.3%, #A85F34 50%, #FF9900 66.6%, #407AAA 83.3%, #587B3B 100%); }
.cap-gl { position: absolute; left: 6%; right: 6%; top: 7%; height: 44%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0)); }

/* 文字保护区 */
.tz-0 { left: 6vw; top: 11vh; width: 60vw; opacity: 1; }
.tz-0 .t0 { font-size: clamp(56px, 5vw, 80px); line-height: 1.12; letter-spacing: -.025em; }
.tz-0 .desc { margin-top: 18px; font-size: 20px; line-height: 1.6; color: var(--ink-2); }
.tz-1 { left: 6vw; top: 11vh; width: 34vw; }
.tz-2, .tz-3, .tz-4 { left: 6vw; top: 10vh; width: 88vw; }
.tz-2 h2.s, .tz-3 h2.s, .tz-4 h2.s, .tz-6 h2.s { font-size: clamp(40px, 3.1vw, 54px); }
.tz-5 h2.s { font-size: clamp(34px, 2.7vw, 48px); max-width: 48vw; }
.tz-2 p.desc, .tz-3 p.desc, .tz-4 p.desc { margin-top: 8px; }
.tz-5 p.desc { max-width: none; flex: 1; }
.tz.row { left: 6vw; top: 10vh; width: 88vw; display: flex; align-items: baseline; gap: 28px; }
.tz-7 { left: 0; right: 0; top: 0; text-align: center; }
.tz-7 .enter {
  position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 22px; border-radius: 28px; font: 600 20px/1.2 var(--f-cn); color: var(--ink); pointer-events: auto;
  background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9), var(--sh-1);
}
.tz-7 .enter svg { width: 40px; height: 16px; color: var(--c-med-ink); overflow: visible; }
.tz-7 .enter .ar-l { transition: d .4s var(--ease-out); }
.tz-7 .enter .ar-h { transition: transform .4s var(--ease-out); }
.tz-7 .enter:hover .ar-l { d: path("M2 8H38"); }
.tz-7 .enter:hover .ar-h { transform: translateX(8px); }

/* 变形层标签 */
.m-lab { font: 700 20px/1.1 var(--f-cn); color: var(--ink); white-space: nowrap; opacity: 0; letter-spacing: .01em; }
.m-lab.core-l { font-size: 20px; }
.m-lab.core-l b { font-family: var(--f-en); letter-spacing: .04em; margin-right: 6px; }
.m-lab.seg-l { font-weight: 600; }
.m-lab.card-l { width: 150px; white-space: normal; text-align: left; }
.m-lab.card-l .ic { display: block; width: 22px; height: 22px; color: var(--c-med-ink); margin-bottom: 4px; }
.m-lab.card-l .ic svg { width: 100%; height: 100%; }
.m-lab.card-l b { display: block; font: 700 18px/1.25 var(--f-cn); }
.m-lab.card-l small { display: block; font: 500 14px/1.4 var(--f-ui); color: var(--ink-3); }
.m-lab.pack-l { font-size: 17px; display: grid; }
.m-lab.pack-l > span { grid-area: 1 / 1; text-align: center; }
.m-lab.chip-l { font: 600 15px/1 var(--f-cn); display: flex; align-items: center; gap: 8px; }
.m-lab.chip-l i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.st-range { font: 500 15px/1.2 var(--f-cn); color: var(--ink-3); white-space: nowrap; transform: translateX(-50%); opacity: 0; }
.flag { display: flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 17px; font: 600 15px/1 var(--f-cn); color: var(--ink); white-space: nowrap; transform: translateX(-50%); opacity: 0; }
.flag::after { content: ""; position: absolute; left: 50%; top: 34px; width: 1.5px; height: var(--pole, 10px); margin-left: -.75px; background: linear-gradient(180deg, color-mix(in oklch, var(--c) 70%, white), color-mix(in oklch, var(--c) 20%, transparent)); }
.flag i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: 8px; }

/* 矩阵：行名、方块、跨段条 */
.row-l { display: flex; align-items: center; gap: 10px; font: 700 20px/1.25 var(--f-cn); color: var(--ink); opacity: 0; max-width: 11vw; }
.row-l i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c); box-shadow: 0 0 0 4px color-mix(in oklch, var(--c) 20%, transparent); }
.world .overlay .tile { opacity: 0; visibility: hidden; }
.tile.pl { gap: 4px; padding: 0 10px; }
.tile.pl .t-code { font-size: 22px; }
.tile.pl .t-cn { font-size: 20px; line-height: 1.2; white-space: nowrap; }
.tile.pl.wide { display: block; }
.tile.pl.wide .pt { position: absolute; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; }
.tile.pl.wide .ps { position: absolute; top: 50%; transform: translate(-50%, -50%); font: 500 20px/1.2 var(--f-cn); color: var(--ink-2); white-space: nowrap; }
.tile.arm { display: block; padding: 0; box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--c) 70%, white), inset 0 1px 0 rgba(255,255,255,.9), var(--sh-1); }
.tile.arm .t-arm { position: absolute; top: 50%; transform: translate(-50%, -50%); font: 500 20px/1 var(--f-cn); color: var(--ink-2); white-space: nowrap; }
.badge { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 9px; border-radius: 13px; opacity: 0; white-space: nowrap; }
.badge i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.badge .v { position: relative; display: grid; margin-left: 3px; font: 700 14px/1 var(--f-en); color: var(--ink); }
.badge .v > span { grid-area: 1 / 1; }

/* 工件图例（屏幕层） */
.legend { display: grid; gap: 14px; opacity: 0; pointer-events: auto; }
.legend h4 { font: 700 15px/1.2 var(--f-cn); letter-spacing: .12em; color: var(--ink-3); margin-bottom: 2px; }
.legend .li { width: 100%; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; text-align: left; font: 600 17px/1.3 var(--f-cn); color: var(--ink); background: none; cursor: pointer; appearance: none; }
.legend .li .ic { width: 26px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 7px; color: var(--c); background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1.5px color-mix(in oklch, var(--c) 55%, white); }
.legend .li .ic svg { width: 17px; height: 17px; }
.legend .li:hover .ic, .legend .li.is-on .ic { box-shadow: inset 0 0 0 2px var(--c), 0 0 0 3px color-mix(in oklch, var(--c) 15%, transparent); }
.legend .li:focus-visible { outline: 2px solid color-mix(in oklch, var(--c) 65%, white); outline-offset: 3px; border-radius: 8px; }
.r-lab { display: none; font: 600 14px/1 var(--f-cn); color: var(--ink); white-space: nowrap; padding: 6px 10px; border-radius: 12px; transform: translate(-50%, -50%); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--c) 50%, white), var(--sh-1); background: rgba(255,255,255,.96); }
.world.hov .r-lab.on { display: block; }

/* 外部码头、AEGIS 线框 */
.screen .dock { opacity: 0; }
.aegis-l { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 15px; font: 700 15px/1 var(--f-ui); color: #3E4A5E; white-space: nowrap; opacity: 0; background: rgba(255,255,255,.94); box-shadow: inset 0 0 0 1.5px rgba(82,98,122,.7), var(--sh-1); }
.aegis-l b { font-family: var(--f-en); letter-spacing: .06em; }
.tick-l { display: flex; align-items: center; gap: 8px; font: 600 15px/1.25 var(--f-cn); color: var(--ink-2); white-space: nowrap; opacity: 0; transform: translateY(-50%); }
.tick-l b { font: 700 15px/1 var(--f-en); color: #52627A; }

/* 开场：中枢核鼓起（只由开场驱动） */
.core-in { z-index: 4; border-radius: 50%; opacity: 0; visibility: hidden; pointer-events: none;
  background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.95), rgba(255,214,150,.75) 38%, rgba(255,153,0,.7) 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1.5px rgba(255,180,60,.6), 0 20px 50px -20px rgba(190,100,0,.5); }

/* 悬停方块：只保留它的进出路线 */
svg.fly.hov path.rt:not(.on) { stroke-opacity: .06; }
svg.fly.hov g.tk:not(.on) { opacity: .06; }
svg.fly.hov path.rt.on { stroke-opacity: 1; stroke-width: 3.5px; }
