/* 3D 效果预览：地图透视倾斜、节点浮起，入场升起、闲时轻摆、报价跳动、利润连线流动 */
@property --rx { syntax: '<angle>'; inherits: false; initial-value: 10deg; }
@property --ry { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --sway { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.map-wrap { perspective: 2200px; perspective-origin: 50% 40%; padding-left: 4px; padding-right: 4px; }
.map-sizer {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + var(--sway)));
  transition: --rx .3s ease-out, --ry .3s ease-out;
  animation: map-in 1.1s cubic-bezier(.2, .8, .2, 1) backwards, map-sway 9s ease-in-out 1.1s infinite alternate;
  background: none; box-shadow: none; /* 不要底板，节点和连线直接铺在页面上 */
}
.map-wrap:hover .map-sizer { animation-play-state: running, paused; }
@keyframes map-in { from { --rx: 60deg; opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
@keyframes map-sway { from { --sway: -2deg; } to { --sway: 2deg; } }

.map-canvas { transform-style: preserve-3d; }
.edges { transform: translateZ(1px); }
.edges path { filter: drop-shadow(0 1px 1px #0002); }
.edges path.gain, .edges path.loss { stroke-dasharray: 6 4; animation: edge-flow 1.2s linear infinite; }
@keyframes edge-flow { to { stroke-dashoffset: -10; } }

.node {
  transform: translateZ(18px); transform-style: preserve-3d;
  transition: transform .25s, background .4s;
  animation: node-in .6s cubic-bezier(.2, .9, .3, 1.3) backwards; animation-delay: var(--d, 0s);
}
@keyframes node-in { from { transform: translateZ(90px) scale(.6); opacity: 0; } }
.node .lb {
  box-shadow: 0 1px 0 #fff6 inset, 0 3px 0 color-mix(in srgb, var(--tint) 70%, #000), 0 8px 14px -6px #0006;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 85%, #fff), var(--tint));
}
.node:hover { transform: translateZ(40px) scale(1.4); z-index: 50; background: var(--card); box-shadow: 0 12px 30px -8px #0009; }
.node:hover .lb { box-shadow: 0 4px 0 color-mix(in srgb, var(--strong) 60%, #000), 0 16px 24px -8px #0008; }
.node.flash-up .lb, .node.flash-down .lb { animation: lb-bump .8s ease-out; }
@keyframes lb-bump { 30% { transform: translateZ(24px) rotateX(-14deg); } }
.node .chg.up { text-shadow: 0 0 10px color-mix(in srgb, var(--up) 60%, transparent); }
.node .chg.down { text-shadow: 0 0 10px color-mix(in srgb, var(--down) 60%, transparent); }

/* 点节点：节点先弹起，详情窗从节点位置立体翻出 */
.node.pressed { transform: translateZ(70px) scale(1.5); z-index: 50; transition: transform .18s; }
.sheet-body { backface-visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .map-sizer, .node, .node .lb, .edges path { animation: none !important; }
}

/* 列表、利润页：卡片做成有厚度的立体块，悬停浮起，切换时依次翻入 */
html, body { overflow-x: hidden; }
#board, #profit {
  max-width: none; padding-left: 12px; padding-right: 12px;
}
#board { grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); align-items: start; }
#profit .psec, #profit .pgrid { transform-style: preserve-3d; }
#profit .pgrid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.group, .pcard {
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)) translateZ(var(--tz, 0px));
  transition: transform .25s ease-out, box-shadow .25s;
  background-image: linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent), transparent 40%);
  box-shadow: 0 1px 0 #fff8 inset, 0 6px 0 color-mix(in srgb, var(--card) 78%, #000),
    0 24px 40px -14px #0007;
}
.group:hover, .pcard:hover { --tz: 24px; box-shadow: 0 1px 0 #fff8 inset, 0 8px 0 color-mix(in srgb, var(--card) 72%, #000), 0 40px 60px -20px #0008; }
.tiles { transform-style: preserve-3d; }
.tile {
  transform: translateZ(10px); transition: transform .2s, background .4s;
  background-image: linear-gradient(180deg, color-mix(in srgb, #fff 25%, transparent), transparent);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--tint) 65%, #000), 0 8px 14px -6px #0006;
}
.tile:hover { transform: translateZ(30px) scale(1.04); }
.tile.pressed { transform: translateZ(50px) scale(1.08); }
.pcard.pressed { --tz: 50px; }
.tile.flash-up, .tile.flash-down { animation: lb-bump .8s ease-out; }
.enter .group, .enter .pcard, .enter .psec h3 { animation: card-in .7s cubic-bezier(.2, .9, .3, 1.15) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes card-in { from { transform: perspective(1000px) rotateX(-50deg) translateY(30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .group, .pcard, .tile { animation: none !important; transition: none; }
}