/* 吃肉肉營運手冊 — 特效層 v1.0
   滑鼠光暈／拖尾／漣漪、滾動漸顯、閱讀進度、卡片 3D、頁面轉場 */

:root{
  --fx-gold:#E8A33D; --fx-gold-d:#B57612; --fx-pink:#F2607A; --fx-black:#141110;
}

/* ---------- 頁面進場／離場 ---------- */
@keyframes fxPageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
body.fx-on #wrap{animation:fxPageIn .5s cubic-bezier(.22,.8,.3,1) both}
body.fx-leave{opacity:0;transform:scale(.99);transition:opacity .28s ease,transform .28s ease}

/* ---------- 閱讀進度條 ---------- */
#fxProgress{position:fixed;top:48px;left:0;height:3px;width:0;z-index:98;
  background:linear-gradient(90deg,var(--fx-gold-d),var(--fx-gold),var(--fx-pink));
  box-shadow:0 0 12px rgba(232,163,61,.7);transition:width .12s linear;pointer-events:none}

/* ---------- 滑鼠光暈與拖尾 ---------- */
#fxGlow{position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;z-index:9997;
  pointer-events:none;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s,width .18s,height .18s,background .18s;
  background:radial-gradient(circle,rgba(232,163,61,.55),rgba(232,163,61,0) 70%);
  mix-blend-mode:normal}
body.fx-cursor #fxGlow{opacity:1}
body.fx-cursor.fx-hot #fxGlow{width:52px;height:52px;
  background:radial-gradient(circle,rgba(242,96,122,.5),rgba(242,96,122,0) 70%)}
#fxRing{position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;z-index:9996;
  pointer-events:none;transform:translate(-50%,-50%);opacity:0;
  border:1.5px solid rgba(232,163,61,.55);transition:opacity .3s,width .22s,height .22s,border-color .22s}
body.fx-cursor #fxRing{opacity:.9}
body.fx-cursor.fx-hot #fxRing{width:60px;height:60px;border-color:rgba(242,96,122,.8)}
body.fx-cursor.fx-down #fxRing{width:22px;height:22px;border-color:#fff}
.fx-dot{position:fixed;width:6px;height:6px;border-radius:50%;z-index:9995;pointer-events:none;
  transform:translate(-50%,-50%);background:var(--fx-gold);opacity:.75;
  animation:fxDot .7s ease-out forwards}
@keyframes fxDot{to{opacity:0;transform:translate(-50%,-50%) scale(.2)}}

/* ---------- 點擊漣漪 ---------- */
.fx-ripple{position:fixed;border-radius:50%;pointer-events:none;z-index:9994;
  border:2px solid var(--fx-gold);transform:translate(-50%,-50%);
  animation:fxRip .55s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes fxRip{from{width:0;height:0;opacity:.85}to{width:120px;height:120px;opacity:0}}
.fx-btn-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);
  transform:translate(-50%,-50%);pointer-events:none;animation:fxBtnRip .5s ease-out forwards}
@keyframes fxBtnRip{from{width:0;height:0;opacity:.6}to{width:240px;height:240px;opacity:0}}
#bar button,.hub a,.soc button{position:relative;overflow:hidden}
.hub a{overflow:hidden}

/* ---------- 滾動漸顯 ---------- */
body.fx-on .fx-r{opacity:0;transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.22,.8,.3,1),transform .62s cubic-bezier(.22,.8,.3,1)}
body.fx-on .fx-r.fx-in{opacity:1;transform:none}
body.fx-on .fx-r.fx-l{transform:translateX(-26px)}
body.fx-on .fx-r.fx-l.fx-in{transform:none}
body.fx-on .fx-r.fx-z{transform:scale(.96);opacity:0}
body.fx-on .fx-r.fx-z.fx-in{transform:none;opacity:1}

/* ---------- 標題底線掃出 ---------- */
body.fx-on #doc h2{border-bottom-color:transparent;position:relative}
body.fx-on #doc h2::after{content:"";position:absolute;left:0;bottom:-3px;height:3px;width:0;
  background:var(--fx-black);transition:width .7s cubic-bezier(.22,.8,.3,1) .1s}
body.fx-on #doc h2.fx-in::after{width:100%}
body.fx-on #doc h2 .no{transition:transform .4s cubic-bezier(.3,1.6,.5,1);transform:scale(.6);opacity:0}
body.fx-on #doc h2.fx-in .no{transform:none;opacity:1}
body.fx-on #doc h3{position:relative;border-left-color:transparent;transition:border-left-color .45s}
body.fx-on #doc h3.fx-in{border-left-color:var(--fx-gold)}

/* ---------- 卡片 3D 傾斜與光澤 ---------- */
.hub a,.card{transform-style:preserve-3d;will-change:transform}
.hub a{transition:transform .28s cubic-bezier(.22,.8,.3,1),box-shadow .28s,border-top-color .28s}
.hub a::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);
  transform:translateX(-120%);transition:opacity .2s}
.hub a:hover::before{opacity:1;animation:fxSheen .8s ease-out}
@keyframes fxSheen{to{transform:translateX(120%)}}
.hub a:hover{box-shadow:0 18px 40px rgba(60,45,30,.2)}
.card{transition:transform .25s cubic-bezier(.22,.8,.3,1),box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(60,45,30,.14)}

