/* ═══════════════════════════════════════════════════════
   KEYFRAMES.hk — 互動效果樣式層（fx.css）
   ───────────────────────────────────────────────────────
   呢個檔提供 kf-fx.js 全部互動效果嘅 CSS，並**自動適配**
   兩套設計：
     · 深色 kf.css 頁      · 淺色 shared.css 頁
   品牌色一致（#b68c52），只有光暈濃度同過場底色需要微調。

   用法：<head> 加<link rel="stylesheet" href="<base>/assets/fx.css">
   然後載入 kf-fx.js。

   ⚠️ 所有顏色一律行 CSS 變數，唔好寫死 hex，
      否則淺色頁會出現睇唔到嘅深色光暈。

   ───────────────────────────────────────────────────────
   2026-10-08 更新：
   · **頁面轉場（PTX）已移除** —— Kief 決定唔要轉場效果。
     相關 script（ptx.js）、CSS、面板全部移除，
     跳頁而家係原生即時跳轉，唔會再有遮罩擋住畫面。
   · 順手修正一個嚴重 bug：舊版檔案內殘留一個多餘的 `}`，
     令由該處開始嘅 CSS 解析異常（效果一直唔穩嘅原因之一）。
     今次全部重寫，結構乾淨。
   ═══════════════════════════════════════════════════════ */

/* ── 主題變數 ── */
:root {
  /* 版本號：改版時更新呢行（同步 kf-version.js）*/
  --kf-version:    0.7;

  --fx-accent:      #b68c52;
  --fx-accent-rgb:  182, 140, 82;

  /* 光暈濃度：深色頁可以濃啲 */
  --fx-glow-core:   .16;
  --fx-glow-mid:    .07;

  /* 過場底色（深色頁） */
  --fx-curtain-bg:  #12100e;
}


/* ── 版本徽章（右下角小標記）──
   方便一眼睇到線上跑緊邊個版本。
   撳 ↻ 會清 storage + 重新載入（解決 cache 問題）。 */
.kf-version-badge{
  position:fixed;bottom:14px;right:14px;z-index:9998;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 8px 6px 11px;
  border:1px solid rgba(var(--fx-accent-rgb), .35);
  border-radius:999px;
  background:rgba(14,13,11,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--fx-accent);
  letter-spacing:.08em;
  box-shadow:0 6px 22px rgba(0,0,0,.4);
  user-select:none;
}
.kf-v-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--fx-accent);
  box-shadow:0 0 7px var(--fx-accent);
}
.kf-v-clear{
  all:unset;cursor:pointer;
  width:17px;height:17px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  font-size:12px;line-height:1;
  color:var(--fx-accent);
  opacity:.55;
  transition:opacity .2s,background .2s;
}
.kf-v-clear:hover{opacity:1;background:rgba(var(--fx-accent-rgb),.2)}
.light-theme .kf-version-badge{
  background:rgba(255,255,255,.88);
  box-shadow:0 4px 16px rgba(0,0,0,.12);
}

/* ── 效果 1：自訂游標（光暈 + 點） ──
   定位全靠 transform（JS 每幀寫入 translate3d(x,y,0)），
   margin 負值令中心對準游標座標，唔好改成 top/left。 */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 420px; height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(var(--fx-accent-rgb), var(--fx-glow-core)) 0%,
    rgba(var(--fx-accent-rgb), var(--fx-glow-mid))  38%,
    rgba(var(--fx-accent-rgb), 0)                68%);
  transition: opacity .45s ease;
  will-change: transform;
}
.cursor-glow.on { opacity: 1; }

.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: var(--fx-accent);
  box-shadow: 0 0 10px rgba(var(--fx-accent-rgb), .85);
  transition: opacity .3s ease,
              width .28s cubic-bezier(.16,.84,.44,1),
              height .28s cubic-bezier(.16,.84,.44,1),
              margin .28s cubic-bezier(.16,.84,.44,1),
              background .25s;
  will-change: transform;
}
.cursor-dot.on { opacity: 1; }

/* hover 互動元素：點變成金色圈 */
.cursor-dot.big {
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  background: transparent;
  border: 1.5px solid var(--fx-accent);
  box-shadow: 0 0 18px rgba(var(--fx-accent-rgb), .55);
}

/* ── 效果 1b：裝置光暈 AURA（手機 / 觸控都見到）───
   手指劃過就喺嗰點亮起柔和金色圓光，放開慢慢淡出。 */
