/* ══════════════════════════════════════════════════════════════════════════
avatar-frame-motion.css 頭像框自身的微動效（ambience） v0.60.994-4 草案
══════════════════════════════════════════════════════════════════════════
★這一份【還沒有】接進玩家系統★
index.html 沒有載入它；只有 docs/ui-preview/avatar-frame-motion.html 會載。
店長看完示範頁裁定強弱之後，才把 加進 index.html。
在那之前，正式站跑的仍然是 styles.css 裡原本那三條通用動畫。
★Frame ambience ≠ 裝備特效★
這兩個是不同系統，未來玩家可以同時擁有「頭像框 ＋ 框微動效 ＋ 裝備特效」。
所以這裡的每一條都只做【生命感】：幅度極小、週期很長、不搶主角。
裝備特效啟用時，框的次要動畫要先被砍（見下方 .lk-fx-on 的規則）。
══ 動作分類（Gate 會照這個分類數數量）═════════════════════════════════
lkC* 連續動作（continuous）—— 一直在動，例如呼吸、輕擺、流光
lkO* 偶發動作（occasional）—— 大部分時間看不見，例如花瓣、雪光、掃光
★每個強度的上限（v0.60.994-5 收斂後，這是【美術上限】不是技術上限）★
FULL 常駐 ≤2（1 主 ＋ 最多 1 次要）、偶發 ≤1、總數 ≤3
MID 常駐 ≤1、偶發 ≤1、總數 ≤2
COMPACT ★完全靜態★（0 個）
店長：「技術上允許 FULL ≤4 不代表美術上要用滿 4 個」、
「大部分時間應該是安靜漂亮，偶爾才有一個細節活起來。不要五槽各自都動」、
「多人排行榜同時 10 人時，第一眼應該還是在看名次、玩家、分數」。
⇒ 排行榜用的就是 COMPACT，所以 COMPACT 取最安靜的合法解：完全靜態。
══ 技術限制 ════════════════════════════════════════════════════════════
· 只用 transform / opacity（filter 類效果節制使用）
· 不新增任何會影響 layout 的元素：粒子與掃光都做在 ::before / ::after
· 動畫層一律 pointer-events:none（繼承框層）
· prefers-reduced-motion: reduce ⇒ 全部 animation:none（完全靜態）
· 頁面不可見時 ⇒ .lk-paused 把 animation-play-state 設成 paused
· deterministic stagger：--lk-st 由玩家名字算出來的固定值（0～11），
★不是隨機★ —— 同一個玩家每次 render 的相位都一樣，不會跳動
══════════════════════════════════════════════════════════════════════════ */
:root{
/* 動效總強度：1 ＝ 正常、0.55 ＝ 弱化、0 ＝ 全部靜態（示範頁可即時切換） */
--lk-amb: 1;
/* 每一個玩家的相位偏移（秒）。renderer 會依名字算出 0～11 的固定值。 */
--lk-st: 0;
}
/* ── 取消 styles.css 裡原本那三條通用動畫 ───────────────────────────────
原本是「main 呼吸 / hang 擺 / band 漂移」，15 套長得一樣、只是換顏色。
店長明確要求每一套要有自己的個性，所以這一份把通用的關掉、改成逐套指定。 */
.lk-fr > i, .lk-fr2 > i{ animation: none; }
/* ── 粒子與掃光的共用底座（★不新增元素，做在 pseudo-element 上★）────────
::before ＝ 一顆小粒子（花瓣／雪／星塵／光點）
::after ＝ 掃光／燈光層，用【素材自己的 alpha】當遮罩，
所以光只會出現在美術上面，★不可能掃出一個方形★。
--lk-img 由 renderer 連同 background-image 一起吐出來。 */
.lk-fr > i::before, .lk-fr2 > i::before,
.lk-fr > i::after, .lk-fr2 > i::after{
content: ""; position: absolute; pointer-events: none;
opacity: 0; will-change: transform, opacity;
}
.lk-fr > i::after, .lk-fr2 > i::after{
inset: 0;
-webkit-mask-image: var(--lk-img); mask-image: var(--lk-img);
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: inherit; mask-position: inherit;
}
/* 粒子：一顆很小的柔光點，尺寸相對於槽 */
.lk-fr > i::before, .lk-fr2 > i::before{
left: 50%; top: 12%; width: 22%; height: 22%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 45%, transparent 70%);
}
/* ══ 連續動作 ═════════════════════════════════════════════════════════ */
/* ★每一格的幅度都乘上 --lk-amb★（1 ＝ 正常、.45 ＝ 弱化）。
「弱化」是幅度變小、節奏不變 —— 不是把時長拉長（拉長只會變慢，不會變輕）。
寫在 keyframes 裡是因為 var() 在 keyframes 會在元素上即時解析，
所以示範頁切 body 的 class 就能立刻看到差別。 */
@keyframes lkCBreath { 0%,100%{ opacity:calc(1 - .10 * var(--lk-amb)) } 50%{ opacity:1 } }
@keyframes lkCGlow { 0%,100%{ opacity:calc(1 - .14 * var(--lk-amb)); transform:scale(calc(1 - .005 * var(--lk-amb))) }
50% { opacity:1; transform:scale(calc(1 + .008 * var(--lk-amb))) } }
@keyframes lkCSway { 0%,100%{ transform:rotate(calc(-2.2deg * var(--lk-amb))) } 50%{ transform:rotate(calc(2.2deg * var(--lk-amb))) } }
@keyframes lkCSwaySoft{0%,100%{ transform:rotate(calc(-1.3deg * var(--lk-amb))) } 50%{ transform:rotate(calc(1.3deg * var(--lk-amb))) } }
@keyframes lkCBreeze { 0%,100%{ transform:rotate(calc(-1.6deg * var(--lk-amb))) translateX(calc(-.6% * var(--lk-amb))) }
50% { transform:rotate(calc(1.6deg * var(--lk-amb))) translateX(calc(.6% * var(--lk-amb))) } }
@keyframes lkCDrift { 0%,100%{ transform:translateX(calc(-1.1% * var(--lk-amb))) } 50%{ transform:translateX(calc(1.1% * var(--lk-amb))) } }
@keyframes lkCRipple { 0%,100%{ transform:translateX(calc(-1.4% * var(--lk-amb))) scaleY(1) }
50% { transform:translateX(calc(1.4% * var(--lk-amb))) scaleY(calc(1 + .02 * var(--lk-amb))) } }
/* 吊飾「輕晃＋偶爾小彈一下」：擺動為主，週期後段補一個很小的上下彈 */
@keyframes lkCBobSway{
0%,100%{ transform:rotate(calc(-1.8deg * var(--lk-amb))) translateY(0) }
44% { transform:rotate(calc(1.8deg * var(--lk-amb))) translateY(0) }
56% { transform:rotate(calc(1.1deg * var(--lk-amb))) translateY(calc(-3.5% * var(--lk-amb))) }
64% { transform:rotate(calc(.6deg * var(--lk-amb))) translateY(0) }
72% { transform:rotate(calc(-.2deg * var(--lk-amb))) translateY(calc(-1.2% * var(--lk-amb))) }
80% { transform:rotate(calc(-1deg * var(--lk-amb))) translateY(0) }
}
/* ★非常輕微★版的吊飾擺動（團購讚專用：店長要「非常輕微低頻擺動」）
幅度大約是 lkCBobSway 的六成，而且彈跳只留一次、更小。 */
@keyframes lkCBobSoft{
0%,100%{ transform:rotate(calc(-1.05deg * var(--lk-amb))) translateY(0) }
46% { transform:rotate(calc(1.05deg * var(--lk-amb))) translateY(0) }
58% { transform:rotate(calc(.6deg * var(--lk-amb))) translateY(calc(-1.8% * var(--lk-amb))) }
70% { transform:rotate(calc(.1deg * var(--lk-amb))) translateY(0) }
}
/* 燈光微亮（小舖暖燈、暖陽、金光暈）：只動 opacity，不動位置 */
@keyframes lkCLamp { 0%,100%{ opacity:calc(.5 - .32 * var(--lk-amb)) } 50%{ opacity:.5 } }
/* ══ 偶發動作 ═════════════════════════════════════════════════════════
共同手法：週期很長，可見窗口只佔 10～18% ⇒ 大部分時間完全看不到，
所以「偶爾一片花瓣」「偶發一顆星芒」才不會變成跑馬燈。 */
/* 掃光：沿素材自己的輪廓斜斜掃過一次 */
@keyframes lkOSweep {
0%, 84%, 100% { opacity:0; transform:translate3d(-120%,0,0) }
88% { opacity:calc(.55 * var(--lk-amb)); transform:translate3d(-30%,0,0) }
94% { opacity:calc(.5 * var(--lk-amb)); transform:translate3d(40%,0,0) }
98% { opacity:0; transform:translate3d(120%,0,0) }
}
/* 低頻閃亮（冰晶、星芒、金星）：短短亮一下 */
@keyframes lkOGlint {
0%, 88%, 100% { opacity:0; transform:scale(.7) }
92% { opacity:calc(.75 * var(--lk-amb)); transform:scale(1.06) }
96% { opacity:calc(.25 * var(--lk-amb)); transform:scale(.95) }
}
/* 小燈串交替：兩段各亮一次，感覺像燈在輪流 */
@keyframes lkOTwinkleAlt {
0%,100%{ opacity:calc(.12 * var(--lk-amb)) } 22%{ opacity:calc(.45 * var(--lk-amb)) } 30%{ opacity:calc(.14 * var(--lk-amb)) }
62%{ opacity:calc(.4 * var(--lk-amb)) } 70%{ opacity:calc(.12 * var(--lk-amb)) }
}
/* 花瓣／秋葉沿外緣飄落（帶一點旋轉與側移） */
@keyframes lkOFall {
0%, 78%, 100% { opacity:0; transform:translate(0,0) rotate(0) }
82% { opacity:calc(.85 * var(--lk-amb)); transform:translate(-6%,10%) rotate(25deg) }
90% { opacity:calc(.7 * var(--lk-amb)); transform:translate(-16%,52%) rotate(90deg) }
97% { opacity:0; transform:translate(-24%,96%) rotate(140deg) }
}
/* 細雪／光點緩緩落下（不旋轉，飄得更慢） */
@keyframes lkOSnow {
0%, 80%, 100% { opacity:0; transform:translate(0,0) }
85% { opacity:calc(.8 * var(--lk-amb)); transform:translate(-3%,22%) }
93% { opacity:calc(.55 * var(--lk-amb)); transform:translate(-8%,62%) }
99% { opacity:0; transform:translate(-12%,104%) }
}
/* 原地浮現一顆光點（暖光點、幸運光、心光、星塵） */
@keyframes lkOSpark {
0%, 86%, 100% { opacity:0; transform:scale(.5) translateY(0) }
90% { opacity:calc(.9 * var(--lk-amb)); transform:scale(1) translateY(-6%) }
96% { opacity:calc(.2 * var(--lk-amb)); transform:scale(.85) translateY(-14%) }
}
/* 一顆柔光沿著下緣的弧線滑過（緞帶專用） */
@keyframes lkOSlide {
0%, 76%, 100% { opacity:0; transform:translate(-38%,6%) }
80% { opacity:calc(.75 * var(--lk-amb)); transform:translate(-18%,0) }
88% { opacity:calc(.8 * var(--lk-amb)); transform:translate(14%,-2%) }
96% { opacity:0; transform:translate(40%,6%) }
}
/* ══ 綁定：時長一律乘 --lk-amb；延遲一律加上該玩家的固定相位 --lk-st ════
--lk-amb 為 0 時所有時長變 0s —— 但 Chrome 的 getAnimations() 仍會把
「0s ＋ infinite」算成 running，所以「全部靜態」另外用 .lk-amb-off
直接 animation:none（見檔案最後）。 */
.lk-amb-c1{ animation: var(--a1) calc(var(--d1) * var(--lk-amb)) ease-in-out infinite;
animation-delay: calc(var(--lk-st) * -1s); }
/* ══════════════════════════════════════════════════════════════════════
逐套指定（15 套，每一套都有自己的個性）
寫法：直接對 .lkfr- 底下的槽下 animation，看得懂、好調。
FULL＝沒有 .lk-fr-mid / .lk-fr-compact 的那一層。
══════════════════════════════════════════════════════════════════════ */
/* ── ① 🌕 中秋月華：月亮柔光呼吸（主）＋燈籠輕擺（次）＋偶發暖光點 ──────
★這一套維持三個★：月亮、燈籠、暖光都是「中秋」本身的識別，拿掉任何一個
都會少掉一塊主題。其餘 14 套凡是「拿掉還成立」的都已經拿掉。 */
.lkfr-midautumn .lk-fr-main { animation: lkCGlow 8.5s ease-in-out infinite; }
.lkfr-midautumn .lk-fr-hang { animation: lkCSway 7.2s ease-in-out infinite; }
.lkfr-midautumn .lk-fr-main::before{
left: 62%; top: 20%; width: 16%; height: 16%;
background: radial-gradient(circle, rgba(255,232,170,.95) 0%, rgba(255,214,130,.4) 45%, transparent 70%);
animation: lkOSpark 13s ease-in-out infinite; }
/* ── ② 🌸 春季：花枝輕擺（主）＋偶爾一片櫻花瓣沿外緣飄落 ────────────────
★拿掉了 flora 的花簇微風★：花枝本體已經在擺，花簇再獨立擺一次
就是店長說的「五槽各自都動」。少了它，「櫻雨花信」照樣成立。 */
.lkfr-spring .lk-fr-main { animation: lkCSwaySoft 7.2s ease-in-out infinite; }
.lkfr-spring .lk-fr-main::before{
left: 70%; top: 46%; width: 13%; height: 13%; border-radius: 50% 50% 50% 0;
background: radial-gradient(circle, rgba(255,214,226,.95) 0%, rgba(250,190,208,.5) 50%, transparent 72%);
animation: lkOFall 11s linear infinite; }
/* ── ③ ☀️ 夏季：吊飾海風輕擺（主）＋下緣水光極輕流動（次）───────────────
★拿掉了水面掃光★：海風擺＋水光流動已經是「海風盛夏」，掃光是第三個聲音。 */
.lkfr-summer .lk-fr-hang { animation: lkCSway 6.4s ease-in-out infinite; }
.lkfr-summer .lk-fr-band { animation: lkCRipple 10.5s ease-in-out infinite; }
/* ── ④ 🍁 秋季：麥穗／葉片輕擺（主）＋偶爾一片秋葉滑落 ──────────────────
★拿掉了暖光掠過★：葉子落下本身就是秋天，暖光是多出來的。 */
.lkfr-autumn .lk-fr-flora { animation: lkCBreeze 7.4s ease-in-out infinite; }
.lkfr-autumn .lk-fr-band::before{
left: 26%; top: 6%; width: 11%; height: 11%; border-radius: 60% 40% 55% 45%;
background: radial-gradient(circle, rgba(240,170,90,.95) 0%, rgba(216,140,60,.45) 50%, transparent 72%);
animation: lkOFall 11.5s linear infinite; }
/* ── ⑤ ❄️ 冬季：極輕呼吸（主）＋冰晶低頻閃亮（偶）─────────────────────
★拿掉了細雪★：店長本來就說「很少量的雪，不是持續下大雪」，
收斂時直接讓冰晶閃亮代表這一套 —— 少一個持續落下的東西，畫面安靜很多。 */
.lkfr-winter .lk-fr-main { animation: lkCBreath 9.2s ease-in-out infinite; }
.lkfr-winter .lk-fr-main::after{
background: radial-gradient(circle at 40% 34%, rgba(255,255,255,.9) 0%, transparent 42%);
animation: lkOGlint 11s ease-in-out infinite; }
/* ── ⑥ 💝 情人節：緞帶非常輕的漂移（主）＋偶發一顆柔和小心光 ────────────
★拿掉了主視覺呼吸★：緞帶已經在動，主視覺再呼吸就變成兩個常駐。 */
.lkfr-valentine .lk-fr-band { animation: lkCDrift 10.5s ease-in-out infinite; }
.lkfr-valentine .lk-fr-flora::before{
left: 34%; top: 24%; width: 14%; height: 14%;
background: radial-gradient(circle, rgba(255,206,220,.95) 0%, rgba(248,168,190,.45) 50%, transparent 72%);
animation: lkOSpark 13s ease-in-out infinite; }
/* ── ⑦ 🎁 春節：燈籠微擺（主）＋非常低頻的小金星芒（偶）────────────────
★拿掉了暖金光暈呼吸★：燈籠擺才是春節的識別，光暈是第二層裝飾。 */
.lkfr-cny .lk-fr-hang { animation: lkCSway 6.8s ease-in-out infinite; }
.lkfr-cny .lk-fr-main::after{
background: radial-gradient(circle at 62% 30%, rgba(255,232,164,.95) 0%, transparent 38%);
animation: lkOGlint 14s ease-in-out infinite; }
/* ── ⑧ 🛶 端午：香包微擺（主）＋下緣水波極輕流動（次）─────────────────
★拿掉了粽葉微擺★：香包擺＋水波已經是「碧水粽香」，粽葉再擺就是三個常駐。 */
.lkfr-dragonboat .lk-fr-hang { animation: lkCSwaySoft 6.8s ease-in-out infinite; }
.lkfr-dragonboat .lk-fr-band { animation: lkCRipple 10.5s ease-in-out infinite; }
/* ── ⑨ 🎄 聖誕：吊飾輕擺（主）＋小燈串低頻柔和交替（偶）────────────────
★拿掉了雪光★：小燈串交替本身就是聖誕，雪是第三個聲音。
交替的週期也從 5.4s 拉到 9s —— 太快會像跑馬燈。 */
.lkfr-xmas .lk-fr-hang { animation: lkCSway 7.6s ease-in-out infinite; }
.lkfr-xmas .lk-fr-main::after{
background: radial-gradient(circle at 34% 28%, rgba(255,238,190,.9) 0%, transparent 34%),
radial-gradient(circle at 68% 52%, rgba(190,235,205,.85) 0%, transparent 34%);
animation: lkOTwinkleAlt 9s ease-in-out infinite; }
/* ── ⑩ 🏆 榮耀之星：偶發香檳金掃光 ＋ 一顆短暫星芒（★沒有任何常駐★）─────
★店長指定這一套當節奏參考★：「低頻掃光＋星芒、沒有一直擺，這種克制方向很好」。
所以這一套一個字都沒改，其他 14 套是照它的節奏收斂的。 */
.lkfr-ranking .lk-fr-main::after{
background: linear-gradient(104deg, transparent 42%, rgba(246,226,176,.7) 50%, transparent 58%);
animation: lkOSweep 9.5s linear infinite; }
.lkfr-ranking .lk-fr-hang::after{
background: radial-gradient(circle at 50% 38%, rgba(255,246,214,.95) 0%, transparent 36%);
animation: lkOGlint 11.5s ease-in-out infinite; }
/* ── ⑪ 🍀 好運多多：四葉草輕擺（主）＋偶發嫩綠幸運光點 ──────────────────
★拿掉了主視覺呼吸★。 */
.lkfr-lucky .lk-fr-flora{ animation: lkCBreeze 6.8s ease-in-out infinite; }
.lkfr-lucky .lk-fr-flora::before{
left: 22%; top: 18%; width: 13%; height: 13%;
background: radial-gradient(circle, rgba(214,246,196,.95) 0%, rgba(160,214,132,.45) 50%, transparent 72%);
animation: lkOSpark 12s ease-in-out infinite; }
/* ── ⑫ 💰 錢多多：玉飾非常輕擺（主）＋元寶偶發金屬高光（偶）─────────────
★拿掉了下緣呼吸★。★不掉金幣★（本來就沒有）。 */
.lkfr-fortune .lk-fr-hang { animation: lkCSwaySoft 7.8s ease-in-out infinite; }
.lkfr-fortune .lk-fr-main::after{
background: linear-gradient(100deg, transparent 43%, rgba(255,240,190,.72) 50%, transparent 57%);
animation: lkOSweep 10s linear infinite; }
/* ── ⑬ 💜 紫月星語：月牙柔和呼吸（主）＋紫藤非常輕擺（次）＋少量星塵（偶）──
★店長：「可以比其他套夢幻，但也不要三個元素同時不停動」★
⇒ 維持三個動作（全 15 套只有這一套和中秋是滿配），但兩個常駐都放得更慢、
幅度用最小的 lkCSwaySoft ⇒ 同時在動，可是慢到不吵。 */
.lkfr-violetmoon .lk-fr-main { animation: lkCGlow 9.5s ease-in-out infinite; }
.lkfr-violetmoon .lk-fr-flora{ animation: lkCSwaySoft 8.6s ease-in-out infinite; }
.lkfr-violetmoon .lk-fr-main::before{
left: 56%; top: 16%; width: 15%; height: 15%;
background: radial-gradient(circle, rgba(240,224,255,.95) 0%, rgba(200,170,240,.5) 48%, transparent 72%);
animation: lkOSpark 11.5s ease-in-out infinite; }
/* ── ⑭ ❤️ 台中人：暖陽低頻亮起（主）＋吊飾午後微風（次）──────────────────
★拿掉了植物微風★：暖陽＋吊飾已經是「暖城日常」，植物再擺就是三個常駐。
店長要的是「台中日常的舒服」，不是觀光宣傳片。 */
.lkfr-taichung .lk-fr-main::after{
background: radial-gradient(circle at 30% 30%, rgba(255,214,150,.85) 0%, transparent 44%);
animation: lkCLamp 11s ease-in-out infinite; }
.lkfr-taichung .lk-fr-hang { animation: lkCSway 7.4s ease-in-out infinite; }
/* ── ⑮ 🛍️ 團購讚（湖綠版）：★店長逐條指定的三個動作★ ───────────────────
· 湖綠小舖暖燈【非常慢地】微亮 ⇒ lkCLamp 9.5s（原本 6.4s，放慢一半）
· 👍 吊飾【非常輕微】低頻擺動 ⇒ lkCBobSoft 7.6s（幅度約原本六成）
· 下緣緞帶偶爾一顆薄荷柔光沿弧線滑過 ⇒ lkOSlide 13s
★藤葉（flora）不再獨立持續搖動★ —— 這是店長明確要拿掉的那一個。
目標是「療癒好物市集正在營業」，不是電商促銷閃燈。 */
.lkfr-groupbuy .lk-fr-main::after{
background: radial-gradient(circle at 74% 22%, rgba(255,226,168,.8) 0%, transparent 34%);
animation: lkCLamp 9.5s ease-in-out infinite; }
.lkfr-groupbuy .lk-fr-hang { animation: lkCBobSoft 7.6s ease-in-out infinite; }
.lkfr-groupbuy .lk-fr-band::before{
left: 14%; top: 30%; width: 8%; height: 8%;
background: radial-gradient(circle, rgba(226,252,242,.98) 0%, rgba(150,224,205,.5) 48%, transparent 72%);
animation: lkOSlide 13s ease-in-out infinite; }
/* ══ deterministic stagger ═════════════════════════════════════════════
同一頁 10 個人戴不同框時，不可以全部同一秒一起閃。
做法：負延遲 = 該玩家的固定相位（renderer 依名字算出 0～11 的整數），
★不是隨機★ —— 同一個玩家每次 render 都是同一個相位，畫面不會跳動。
負延遲讓動畫「從中間開始」，所以不會出現一起從頭播放的整齊感。 */
/* ★一定要 !important★（這是實機量到的坑，不是保險）：
逐套是用 animation 簡寫下的，簡寫會把 animation-delay 重設成 0s；
而逐套選擇器（.lkfr-xxx .lk-fr-main，兩個 class）特異度又比這條（一個 class）高
⇒ 沒有 !important 時，★真的有動的那幾槽相位全部變 0★，
十個人會同一秒一起動 —— 示範頁第一版就是這樣，而 E 區當時量的是
--lk-st 這個自訂屬性（它是對的），所以看起來綠但其實沒效。
相位是跨所有套的全域規則，不該被逐套的簡寫蓋掉，所以這裡用 !important 是正確語意。 */
.lk-fr > i, .lk-fr2 > i,
.lk-fr > i::before, .lk-fr > i::after,
.lk-fr2 > i::before, .lk-fr2 > i::after{
animation-delay: calc(var(--lk-st, 0) * -0.97s) !important;
}
/* ══ 逐強度降級：★不是機械刪槽，也不是照抄 FULL★ ═════════════════════
店長：「MID：最多 1 個常駐＋1 個偶發。COMPACT：只允許 1 個低頻效果，
甚至完全靜態也可以。多人排行榜同時 10 人時，第一眼應該還是在看
名次、玩家、分數，不是看十顆頭像在閃。」
做法：先把該強度全部關掉，再★逐套★把「這個強度真的存在的槽」上面
最有主題辨識度的【那一個】動作開回來。
（各強度有哪幾槽由 avatar-frames.js 登錄表決定，不是這裡猜的。）
★COMPACT 一律完全靜態★：排行榜用的就是 COMPACT，30px 下任何動作都只是
雜訊，所以取最安靜的合法解。要恢復成「一個低頻」只要把最後那一段註解打開。
※ 逐套選擇器是「層 class ＋ 套 class」兩個 class 在同一個元素上，
特異度 0,3,0 > 下面這條 0,2,2，所以不需要 !important 就會贏。
※ 強度 class 故意寫兩次：只寫一次是 (0,1,2)，會輸給 FULL 逐套的 (0,2,1)，
MID/COMPACT 的粒子與掃光就關不掉（實測踩過，M-01 當時有 14 組超標）。 */
.lk-fr-mid.lk-fr-mid > i, .lk-fr-mid.lk-fr-mid > i::before, .lk-fr-mid.lk-fr-mid > i::after,
.lk-fr-compact.lk-fr-compact > i, .lk-fr-compact.lk-fr-compact > i::before,
.lk-fr-compact.lk-fr-compact > i::after{
animation: none; }
/* ★v0.61.1｜排行榜一律靜態★
店長 v0.60.994-5 的裁定沒有變：「排行榜十人時第一眼要看名次、玩家、分數」
⇒ 排行榜的頭像框★0 個執行中的動畫★。
v0.61.1 把排行榜的強度從 COMPACT 升成 FULL（compact 只有一槽，看起來像貼紙），
而上面那條靜態規則是綁在【強度 class】上的 ⇒ 升級之後動畫就跟著回來了
（collection-modal N-07 實測 30 個）。
⇒ 靜態規則改成★也綁在「排行榜這個位置」★：槽變多、動畫仍然是 0。
★不是把動畫整個拿掉★：我的／鄰居／拜訪／更衣室的 FULL 動效一點都沒有動。 */
/* 錨在 .lb-pet（排行榜這個位置本身），不是 #leaderboardList —— 排行榜的頭像
也會被單獨 render 到別的容器裡（例如 Gate 的離線量測），綁 id 會漏掉。 */
.lb-pet .lk-fr > i, .lb-pet .lk-fr > i::before, .lb-pet .lk-fr > i::after,
.lb-pet .lk-fr2 > i, .lb-pet .lk-fr2 > i::before, .lb-pet .lk-fr2 > i::after,
.lb-pet .lk-fr::after, .lb-pet .lk-fr2::after{
animation: none !important; }
/* ── MID 44px：每套【1 個常駐】，其中五套再加【1 個偶發】───────────────
常駐一律只留一個 —— 44px 已經看不清第二個動作，多一個只是耗電。
偶發只給「那個偶發本身就是主題」的五套（中秋暖光／秋葉／冰晶／小燈串／
榮耀之星的掃光）。 */
.lk-fr-mid.lkfr-midautumn .lk-fr-hang{ animation: lkCSway 7.2s ease-in-out infinite; }
.lk-fr-mid.lkfr-midautumn .lk-fr-main::before{
left: 62%; top: 20%; width: 16%; height: 16%;
background: radial-gradient(circle, rgba(255,232,170,.95) 0%, rgba(255,214,130,.4) 45%, transparent 70%);
animation: lkOSpark 13s ease-in-out infinite; }
/* 春季 mid=main,hang,band ⇒ 花枝擺 */
.lk-fr-mid.lkfr-spring .lk-fr-main{ animation: lkCSwaySoft 7.2s ease-in-out infinite; }
/* 夏季 ⇒ 海風擺（水光流動在 44px 幾乎看不出來，收斂掉）*/
.lk-fr-mid.lkfr-summer .lk-fr-hang{ animation: lkCSway 6.4s ease-in-out infinite; }
/* 秋季 ⇒ 穗／葉擺（flora 不在 MID ⇒ 換到 hang）＋ 偶爾一片秋葉 */
.lk-fr-mid.lkfr-autumn .lk-fr-hang{ animation: lkCSwaySoft 7.4s ease-in-out infinite; }
.lk-fr-mid.lkfr-autumn .lk-fr-band::before{
left: 26%; top: 6%; width: 11%; height: 11%; border-radius: 60% 40% 55% 45%;
background: radial-gradient(circle, rgba(240,170,90,.95) 0%, rgba(216,140,60,.45) 50%, transparent 72%);
animation: lkOFall 11.5s linear infinite; }
/* 冬季 ⇒ 極輕呼吸 ＋ 冰晶低頻閃亮 */
.lk-fr-mid.lkfr-winter .lk-fr-main{ animation: lkCBreath 9.2s ease-in-out infinite; }
.lk-fr-mid.lkfr-winter .lk-fr-main::after{
background: radial-gradient(circle at 40% 34%, rgba(255,255,255,.9) 0%, transparent 42%);
animation: lkOGlint 11s ease-in-out infinite; }
/* 情人節 mid=main,band ⇒ 緞帶輕漂 */
.lk-fr-mid.lkfr-valentine .lk-fr-band{ animation: lkCDrift 10.5s ease-in-out infinite; }
/* 春節 mid=main,band（★沒有 hang★ ⇒ 燈籠擺改成燈籠光暈呼吸）*/
.lk-fr-mid.lkfr-cny .lk-fr-main{ animation: lkCGlow 8.4s ease-in-out infinite; }
/* 端午 ⇒ 香包擺 */
.lk-fr-mid.lkfr-dragonboat .lk-fr-hang{ animation: lkCSwaySoft 6.8s ease-in-out infinite; }
/* 聖誕 ⇒ 吊飾擺 ＋ 小燈串低頻交替 */
.lk-fr-mid.lkfr-xmas .lk-fr-hang{ animation: lkCSway 7.6s ease-in-out infinite; }
.lk-fr-mid.lkfr-xmas .lk-fr-main::after{
background: radial-gradient(circle at 34% 28%, rgba(255,238,190,.9) 0%, transparent 34%),
radial-gradient(circle at 68% 52%, rgba(190,235,205,.85) 0%, transparent 34%);
animation: lkOTwinkleAlt 9s ease-in-out infinite; }
/* 榮耀之星 ⇒ ★保持沒有常駐★，只有一次掃光（店長指定的克制節奏）*/
.lk-fr-mid.lkfr-ranking .lk-fr-main::after{
background: linear-gradient(104deg, transparent 42%, rgba(246,226,176,.7) 50%, transparent 58%);
animation: lkOSweep 9.5s linear infinite; }
/* 好運多多 ⇒ 四葉草擺（flora 不在 MID ⇒ 換到 hang）*/
.lk-fr-mid.lkfr-lucky .lk-fr-hang{ animation: lkCBreeze 6.8s ease-in-out infinite; }
/* 錢多多 ⇒ 玉飾極輕擺 */
.lk-fr-mid.lkfr-fortune .lk-fr-hang{ animation: lkCSwaySoft 7.8s ease-in-out infinite; }
/* 紫月星語 ⇒ 月牙柔光呼吸（紫藤的擺在 44px 收斂掉，只留最夢幻的那一個）*/
.lk-fr-mid.lkfr-violetmoon .lk-fr-main{ animation: lkCGlow 9.5s ease-in-out infinite; }
/* 台中人 ⇒ 暖陽低頻亮起 */
.lk-fr-mid.lkfr-taichung .lk-fr-main::after{
background: radial-gradient(circle at 30% 30%, rgba(255,214,150,.85) 0%, transparent 44%);
animation: lkCLamp 11s ease-in-out infinite; }
/* 團購讚 mid=main,pet,hang ⇒ 👍 吊飾非常輕微擺動（44px 下它比暖燈更好認）*/
.lk-fr-mid.lkfr-groupbuy .lk-fr-hang{ animation: lkCBobSoft 7.6s ease-in-out infinite; }
/* ── COMPACT 30px：★完全靜態★ ─────────────────────────────────────────
上面那條關閉規則已經把 COMPACT 全部關掉，這裡刻意【不】開回任何一個。
店長：「COMPACT 只允許 1 個低頻效果，甚至完全靜態也可以」、
「多人排行榜同時 10 人時，第一眼應該還是在看名次、玩家、分數」。
排行榜用的就是 COMPACT，所以取最安靜的合法解。
要恢復成「每套一個極低頻」的話，把下面這一段的註解打開就好
（槽一定要是該套 COMPACT 真的有的槽 —— 團購讚是 hang,band，沒有 main）：
.lk-fr-compact.lkfr-groupbuy .lk-fr-hang{ animation: lkCBobSoft 16s ease-in-out infinite; }
.lk-fr-compact.lkfr-ranking .lk-fr-main::after{ animation: lkOSweep 16s linear infinite; }
…（其餘 13 套同理，一律 16s 以上）
★不要直接寫成「所有 COMPACT 共用一個 breathing」★ —— 那就是店長否決過的
「15 套只是同一個動畫換顏色」。 */
/* ══ 裝備特效同時啟用時：★先砍框的次要動畫★ ═══════════════════════════
兩個系統可以同時存在，但主角是裝備特效。
所以有 .lk-fx-on 時，框只留「主視覺 ＋ 吊掛物」的連續動作，
所有偶發粒子與掃光全部停掉。 */
.lk-fx-on .lk-fr > i::before, .lk-fx-on .lk-fr2 > i::before,
.lk-fx-on .lk-fr > i::after, .lk-fx-on .lk-fr2 > i::after,
.lk-fx-on .lk-fr-pet, .lk-fx-on .lk-fr-flora, .lk-fx-on .lk-fr-band{
/* ★一定要 !important★：逐套／逐強度的規則特異度比這條高（它們是
「層 class ＋ 套 class」兩個 class 在同一個元素上），沒有 !important
就壓不住 —— 而 budget 的語意本來就是「上限蓋過個性」。 */
animation: none !important; }
/* 砍完之後，有幾套的動作本來就只在掃光／粒子上（榮耀之星、錢多多、夏季、
秋季、聖誕、台中人、團購讚的暖燈）⇒ 戴裝備特效時那幾套的框會變成完全靜態。
這是刻意的：店長說「超過時優先砍 frame ambience 次要動畫」、
「不能搶走裝備特效的主角地位」。要不要改成「保留一個極低頻動作」，
等店長看完示範頁的「頭像框＋裝備特效」那一組再裁定。 */
/* ══ 弱化 ／ 全部靜態 ══════════════════════════════════════════════════ */
.lk-amb-soft{ --lk-amb: .45; } /* 弱化 ＝ 幅度 45%，節奏完全不變 */
.lk-amb-off .lk-fr > i, .lk-amb-off .lk-fr2 > i,
.lk-amb-off .lk-fr > i::before, .lk-amb-off .lk-fr > i::after,
.lk-amb-off .lk-fr2 > i::before, .lk-amb-off .lk-fr2 > i::after{
animation: none !important; }
/* ══ 頁面不可見時暫停（不做不必要的動畫）══════════════════════════════ */
.lk-paused .lk-fr > i, .lk-paused .lk-fr2 > i,
.lk-paused .lk-fr > i::before, .lk-paused .lk-fr > i::after,
.lk-paused .lk-fr2 > i::before, .lk-paused .lk-fr2 > i::after{
animation-play-state: paused !important; }
/* ══ prefers-reduced-motion：★完整靜態化★ ═════════════════════════════
只把時長設成 0 不夠（Chrome 的 getAnimations() 仍算 running），
所以直接 animation:none。 */
@media (prefers-reduced-motion: reduce){
.lk-fr > i, .lk-fr2 > i,
.lk-fr > i::before, .lk-fr > i::after,
.lk-fr2 > i::before, .lk-fr2 > i::after{
animation: none !important; }
}