/* ---------- 表格與清單微互動 ---------- */
#doc tbody tr{transition:background .18s,transform .18s}
#doc tbody tr:hover{background:#fdf6e9}
#doc .box{transition:transform .25s,box-shadow .25s}
#doc .box:hover{transform:translateX(3px)}
#doc .lesson{transition:transform .25s,box-shadow .25s}
#doc .lesson:hover{box-shadow:0 10px 26px rgba(60,45,30,.12)}
#doc img{transition:transform .4s cubic-bezier(.22,.8,.3,1),filter .4s;border-radius:8px}
#doc .card img:hover,#doc .grid img:hover{transform:scale(1.03)}
#doc .chip{transition:transform .2s}
#doc .chip:hover{transform:translateY(-2px) scale(1.06)}

/* ---------- 目錄 scrollspy ---------- */
#toc a{transition:background .2s,color .2s,padding-left .2s,border-left-color .2s;
  border-left:3px solid transparent}
#toc a.fx-cur{background:#fdf6e9;color:var(--fx-gold-d);font-weight:700;
  border-left-color:var(--fx-gold);padding-left:12px}

/* ---------- 回到頂端 ---------- */
#fxTop{position:fixed;right:18px;bottom:96px;width:46px;height:46px;border-radius:50%;
  background:var(--fx-black);color:#fff;border:0;cursor:pointer;z-index:9990;
  display:flex;align-items:center;justify-content:center;font-size:17px;
  box-shadow:0 8px 22px rgba(0,0,0,.28);opacity:0;pointer-events:none;
  transform:translateY(14px) scale(.85);transition:.28s cubic-bezier(.22,.8,.3,1)}
#fxTop.on{opacity:1;pointer-events:auto;transform:none}
#fxTop:hover{background:var(--fx-gold-d);transform:translateY(-3px)}
#fxTop svg{position:absolute;inset:0;transform:rotate(-90deg)}
#fxTop circle{fill:none;stroke-width:2.5}

/* ---------- 工具列按鈕 hover 動效 ---------- */
#bar button{transition:background .2s,border-color .2s,transform .18s,box-shadow .2s}
#bar button:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(232,163,61,.32)}
#bar button:active{transform:translateY(0) scale(.96)}
#bar button.on{animation:fxPulse 2.2s ease-in-out infinite}
@keyframes fxPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,163,61,.55)}
  50%{box-shadow:0 0 0 7px rgba(232,163,61,0)}}

/* ---------- 編輯模式全屏提示 ---------- */
body.edit::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:97;
  box-shadow:inset 0 0 0 3px rgba(232,163,61,.55);animation:fxEdge 2.4s ease-in-out infinite}
@keyframes fxEdge{0%,100%{box-shadow:inset 0 0 0 3px rgba(232,163,61,.28)}
  50%{box-shadow:inset 0 0 0 3px rgba(232,163,61,.75)}}

/* ---------- 數字跑動 ---------- */
.fx-num{font-variant-numeric:tabular-nums}

/* ---------- 封面進場 ---------- */
body.fx-on .cover>*{opacity:0;transform:translateY(16px);
  animation:fxPageIn .7s cubic-bezier(.22,.8,.3,1) forwards}
body.fx-on .cover>*:nth-child(1){animation-delay:.05s}
body.fx-on .cover>*:nth-child(2){animation-delay:.14s}
body.fx-on .cover>*:nth-child(3){animation-delay:.22s}
body.fx-on .cover>*:nth-child(4){animation-delay:.3s}
body.fx-on .cover>*:nth-child(5){animation-delay:.38s}
.cover{position:relative;overflow:hidden}
.cover::after{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-220px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,163,61,.16),transparent 65%);
  animation:fxFloat 9s ease-in-out infinite}
@keyframes fxFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-26px,26px)}}

/* ---------- 骨架載入 ---------- */
#fxBoot{position:fixed;inset:0;z-index:10000;background:#141110;display:flex;
  align-items:center;justify-content:center;flex-direction:column;gap:16px;
  transition:opacity .45s ease,visibility .45s}
#fxBoot.gone{opacity:0;visibility:hidden}
#fxBoot .lg{color:#fff;font-weight:900;font-size:22px;letter-spacing:.14em}
#fxBoot .lg em{color:var(--fx-gold);font-style:normal}
#fxBoot .ln{width:180px;height:3px;background:#2a2523;border-radius:3px;overflow:hidden}
#fxBoot .ln i{display:block;height:100%;width:40%;border-radius:3px;
  background:linear-gradient(90deg,var(--fx-gold-d),var(--fx-gold));
  animation:fxLoad 1.05s ease-in-out infinite}
@keyframes fxLoad{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}

/* ---------- 關閉條件 ---------- */
@media(hover:none),(max-width:820px){
  #fxGlow,#fxRing,.fx-dot{display:none}
  #fxTop{right:12px;bottom:88px;width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  body.fx-on .fx-r{opacity:1!important;transform:none!important}
  #fxGlow,#fxRing,.fx-dot{display:none}
}
@media print{
  #fxProgress,#fxGlow,#fxRing,#fxTop,#fxBoot,.fx-dot,.fx-ripple{display:none!important}
  body.fx-on .fx-r{opacity:1!important;transform:none!important}
  body.fx-on #doc h2{border-bottom-color:var(--fx-black)!important}
  body.fx-on #doc h2::after{display:none}
  body.fx-on .cover>*{opacity:1!important;transform:none!important;animation:none!important}
  body.edit::after{display:none}
}