/* ============================================================
   定位筆拆解頁
   ============================================================ */
.explode { position: relative; }
.x-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: radial-gradient(ellipse 50% 60% at 50% 50%, #26252a 0%, var(--night) 70%);
}
#xCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.x-loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 15px; color: var(--mist); transition: opacity .4s;
}
.x-loading span { font-family: var(--font-latin); font-variant-numeric: tabular-nums; color: var(--oat); }
.x-loading.is-done { opacity: 0; pointer-events: none; }

/* 段落：跟著頁面自然捲動，疊在 3D 畫面上 */
.x-chapters { position: relative; margin-top: -100svh; pointer-events: none; }
.chapter {
  height: 100svh; display: flex; align-items: center;
  padding: 0 calc(var(--gutter) + 40px) 0 var(--gutter);
  max-width: 1360px; margin: 0 auto;
}
.chapter[data-side="right"] { justify-content: flex-end; }
.chapter-card { max-width: 380px; pointer-events: auto; will-change: opacity; }
.chapter h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; line-height: 1.25; }
.chapter p { margin-top: 14px; color: rgba(239, 233, 225, .78); }
.x-title { margin-top: 22px; font-size: clamp(52px, 7.4vw, 104px); font-weight: 900; line-height: 1.05; }
.x-tagline { font-size: clamp(22px, 2.4vw, 30px); color: var(--oat) !important; font-weight: 500; margin-top: 10px !important; }
.x-cta { margin-top: 26px; }
.x-hint { font-size: 15px; margin-top: 22px !important; }
.x-hint::after {
  content: ""; display: block; width: 1.5px; height: 44px; margin-top: 18px;
  background: linear-gradient(var(--oat), transparent);
  animation: hint 2s var(--ease-out) infinite;
}
@keyframes hint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.x-swatches { margin-top: 22px; }
.chapter .eb-form { margin-top: 26px; }

/* 零件標註 */
.x-callouts { position: absolute; inset: 0; pointer-events: none; }
.callout {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center; gap: 0;
  opacity: 0; transition: opacity .35s;
  font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--paper);
}
.callout.is-on { opacity: 1; }
.callout .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--oat); box-shadow: 0 0 0 4px rgba(201, 180, 155, .25); flex: none; }
.callout .line { width: 56px; height: 1px; background: rgba(201, 180, 155, .7); flex: none; }
.callout .label { padding: 4px 10px; border-radius: 999px; background: rgba(18, 18, 20, .7); border: 1px solid rgba(201, 180, 155, .4); }
.callout.to-left { flex-direction: row-reverse; }
.callout { transform: translate(var(--x, 0), var(--y, 0)) translate(-4.5px, -50%); }
.callout.to-left { transform: translate(var(--x, 0), var(--y, 0)) translate(calc(-100% + 4.5px), -50%); }

/* 右側段落指示 */
.x-dots {
  position: fixed; right: max(14px, calc(var(--gutter) - 20px)); top: 50%; transform: translateY(-50%); z-index: 20;
  display: flex; flex-direction: column; gap: 6px;
  transition: opacity .3s;
}
.x-dots.is-hidden { opacity: 0; pointer-events: none; }
.x-dots button {
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.x-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(239, 233, 225, .3); transition: transform .3s var(--ease-out), background-color .3s; }
.x-dots button[aria-current="step"]::before { background: var(--oat); transform: scale(1.5); }
.x-dots button:hover::before { background: var(--paper); }

/* 載入失敗或不支援 WebGL 時 */
.x-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 80px var(--gutter); }
.x-fallback img { width: min(900px, 100%); border-radius: 16px; }

@media (max-width: 760px) {
  .chapter, .chapter[data-side="right"] { align-items: flex-end; justify-content: flex-start; padding: 0 var(--gutter) 9svh; }
  .chapter-card {
    max-width: none; width: 100%;
    background: rgba(18, 18, 20, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(239, 233, 225, .08); border-radius: 18px; padding: 18px 20px;
  }
  .chapter:first-child .chapter-card { background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }
  .chapter p { margin-top: 8px; font-size: 15px; }
  .x-cta { margin-top: 18px; }
  .x-hint { margin-top: 14px !important; }
  .chapter .eb-form { margin-top: 16px; }
  .chapter .eb-row { flex-direction: row; }
  .chapter .form-msg:empty { display: none; }
  .x-hint::after { height: 28px; }
  .callout { font-size: 12px; }
  .callout .line { width: 28px; }
  .x-dots { right: 4px; }
  .x-dots button { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .x-hint::after { animation: none; transform: none; } }
.chapter:first-child .chapter-card { max-width: 620px; }