/* =========================================================
   JBK — CURSOR.CSS  互動式游標
   -----------------------------------------------------------------
   設計：中心一個墨點（1:1 精準跟隨）＋ 外層一個金色六角形（緩動跟隨）。
   六角形取自品牌標記，與開場動畫的 hex 同一個形狀。

   只在「有精確指標的裝置」啟用（見 cursor.js）。觸控裝置不會載入，
   因為手指沒有 hover，畫一個跟不上的圈只會變成殘影。
   ========================================================= */

/* 自訂游標啟用時才隱藏系統游標。這個 class 由 JS 加在 <html> 上 ——
   JS 沒跑、或裝置不支援時，一切維持原生行為，不會變成「沒有游標」。 */
.jbk-cursor-on,
.jbk-cursor-on * { cursor: none !important; }

/* 文字輸入例外：打字時沒有 I 型游標會完全看不出插入點在哪。
   這類元素一律還給系統游標，自訂游標同時隱藏（見下方 data-cursor="text"）。 */
.jbk-cursor-on input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.jbk-cursor-on textarea,
.jbk-cursor-on [contenteditable="true"] { cursor: text !important; }

.jbk-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 100000;          /* 一般情況下的層級（聊天機器人、開場動畫之上） */
  pointer-events: none;     /* 絕對不能攔截任何點擊 */
  opacity: 0;
  transition: opacity .25s ease;
}

/* 游標是以 popover 的身分進入 top layer 的（才能蓋在 <dialog> modal 之上）。
   瀏覽器對 [popover] 有一整套預設樣式 —— 置中、邊框、背景、fit-content、
   display:none —— 不重置的話游標會變成畫面正中央一個白色方框。 */
.jbk-cursor[popover] {
  inset: auto;
  top: 0; left: 0;
  width: auto; height: auto;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  overflow: visible;
  display: block;           /* [popover] 預設 display:none，開啟後才顯示 */
}
.jbk-cursor[popover]:not(:popover-open) { display: none; }
.jbk-cursor.is-ready { opacity: 1; }
/* 滑出瀏覽器視窗時整組淡出，不要在邊緣留一個卡住的圈 */
.jbk-cursor.is-out { opacity: 0; }

.jbk-cursor__dot,
.jbk-cursor__hex {
  position: absolute;
  top: 0; left: 0;
  will-change: transform;
}

/* ---- 中心墨點：1:1 跟隨，負責「精準」 ---- */
.jbk-cursor__dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--ink, #0A0A0A);
  transition: width .22s var(--ease, ease), height .22s var(--ease, ease),
              margin .22s var(--ease, ease), background .22s ease, opacity .2s ease;
}

/* ---- 外層六角形：緩動跟隨，負責「個性」 ---- */
.jbk-cursor__hex {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  transition: width .3s var(--ease, ease), height .3s var(--ease, ease),
              margin .3s var(--ease, ease), opacity .2s ease;
}
.jbk-cursor__hex svg { display: block; width: 100%; height: 100%; overflow: visible; }
.jbk-cursor__hex polygon {
  fill: none;
  stroke: var(--gold, #B89968);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;   /* 放大時線條不跟著變粗 */
  transition: stroke-width .3s ease, fill .3s ease, stroke .3s ease;
}

/* ---- 可點擊：六角形放大並淡淡填色，墨點縮小讓位 ---- */
.jbk-cursor[data-state="link"] .jbk-cursor__hex { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
.jbk-cursor[data-state="link"] .jbk-cursor__hex polygon { fill: rgba(184,153,104,0.14); stroke-width: 4; }
.jbk-cursor[data-state="link"] .jbk-cursor__dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; }

/* ---- 商品圖：再放大並顯示提示字 ---- */
.jbk-cursor[data-state="view"] .jbk-cursor__hex { width: 92px; height: 92px; margin: -46px 0 0 -46px; }
.jbk-cursor[data-state="view"] .jbk-cursor__hex polygon { fill: rgba(10,10,10,0.78); stroke: var(--champagne, #D4BC8A); }
.jbk-cursor[data-state="view"] .jbk-cursor__dot { opacity: 0; }

.jbk-cursor__label {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  font-family: var(--ff-body, sans-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--cream, #FAFAF7);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease;
}
.jbk-cursor[data-state="view"] .jbk-cursor__label { opacity: 1; }

/* ---- 按下：整體內縮，給一個觸覺般的回饋 ---- */
.jbk-cursor[data-state="down"] .jbk-cursor__hex { width: 30px; height: 30px; margin: -15px 0 0 -15px; }

/* ---- 文字輸入：自訂游標完全隱藏，交還系統的 I 型游標 ---- */
.jbk-cursor[data-state="text"] { opacity: 0; }

/* 減少動態偏好：保留造型但拿掉所有過場與緩動（JS 端也會關掉跟隨的延遲） */
@media (prefers-reduced-motion: reduce) {
  .jbk-cursor,
  .jbk-cursor__dot,
  .jbk-cursor__hex,
  .jbk-cursor__hex polygon,
  .jbk-cursor__label { transition: none !important; }
}

/* 觸控或無精確指標的裝置：即使 JS 誤判也不留任何痕跡 */
@media (pointer: coarse), (hover: none) {
  .jbk-cursor { display: none !important; }
  .jbk-cursor-on, .jbk-cursor-on * { cursor: auto !important; }
}