/* =========================================================
   fx.css — 全站動畫（純裝飾，不影響內容）
   參考 williamyen.com：逐字跳入、hover 字母翻滾、按鈕掃色、捲動浮現。
   不想要動畫：把 index.html 裡的 fx.css / fx.js 兩行拿掉即可。
   ========================================================= */

:root{
  --fx-ease: cubic-bezier(.16, 1, .3, 1);    /* expo-out：快進慢停，所有動畫共用 */
}

/* ---------- 頂部捲動進度條 ---------- */
.fx-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:80; pointer-events:none;
  background:var(--text); transform-origin:0 50%; transform:scaleX(0);
}

/* ---------- 逐字拆開的標題（名字、Projects、Life） ---------- */
.fx-split{ display:inline-block; }
.fx-ch{ display:inline-block; white-space:pre; will-change:transform; }
/* 進場：每個字從下方帶模糊跳上來，延遲隨機（--d） */
.fx-split.fx-play .fx-ch{ animation:fxCharIn .9s var(--fx-ease) var(--d) both; }
@keyframes fxCharIn{
  0%  { opacity:0; transform:translateY(.7em) rotate(6deg); filter:blur(6px); }
  60% { opacity:1; filter:blur(0); }
  100%{ opacity:1; transform:none; }
}
/* 碰一下 / 滑過：字母依序彈跳一下（高度 --j 隨機） */
.fx-split.fx-jump .fx-ch{ animation:fxJump .55s var(--fx-ease) var(--wd) both; }
@keyframes fxJump{
  0%,100%{ transform:none; }
  40%    { transform:translateY(var(--j)); }
}
.fx-split[data-fx-jump]{ cursor:default; }

/* ---------- hover 字母翻滾（社群名稱） ---------- */
.fx-roll{ position:relative; display:inline-flex; overflow:hidden; vertical-align:bottom; }
.fx-roll .fx-r{ position:relative; display:inline-block; white-space:pre; }
.fx-roll .fx-r > span{ display:block; transition:transform .38s var(--fx-ease); transition-delay:var(--rd); }
.fx-roll .fx-r > span + span{ position:absolute; inset:0; transform:translateY(100%); }
@media (hover:hover){
  a:hover .fx-roll .fx-r > span:first-child{ transform:translateY(-100%); }
  a:hover .fx-roll .fx-r > span + span{ transform:translateY(0); }
}

/* 社群列：hover 時左側長出一條細線、箭頭往右滑 */
.social{ position:relative; }
.social::before{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--text); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s var(--fx-ease);
}
.social .arrow{ transition:transform .35s var(--fx-ease), color .2s; }
@media (hover:hover){
  .social:hover::before{ transform:scaleX(1); }
  .social:hover .arrow{ transform:translateX(4px) rotate(-45deg); color:var(--text); }
}

/* ---------- 按鈕：滑過時從左邊掃過一層顏色 ---------- */
.btn{ position:relative; overflow:hidden; isolation:isolate; }
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:rgba(255,255,255,.18); transform:translateX(-101%);
  transition:transform .5s var(--fx-ease);
}
.btn.ghost::before{ background:var(--text); }
.btn svg.i{ transition:transform .35s var(--fx-ease); }
@media (hover:hover){
  .btn:hover::before{ transform:translateX(0); }
  .btn.ghost:hover{ color:var(--accent-fg); }
  .btn:hover svg.i{ transform:translateX(4px); }
}
.btn:active{ transform:scale(.97); }

