/* ============================================================
   HALCYON 爆炸图组件样式
   用法：<div class="explode-view" data-machine="cz" data-labels='{"coil":"开卷机"}'>
         <div class="explode-canvas"></div>
         <button class="explode-btn" type="button">💥 拆开查看</button>
         </div>
   ============================================================ */
.explode-view {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: #fafafc;
}
.explode-canvas { position: relative; width: 100%; aspect-ratio: 800/520; }
.explode-canvas svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.explode-canvas .epart { transition: transform 0.9s cubic-bezier(0.34, 1.2, 0.4, 1); transform-origin: 400px 260px; will-change: transform; }
.explode-view.exploded .epart-base    { transform: translate(0px, 90px)  scale(1.02); }
.explode-view.exploded .epart-roll    { transform: translate(0px, -70px) scale(1.05); }
.explode-view.exploded .epart-rolltop { transform: translate(0px, -120px) scale(1.08); }
.explode-view.exploded .epart-control { transform: translate(70px, -40px) scale(1.04); }
.explode-view.exploded .epart-coil    { transform: translate(-90px, 40px) scale(1.03); }
.explode-view.exploded .epart-out     { transform: translate(-60px, -110px) scale(1.05); }
.explode-view.exploded .epart-feed    { transform: translate(-140px, -10px) scale(1.03); }
.explode-canvas .elabel { opacity: 0; transition: opacity 0.4s ease 0.5s; pointer-events: none; }
.explode-view.exploded .elabel { opacity: 1; }
.explode-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-top: 1px solid var(--border); background: #fff;
}
.explode-tip { font-size: 12.5px; color: var(--text-3); }
.explode-btn {
  padding: 8px 18px; border-radius: 980px; border: 0; cursor: pointer;
  font-size: 13.5px; font-weight: 600; background: var(--blue); color: #fff;
  transition: background .2s;
}
.explode-btn:hover { background: #0077ed; }
.explode-btn.reset { background: #e8e8ed; color: #1d1d1f; }
.explode-btn.reset:hover { background: #dcdce1; }