/* OtterPip 影片特效層 om-fx.css — 只在 html.fx 下生效；列印全部還原 */
html.fx{--fx-gold:255,214,74;--fx-ease:cubic-bezier(.2,.7,.2,1)}
html.fx .fx-prog{position:fixed;left:0;top:0;width:100%;height:3px;z-index:9998;pointer-events:none;background:transparent}
html.fx .fx-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f59e0b,#ffd64a 60%,#2dd4bf);box-shadow:0 0 8px rgba(var(--fx-gold),.6);transition:width .15s linear}
/* ① 進場：JS 尚未標記前先用原選擇器藏起來，避免先閃現再消失 */
html.fx:not(.fx-ready) :is(h2,h3,.kp,.mech,.trap,.vig,.hysec>summary,.learn-question,figure,.om-table-frame,.mag-box,aside,blockquote,.q,.card,.box,.duo-note,.mag-pull,.quick-answer,.learning-hero,.home-hero,.home-intro,.home-stats,.start-grid,.section-heading,.r,.cover,.task-grid,.yt-thumb,.note,.narr-chorus,.rap-chorus),html.fx .fx-b.fx-r{opacity:0;transform:translateY(14px)}
html.fx .fx-b.fx-in{opacity:1;transform:none;transition:opacity .55s ease,transform .6s var(--fx-ease)}
html.fx .fx-b:is(h2,h3).fx-r{transform:translateX(-14px)}
/* 標籤彈出（★ 必考、⟶ 機轉、⚠ 陷阱…） */
html.fx .fx-b.fx-r :is(.lab,.label,.term,.eyebrow,.atag,.kpt){opacity:0;transform:scale(.6)}
html.fx .fx-b.fx-in :is(.lab,.label,.term,.eyebrow,.atag,.kpt){opacity:1;transform:none;transition:opacity .35s ease .12s,transform .5s cubic-bezier(.34,1.56,.64,1) .12s}
/* 螢光筆：粗體重點由左到右劃過，之後常駐 */
html.fx .fx-b:is(.kp,.mech,.quick-answer,.mag-keypoint,.mag-mech,.box,.vig,.trap,.duo-note,.learn-question,.mag-vignette,.mag-narr) strong{background-image:linear-gradient(transparent 58%,rgba(var(--fx-gold),.5) 58%,rgba(var(--fx-gold),.5) 94%,transparent 94%);background-repeat:no-repeat;background-size:100% 100%;transition:background-size .75s ease var(--d,0ms);border-radius:2px}
html.fx .fx-b.fx-r:is(.kp,.mech,.quick-answer,.mag-keypoint,.mag-mech,.box,.vig,.trap,.duo-note,.learn-question,.mag-vignette,.mag-narr) strong{background-size:0 100%}
@media (prefers-color-scheme:dark){html.fx .fx-b:is(.kp,.mech,.quick-answer,.mag-keypoint,.mag-mech,.box,.vig,.trap,.duo-note,.learn-question,.mag-vignette,.mag-narr) strong{background-image:linear-gradient(transparent 58%,rgba(var(--fx-gold),.3) 58%,rgba(var(--fx-gold),.3) 94%,transparent 94%)}}
/* 表格列逐列出現 */
html.fx .fx-b.fx-r tr{opacity:0;transform:translateX(-8px)}
html.fx .fx-b.fx-in tr{opacity:1;transform:none;transition:opacity .4s ease calc(var(--i,0)*45ms),transform .4s var(--fx-ease) calc(var(--i,0)*45ms)}
/* ★必考框：金光閃一下 */
@keyframes fx-glow{0%{box-shadow:0 0 0 0 rgba(var(--fx-gold),0)}35%{box-shadow:0 0 0 4px rgba(var(--fx-gold),.45),0 0 24px rgba(var(--fx-gold),.5)}100%{box-shadow:0 0 0 0 rgba(var(--fx-gold),0)}}
html.fx .fx-b.fx-in:is(.kp,.mag-keypoint,.quick-answer){animation:fx-glow 1.5s ease .35s 1}
/* 陷阱：✗ 先進場晃一下，✓ 再滑入 */
@keyframes fx-shake{0%,100%{transform:none}20%{transform:translateX(-4px) rotate(-6deg)}40%{transform:translateX(4px) rotate(6deg)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes fx-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:none;opacity:1}}
html.fx .fx-b.fx-r :is(.tr-x,.tr-o){opacity:0;transform:translateX(-12px)}
html.fx .fx-b.fx-in .tr-x{opacity:1;transform:none;transition:opacity .4s ease .1s,transform .45s var(--fx-ease) .1s}
html.fx .fx-b.fx-in .tr-o{opacity:1;transform:none;transition:opacity .4s ease .7s,transform .45s var(--fx-ease) .7s}
html.fx .fx-b.fx-in .tr-x .mk{display:inline-block;animation:fx-shake .55s ease .5s 1}
html.fx .fx-b.fx-in .tr-o .mk{display:inline-block;animation:fx-pop .5s cubic-bezier(.34,1.56,.64,1) .95s both}
/* 插圖：緩慢推近（Ken Burns） */
@keyframes fx-kb{from{transform:scale(1.045)}to{transform:none}}
html.fx figure.fx-b.fx-in img{animation:fx-kb 9s ease-out both}
/* 對話泡泡、雙嚮導筆記：像訊息一則則冒出 */
html.fx .fx-b.fx-r :is(.bub,.duo-note>*){opacity:0;transform:translateY(8px) scale(.96)}
html.fx .fx-b.fx-in :is(.bub,.duo-note>*){opacity:1;transform:none;transition:opacity .4s ease calc(.15s + var(--i,0)*.45s),transform .45s var(--fx-ease) calc(.15s + var(--i,0)*.45s)}
/* 側邊浮動鈕 */
html.fx .fx-dock{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:9997;display:flex;flex-direction:column;gap:6px}
html.fx .fx-dock button,html.fx .fx-bar button{font:600 13px/1 system-ui,-apple-system,'PingFang TC','Noto Sans TC',sans-serif;border:1px solid rgba(128,128,128,.35);background:#fff;color:#222;border-radius:999px;padding:9px 11px;margin:0;width:auto;height:auto;min-width:0;min-height:0;max-width:none;line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap;box-sizing:content-box;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.15);opacity:.88;-webkit-appearance:none;appearance:none}
html.fx .fx-dock button:hover,html.fx .fx-bar button:hover{opacity:1;box-shadow:0 0 0 3px rgba(var(--fx-gold),.45)}
html.fx .fx-dock button[aria-pressed=true]{background:#ffd64a;color:#1a1a1a;border-color:#e0b000}
/* ③ 影片模式 */
html.fx body.fx-play .fx-b{transition:opacity .45s ease,filter .45s ease,box-shadow .45s ease}
html.fx body.fx-play .fx-b:not(.fx-cur):not(.fx-cur *){opacity:.28;filter:grayscale(.35)}
html.fx body.fx-play .fx-b.fx-cur{opacity:1;filter:none;position:relative;z-index:1;box-shadow:-5px 0 0 0 #ffd64a,0 0 0 3px rgba(var(--fx-gold),.28),0 10px 34px rgba(0,0,0,.18);border-radius:8px}
@keyframes fx-li{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
html.fx body.fx-play .fx-b.fx-cur li{animation:fx-li .5s var(--fx-ease) calc(var(--i,0)*.55s) both}
html.fx .fx-bar{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:9999;display:none;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;background:#fff;border:1px solid rgba(128,128,128,.35);box-shadow:0 6px 24px rgba(0,0,0,.22);max-width:calc(100vw - 20px);white-space:nowrap;font-family:system-ui,-apple-system,'PingFang TC','Noto Sans TC',sans-serif}
html.fx body.fx-play .fx-bar{display:flex}
html.fx .fx-bar button{padding:7px 10px;box-shadow:none}
html.fx .fx-bar .fx-n{font:12px/1 system-ui,sans-serif;color:#777;min-width:54px;text-align:center;white-space:nowrap}
html.fx .fx-bar .fx-t{font:12px/1.2 system-ui,sans-serif;color:#777;max-width:28vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-color-scheme:dark){html.fx .fx-dock button,html.fx .fx-bar button{background:#1e2126;color:#e8e8e8;border-color:rgba(255,255,255,.22)}html.fx .fx-bar{background:#1e2126;border-color:rgba(255,255,255,.22)}html.fx .fx-bar .fx-n,html.fx .fx-bar .fx-t{color:#aab}}
/* ④ 讀完打勾的星光 */
@keyframes fx-sp{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
html.fx .fx-sp{position:fixed;width:8px;height:8px;border-radius:50%;background:#ffd64a;box-shadow:0 0 6px #ffd64a;z-index:9999;pointer-events:none;animation:fx-sp .85s ease-out forwards}
@media (max-width:640px){html.fx .fx-dock{right:4px;top:auto;bottom:112px;transform:none;gap:5px}html.fx .fx-dock button{width:28px;height:28px;padding:0;font-size:11px;line-height:28px;opacity:.6;box-sizing:border-box}html.fx .fx-bar{top:auto;bottom:100px;padding:5px 6px;gap:4px}html.fx .fx-bar button{padding:6px 8px}html.fx .fx-bar .fx-t{display:none}}
@media (prefers-reduced-motion:reduce){html.fx .fx-b,html.fx .fx-b *{transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media print{html.fx :is(h2,h3,.kp,.mech,.trap,.vig,.hysec>summary,.learn-question,figure,.om-table-frame,.mag-box,aside,blockquote,.q,.card,.box,.duo-note,.mag-pull,.quick-answer,.learning-hero,.home-hero,.home-intro,.home-stats,.start-grid,.section-heading,.r,.cover,.task-grid,.yt-thumb,.note,.narr-chorus,.rap-chorus),html.fx .fx-b,html.fx .fx-b *{opacity:1!important;transform:none!important;animation:none!important;filter:none!important}html.fx :is(.fx-dock,.fx-bar,.fx-prog){display:none!important}}