/* ==========================================================================
   转场（马赛克 + 放射线）/ 3D 架构 / 技能地形 / 联系区
   ========================================================================== */

/* 进入/退出项目详情：以点击位置为中心的马赛克扫过，期间切换内容 */
.mosaic { position: fixed; inset: 0; z-index: 120; display: grid; pointer-events: none; }
.mosaic i { background: var(--ink); box-shadow: inset 0 0 0 1px rgba(223, 166, 106, .22); opacity: 0; transition: opacity .17s linear; transition-delay: var(--d, 0ms); }
.mosaic.in i { opacity: 1; }
.burst { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 121; pointer-events: none; }
.burst line { stroke: var(--gold); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1; animation: burst .75s var(--ease) both; }
@keyframes burst { from { stroke-dashoffset: 1; opacity: 1; } 70% { opacity: 1; } to { stroke-dashoffset: -1; opacity: 0; } }

/* 3D 架构：层沿深度分离、整体斜放；连线画在不变换的覆盖层上，说明文字保持平面 */
.arch-stage { position: relative; perspective: 1500px; overflow: hidden; }
.arch-layers { position: relative; z-index: 1; transform-style: preserve-3d; transition: transform .9s var(--ease), margin .9s var(--ease); }
.arch-layers.is-spread { transform: rotateX(46deg) rotateZ(-18deg) scale(.9); margin: 70px 0 96px; gap: 48px; }
.arch-layer { transform-style: preserve-3d; transition: transform .9s var(--ease), border-color .3s; background: rgba(21, 28, 34, .92); }
.arch-layers.is-spread .arch-layer { transform: translateZ(calc(var(--z, 0) * 1px)); box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .6); }
.anode { background: var(--ink); }
.arch-link-svg { z-index: 0; transition: opacity .25s; }
.arch-stage.moving .arch-link-svg { opacity: 0; }
.arch-link-svg path { opacity: .22; stroke-width: 1; }
.arch-link-svg path.on { opacity: .95; stroke-width: 1.6; }
.reduce-motion .arch-layers, .reduce-motion .arch-layer { transition: none; }

/* 技能区：背景是一片被指针“牵引”的透视网格 */
#skills { position: relative; overflow: hidden; }
.terrain-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
#skills .sec-inner { position: relative; z-index: 1; }

/* 联系区：折叠 L 用描边画出 */
.big-l { overflow: visible; width: clamp(54px, 8vw, 96px); height: clamp(72px, 10.5vw, 128px); margin-bottom: 36px; }
.big-l::before, .big-l::after { display: none; }
.big-l path { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 1; }
.contact .reveal.in .big-l path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.3s var(--ease) .15s; }
.reduce-motion .big-l path { stroke-dashoffset: 0; transition: none; }
.contact::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(11, 16, 21, .94) 0%, rgba(11, 16, 21, .82) 38%, transparent 72%); }
.contact-canvas { opacity: 1; }

@media (max-width: 820px) {
  .arch-layers.is-spread { transform: rotateX(46deg) rotateZ(-14deg) scale(.78); margin: 50px 0 70px; }
  .mosaic i { box-shadow: none; }
}