/* ---------- 捲動浮現：進入畫面才淡入上浮（用 translate，不跟 hover 的 transform 打架） ---------- */
.fx-reveal{ opacity:0; }
.fx-reveal.fx-in{ animation:fxUp .85s var(--fx-ease) var(--rd, 0ms) both; }
@keyframes fxUp{
  from{ opacity:0; translate:0 24px; }
  to  { opacity:1; translate:0 0; }
}
/* 卡片 / 照片：從微縮放落定（跟文字的上浮做出區別） */
.work-card.fx-in, .life-cell.fx-in{ animation-name:fxSettle; animation-duration:1s; }
@keyframes fxSettle{
  from{ opacity:0; translate:0 32px; scale:.94; }
  to  { opacity:1; translate:0 0;    scale:1; }
}
/* 社群列：一列一列從左滑進 */
.social.fx-in{ animation-name:fxRow; }
@keyframes fxRow{
  from{ opacity:0; translate:-18px 0; }
  to  { opacity:1; translate:0 0; }
}
/* 小標：從遮罩裡升起 */
.section-label.fx-in, .life-month.fx-in{ animation-name:fxMask; }
@keyframes fxMask{
  from{ opacity:0; translate:0 .9em; clip-path:inset(0 0 100% 0); }
  to  { opacity:1; translate:0 0;    clip-path:inset(0 0 -20% 0); }
}

/* ---------- 首頁 Hero 進場 ---------- */
.hero > *{ animation:fxUp .9s var(--fx-ease) both; }
.hero > .avatar{ animation:fxPop 1s var(--fx-ease) both; }
.hero > :nth-child(2){ animation-delay:.12s; }
.hero > :nth-child(4){ animation-delay:.45s; }
.hero > :nth-child(5){ animation-delay:.55s; }
.hero > :nth-child(6){ animation-delay:.65s; }
.hero > :nth-child(7){ animation-delay:.75s; }
.hero > h1{ animation:none; }  /* 名字用逐字動畫 */
@keyframes fxPop{
  0%  { opacity:0; scale:.6; rotate:-8deg; }
  100%{ opacity:1; scale:1;  rotate:0deg; }
}
/* 大頭貼：hover 輕轉一下 */
.avatar{ transition:transform .6s var(--fx-ease); }
@media (hover:hover){ .avatar:hover{ transform:rotate(-6deg) scale(1.05); } }

/* ---------- 背景光暈：極慢漂移（整頁唯一「一直在動」的畫面） ---------- */
body::before{ animation:fxDrift 26s ease-in-out infinite alternate; }
@keyframes fxDrift{
  from{ transform:translate3d(-3%, -2%, 0) scale(1.05); }
  to  { transform:translate3d(3%, 2%, 0) scale(1.12); }
}

/* ---------- 切換分頁：整頁淡入 ---------- */
.view.fx-enter{ animation:fxView .6s var(--fx-ease) both; }
@keyframes fxView{
  from{ opacity:0; translate:0 14px; }
  to  { opacity:1; translate:0 0; }
}

/* ---------- 作品卡：封面圖慢慢放大 ---------- */
.work-card .thumb img{ transition:transform .8s var(--fx-ease); }
@media (hover:hover){ .work-card:hover .thumb img{ transform:scale(1.05); } }
.life-img img{ transition:transform .8s var(--fx-ease); }
@media (hover:hover){ .life-cell:hover .life-img img{ transform:scale(1.06); } }
.work-card:active{ transform:scale(.98); }

/* ---------- 標籤 / 篩選鈕 / 導覽：按下回彈 ---------- */
.tag{ transition:transform .3s var(--fx-ease), background .2s, color .2s; }
@media (hover:hover){ .tag:hover{ transform:translateY(-2px); background:var(--text); color:var(--accent-fg); } }
.dock-tab{ transition:color .2s, transform .3s var(--fx-ease); }
.dock-tab:active{ transform:scale(.86); }

/* 時間軸圓點：浮現時脈衝一下 */
.timeline .item.fx-in::before{ animation:fxPulse 1s var(--fx-ease) calc(var(--rd, 0ms) + .2s) both; }
@keyframes fxPulse{
  0%  { transform:scale(0); }
  60% { transform:scale(1.6); }
  100%{ transform:scale(1); }
}

/* ---------- 尊重「減少動態效果」設定 ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-progress{ display:none; }
  .fx-reveal{ opacity:1; }
  .fx-reveal.fx-in, .hero > *, .view.fx-enter, body::before,
  .fx-split.fx-play .fx-ch, .fx-split.fx-jump .fx-ch,
  .timeline .item.fx-in::before{ animation:none !important; }
  .fx-roll .fx-r > span, .btn::before{ transition:none; }
}