.fx-aura {
  position: fixed;
  top: 0; left: 0;
  width: 340px; height: 340px;
  margin: -170px 0 0 -170px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(var(--fx-accent-rgb), .20) 0%,
    rgba(var(--fx-accent-rgb), .11) 30%,
    rgba(var(--fx-accent-rgb), .04) 55%,
    rgba(var(--fx-accent-rgb), 0)   72%);
  will-change: transform, opacity;
  transition: opacity .32s ease;
}
.fx-aura.on { opacity: 1; }

/* ── 效果 1c：點擊漣漪 RIPPLE ──
   撳任何位置出一圈金色水波散開。 */
.fx-ripple {
  position: fixed;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  border: 1.5px solid var(--fx-accent);
  animation: fx-ripple-out .85s cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes fx-ripple-out {
  0%   { transform: scale(1);  opacity: .85; }
  100% { transform: scale(28); opacity: 0; }
}

/* ── 效果 1d：元素閃光（hover 時金色描邊亮起）── */
.fx-flash { position: relative; transition: box-shadow .3s ease, border-color .3s ease; }
.fx-flash::after {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 1px var(--fx-accent),
              0 0 18px rgba(var(--fx-accent-rgb), .55),
              inset 0 0 22px rgba(var(--fx-accent-rgb), .14);
  transition: opacity .3s ease;
}
.fx-flash:hover::after,
.fx-flash:focus-within::after { opacity: 1; }

/* ── 效果 3：磁吸按鈕 ── */
.fx-magnetic {
  transform: translate(0, 0);
  transition: transform .28s cubic-bezier(.16,.84,.44,1);
  will-change: transform;
}

/* ── 效果 4：卡片 3D 傾斜 ── */
.tilt {
  transform: perspective(1000px) rotateX(0) rotateY(0);
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.16,.84,.44,1),
              box-shadow .45s;
  will-change: transform;
}
.tilt:hover {
  box-shadow: 0 26px 66px rgba(0, 0, 0, .55),
              0 0 0 1px rgba(var(--fx-accent-rgb), .22);
}

/* ── 效果 6：頁面載入過場（只喺本站首頁出現一次）── */
.page-curtain {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--fx-curtain-bg);
  display: flex; align-items: center; justify-content: center;
  animation: fx-curtain-up .95s cubic-bezier(.76,0,.24,1) .15s both;
  pointer-events: none;
}
.page-curtain::after {
  content: 'KEYFRAMES';
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  letter-spacing: 8px;
  color: var(--fx-accent);
  animation: fx-curtain-fade .5s ease .5s both;
}
@keyframes fx-curtain-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
@keyframes fx-curtain-fade {
  0%   { opacity: 0; }
  40%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ── 效果 7：表單 focus 光暈 ── */
.focused,
label.focused,
.form-group.focused,
.field.focused {
  border-color: var(--fx-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--fx-accent-rgb), .16),
              0 0 22px rgba(var(--fx-accent-rgb), .14) !important;
}

/* ═══════════════════════════════════════════════════════
   淺色頁適配（shared.css）
   fx-theme.js 查 CSS 變數實際計算值：有--w-ivory = 淺色頁，
   然後喺 <html> 加 .light-theme 類。
   ⚠️ 唔可以用 body class 或 html:has(body[style*=...]) ——
      實測兩者都唔 work（--w-ivory 定義喺 :root，唔喺 body style）。
   ═══════════════════════════════════════════════════════ */
.light-theme {
  /* 白底要淡啲先睇得出光暈 */
  --fx-glow-core:  .13;
  --fx-glow-mid:   .05;
  /* 過場改白，否則深色蓋住白底畫面好突兀 */
  --fx-curtain-bg: #ffffff;
}

/* ═══════════════════════════════════════════════════════
   無障礙 / 效能降級
   ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .cursor-glow, .cursor-dot, .fx-aura, .fx-ripple,
  .fx-flash::after, .page-curtain, .tilt {
    display: none !important;
    transition: none !important;
  }
}

@media (max-width: 820px) {
  /* 手機冇游標 → cursor 兩件收埋，
     但 .fx-aura 裝置光暈要保留（手指劃過嘅金色圓光）。 */
  .cursor-glow, .cursor-dot { display: none; }
  .page-curtain { display: none; }

  /* 光暈縮細啲，慳電同時唔好擋住內容 */
  .fx-aura {
    width: 240px; height: 240px;
    margin: -120px 0 0 -120px;
    background: radial-gradient(circle,
      rgba(var(--fx-accent-rgb), .24) 0%,
      rgba(var(--fx-accent-rgb), .13) 32%,
      rgba(var(--fx-accent-rgb), .05) 56%,
      rgba(var(--fx-accent-rgb), 0)  72%);
  }
}

@media print {
  .cursor-glow, .cursor-dot, .fx-aura, .fx-ripple,
  .page-curtain { display: none !important; }
  .tilt { transform: none !important; }
}