/* 中間版特效：精簡版的兩項＋四項輕量效果（金色、只在需要時出現）
   1) 首屏金色粒子（數量少、速度慢，手機不顯示）
   2) 首屏金色光掃，只跑一次
   3) 卡片懸停時金邊微亮（不傾斜）
   4) 電腦版游標金色暈光（很淡）
   其餘特效不包含在這裡 */

/* 捲動淡入 */
.fx-js .fx-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
  transition-delay: var(--fx-d, 0ms);
}
.fx-js .fx-reveal.is-in { opacity: 1; transform: none; }

/* 標題逐字浮現：避免與原本的 hero-copy 進場動畫重複 */
h1.hero-title { animation: none; }
.fx-ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(.4em);
  animation: fxMidChar .7s ease forwards;
  animation-delay: calc(var(--fx-i, 0) * 45ms + 150ms);
}
@keyframes fxMidChar { to { opacity: 1; transform: none; } }

/* 1) 首屏金色粒子 */
.fx-particles {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 5; pointer-events: none;
}

/* 2) 首屏金色光掃，只跑一次 */
.fx-sweep {
  position: absolute; top: -10%; bottom: -10%; left: -60%; width: 36%;
  background: linear-gradient(100deg, transparent 0%, rgba(var(--fx-gold),.10) 40%, rgba(var(--fx-gold),.32) 50%, rgba(var(--fx-gold),.10) 60%, transparent 100%);
  transform: skewX(-16deg);
  pointer-events: none; z-index: 4;
  animation: fxMidSweep 2.6s cubic-bezier(.6,0,.3,1) 1.2s 1 forwards;
}
@keyframes fxMidSweep { 0% { left: -60%; } 100% { left: 130%; } }

/* 3) 卡片懸停：金邊微亮 */
.fx-card { transition: box-shadow .35s ease, border-color .35s ease; }
.fx-card:hover {
  box-shadow: 0 8px 30px -12px rgba(var(--fx-gold),.28), inset 0 0 0 1px rgba(var(--fx-gold),.22);
}

/* 4) 電腦版游標暈光（很淡） */
#fx-glow {
  position: fixed; left: 0; top: 0;
  width: 320px; height: 320px; margin: -160px 0 0 -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--fx-gold),.07), transparent 60%);
  pointer-events: none; z-index: 0;
  opacity: 0; transition: opacity .4s;
}
#fx-glow.on { opacity: 1; }

/* 5) 右側捲動進度軌：顯示整頁捲動到哪裡（電腦版） */
#fx-progress {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  height: 42vh; width: 2px; z-index: 40;
  background: rgba(var(--fx-gold),.18);
  pointer-events: none;
}
#fx-progress-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, rgba(var(--fx-gold),.5), rgb(var(--fx-gold)));
  box-shadow: 0 0 8px rgba(var(--fx-gold),.5);
}
@media (max-width: 1023px) { #fx-progress { display: none; } }

/* 減少動態：全部關閉，內容直接顯示 */
@media (prefers-reduced-motion: reduce) {
  .fx-js .fx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fx-ch { opacity: 1 !important; transform: none !important; animation: none !important; }
  .fx-particles, .fx-sweep, #fx-glow { display: none !important; }
  .fx-card:hover { box-shadow: none; }
}

/* 手機：不顯示粒子、光掃、游標暈光 */
@media (max-width: 767px) {
  .fx-particles, .fx-sweep, #fx-glow { display: none; }
}