/* =====================================================================
   動態微調（參考 Aceternity UI，以原生 CSS/JS 重現，不引入 React）
   1 Text Generate  標題逐字由模糊浮現
   2 Card Spotlight 游標附近出現金色柔光
   3 3D Card        卡片隨游標輕微傾斜（最多 4°）
   4 Shimmer        主要按鈕定時掃過一道淡光
   觸控裝置與「減少動態效果」設定下全部關閉
   ===================================================================== */

/* 1. Text Generate */
.fx-gen .fx-ch{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(.12em);
  animation:fxGen .9s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:calc(var(--i) * 45ms + 150ms);}
@keyframes fxGen{to{opacity:1;filter:blur(0);transform:none;}}

/* 2. Card Spotlight */
.fx-card{position:relative;}
.fx-spot{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(212,186,126,.22),rgba(212,186,126,.06) 40%,transparent 65%);
  mix-blend-mode:soft-light;}
.fx-card:hover .fx-spot{opacity:1;}
.fx-rim{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(193,164,94,.55),transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;}
.fx-card:hover .fx-rim{opacity:1;}

/* 3. 3D Card */
.fx-card.fx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease;will-change:transform;}
.fx-card.fx-tilt.fx-on{transition:transform .12s linear,box-shadow .4s ease;--ty:-4px;box-shadow:0 22px 48px rgba(13,28,15,.14);}

/* 4. Shimmer：每 5 秒一道淡光斜掃過按鈕表面；滑鼠移上去微微浮起 */
.fx-move{position:relative;transition:transform .3s ease,box-shadow .3s ease;}
/* 光澤畫在與按鈕同大小的圖層裡，靠 background-position 移動，不需要 overflow（避免改變按鈕對齊） */
.fx-move::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,250,235,.38) 50%,transparent 65%) no-repeat;
  background-size:250% 100%;background-position:150% 0;animation:fxShine 5s ease-in-out 1.6s infinite;}
@keyframes fxShine{0%{background-position:150% 0;}22%,100%{background-position:-50% 0;}}
.fx-move:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(13,28,15,.18);}
@media (prefers-reduced-motion:reduce){
  .fx-gen .fx-ch{animation:none;opacity:1;filter:none;transform:none;}
  .fx-move::after{animation:none;display:none;}
  .fx-card.fx-tilt{transform:none!important;}
}