/* 白叶 · 全站代码动画 wl-fx v1 —— 配合 wl-fx.js。只在 html.wlfx-on（未开「减少动态」）时生效。 */

/* 粒子浮层 */
.wlfx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2147483000; overflow: hidden; contain: strict; }
.wlfx-p { position: absolute; display: block; width: 4px; height: 4px; image-rendering: pixelated; will-change: transform, opacity; }
.wlfx-glyph { width: auto; height: auto; font: 700 18px/1 "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif; color: #c9b8ff; text-shadow: 0 0 8px rgba(160, 130, 255, .9), 0 0 2px #fff; }
html[data-theme="light"] .wlfx-glyph { color: #6b4fd8; text-shadow: 0 0 6px rgba(120, 90, 230, .5); }
.wlfx-orb { width: 10px; height: 10px; background: radial-gradient(circle at 35% 35%, #fbffd0 0 25%, #b9ff4a 26% 60%, #4fbf1f 61%); box-shadow: 0 0 10px #a8ff4a; }
.wlfx-coin { width: 12px; height: 12px; background: #ffd85a; box-shadow: inset -3px -3px 0 #d99a1e, inset 3px 3px 0 #fff2a8, 0 0 0 2px #7a4b00; }
.wlfx-tag { width: auto; height: auto; white-space: nowrap; padding: 3px 8px; font: 700 13px/1.2 inherit; color: #fff; background: #d9342b; border: 2px solid #000; box-shadow: 3px 3px 0 #000; }
.wlfx-leaf { width: auto; height: auto; font: 22px/1 serif; text-shadow: 2px 2px 0 rgba(0, 0, 0, .25); }

/* 画布（垫在容器背景之上、内容之下） */
.wlfx-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; image-rendering: pixelated; }

/* 昼夜切换：圆形扩散，关掉页面原来的淡入淡出 */
html.wlfx-vt::view-transition-old(root), html.wlfx-vt::view-transition-new(root) { animation: none !important; mix-blend-mode: normal; }
html.wlfx-vt::view-transition-old(root) { z-index: 1; }
html.wlfx-vt::view-transition-new(root) { z-index: 2; }

/* 卡片入场（动画结束后 JS 会把类拿掉，不影响原有悬停效果） */
html.wlfx-on .wlfx-rv { opacity: 0; }
html.wlfx-on .wlfx-rv:not(.wlfx-in) { animation: none !important; }
html.wlfx-on .wlfx-rv.wlfx-in { animation: wlfxIn .6s cubic-bezier(.2, .7, .2, 1) var(--wlfx-d, 0ms) both; }
@keyframes wlfxIn {
  0% { opacity: 0; translate: 0 18px; scale: .98; }
  60% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; scale: 1; }
}
/* 数字滚完后轻轻一跳 */
html.wlfx-on .wlfx-pop { animation: wlfxPop .45s cubic-bezier(.3, 1.8, .5, 1); display: inline-block; }
@keyframes wlfxPop { 0% { scale: 1; } 40% { scale: 1.14; } 100% { scale: 1; } }

/* —— 影像馆：快门闪光 + 取景框四角 + 悬停漏光 —— */
.wlfx-flash, .wlfx-leak, .wlfx-crop { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.wlfx-flash { background: #fff; opacity: 0; }
.wlfx-shot .wlfx-flash { animation: wlfxFlash .55s ease-out .15s both; }
@keyframes wlfxFlash { 0% { opacity: 0; } 12% { opacity: .9; } 100% { opacity: 0; } }
.wlfx-crop i { position: absolute; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .9); opacity: 0; }
.wlfx-crop i:nth-child(1) { left: 8px; top: 8px; border-right: 0; border-bottom: 0; }
.wlfx-crop i:nth-child(2) { right: 8px; top: 8px; border-left: 0; border-bottom: 0; }
.wlfx-crop i:nth-child(3) { left: 8px; bottom: 8px; border-right: 0; border-top: 0; }
.wlfx-crop i:nth-child(4) { right: 8px; bottom: 8px; border-left: 0; border-top: 0; }
.wlfx-shot .wlfx-crop i { animation: wlfxCrop .7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes wlfxCrop { 0% { opacity: 0; scale: 1.8; } 40% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
.photo-card:hover .wlfx-crop i, .photo-card:focus-visible .wlfx-crop i { opacity: 1; scale: 1; transition: opacity .2s; animation: none; }
.wlfx-leak { background: linear-gradient(105deg, transparent 30%, rgba(255, 170, 60, .0) 38%, rgba(255, 150, 60, .35) 48%, rgba(255, 220, 140, .45) 52%, transparent 64%); background-size: 260% 100%; background-position: 120% 0; mix-blend-mode: screen; opacity: 0; }
.photo-card:hover .wlfx-leak { animation: wlfxLeak 1.1s ease-out both; }
@keyframes wlfxLeak { 0% { opacity: 0; background-position: 120% 0; } 20% { opacity: 1; } 100% { opacity: 0; background-position: -60% 0; } }

/* —— 百科：读完一篇，经验条闪一下 —— */
.sp-hb-xp.wlfx-lvl { animation: wlfxLvl 1.1s ease-out; }
@keyframes wlfxLvl { 0%, 100% { filter: none; } 20% { filter: brightness(1.8) drop-shadow(0 0 6px #b9ff4a); } 50% { filter: brightness(1.2); } 70% { filter: brightness(1.6) drop-shadow(0 0 4px #b9ff4a); } }

/* —— 集市：行情柱生长、列表逐行入场 —— */
html.wlfx-on #spark rect.wlfx-grow { transform-box: fill-box; transform-origin: 50% 100%; animation: wlfxGrow .7s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 18ms) both; }
@keyframes wlfxGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
html.wlfx-on .wlfx-row { animation: wlfxRow .45s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 28ms) both; }
@keyframes wlfxRow { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: 0 0; } }

/* —— 居民档案：经验条流光 —— */
html.wlfx-on .sp-xpbar { position: relative; overflow: hidden; }
.wlfx-shine { position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: wlfxShine 3.2s ease-in-out 1s infinite; }
@keyframes wlfxShine { 0% { left: -40%; } 45%, 100% { left: 120%; } }

/* 保险：系统要求减少动态时，所有本文件动画关闭 */
@media (prefers-reduced-motion: reduce) {
  .wlfx-layer, .wlfx-cv, .wlfx-shine, .wlfx-flash, .wlfx-leak, .wlfx-crop { display: none !important; }
  .wlfx-rv { opacity: 1 !important; animation: none !important; }
}

/* ===================== v2 场景层（wl-fx-scenes.js） ===================== */
.wlfx-say { width: auto; height: auto; white-space: nowrap; padding: 4px 9px; font: 700 13px/1.2 system-ui, sans-serif; color: #222; background: #fff; border: 2px solid #222; box-shadow: 3px 3px 0 rgba(0,0,0,.35); }
.wlfx-say-hiss { color: #fff; background: #3e8e33; }
.wlfx-say-ender { font-size: 16px; color: #f3d9ff; background: #1a0f24; border-color: #c45cff; box-shadow: 0 0 18px rgba(196,92,255,.6); }

/* 1 地平线 */
.wlfx-hz { position: relative; display: block; width: 100%; height: 104px; margin-top: 24px; isolation: isolate; user-select: none; -webkit-tap-highlight-color: transparent; }
.wlfx-hz .wlfx-cv { z-index: 0; }
@media (max-width: 639px) { .wlfx-hz { height: 78px; margin-top: 12px; } }

/* 7 末影龙 */
.wlfx-dragon { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 2147482999; image-rendering: pixelated; }

/* 2 集市交易台 */
.wlfx-stall { position: relative; display: block; height: 118px; margin: 14px 0 6px; isolation: isolate; overflow: hidden; border-radius: 14px; }
.wlfx-stall .wlfx-cv { z-index: 0; }
.wlfx-tick { position: absolute; left: 110px; right: 110px; top: 18px; height: 40px; overflow: hidden; z-index: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wlfx-tick-track { display: inline-flex; gap: 22px; align-items: center; height: 100%; white-space: nowrap; animation: wlfxTick 48s linear infinite; padding-left: 20px; }
.wlfx-stall:hover .wlfx-tick-track { animation-play-state: paused; }
@keyframes wlfxTick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wlfx-tick-lab { font: 800 11px/1 ui-monospace, monospace; letter-spacing: .12em; color: #fff; background: #3ddc84; padding: 4px 7px; border-radius: 3px; }
.wlfx-tick-it { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.wlfx-tick-it em { font: 800 11px/1 ui-monospace, monospace; font-style: normal; opacity: .55; }
.wlfx-tick-it small { font: 700 12px/1 ui-monospace, monospace; color: #3ddc84; }
.wlfx-tick-ico { display: inline-block; width: 24px; height: 24px; image-rendering: pixelated; }
.wlfx-fly-ico { width: 24px; height: 24px; image-rendering: pixelated; z-index: 1; }
@media (max-width: 639px) { .wlfx-tick { left: 74px; right: 74px; } .wlfx-stall { height: 104px; } }

/* 3 居民档案 */
.wlfx-rings { position: absolute; right: 0; top: 0; width: 200px; height: 236px; pointer-events: none; }
.wlfx-rings .wlfx-cv { z-index: 0; }
.wlfx-rings-cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; line-height: 1.25; }
.wlfx-rings-cap b { display: block; font-size: 14px; }
.wlfx-rings-cap small { font-size: 11px; opacity: .6; }
.wlfx-radar { position: absolute; pointer-events: none; border-radius: 50%; }
.wlfx-radar .wlfx-cv { z-index: 0; }
.wlfx-nap { position: relative; height: 80px; pointer-events: none; }
.wlfx-nap .wlfx-cv { z-index: 0; }

/* 4 百科附魔书 */
.wlfx-book { position: fixed; right: 18px; bottom: 18px; z-index: 900; width: 76px; height: 86px; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; translate: 0 20px; pointer-events: none; transition: opacity .3s, translate .3s; filter: drop-shadow(0 4px 10px rgba(80,40,160,.35)); }
.wlfx-book.is-show { opacity: 1; translate: 0 0; pointer-events: auto; }
.wlfx-book:hover { translate: 0 -3px; }
.wlfx-book canvas { display: block; width: 72px; height: 72px; image-rendering: pixelated; margin: 0 auto; }
.wlfx-book-pct { display: block; text-align: center; font: 800 11px/1 ui-monospace, monospace; color: #8b6cf0; }
@media (max-width: 639px) { .wlfx-book { right: 10px; bottom: 76px; transform: scale(.8); transform-origin: 100% 100%; } }

/* 5 赞助 */
#rcWall.wlfx-glow { animation: wlfxGlow 1s ease-out; }
@keyframes wlfxGlow { 0% { box-shadow: 0 0 0 0 rgba(143,208,106,.0); } 30% { box-shadow: 0 0 0 6px rgba(143,208,106,.45), 0 0 30px rgba(143,208,106,.6); } 100% { box-shadow: 0 0 0 0 rgba(143,208,106,0); } }
html.wlfx-on .tier.wlfx-in .t-leaves svg { transform-origin: 50% 100%; animation: wlfxSprout .9s cubic-bezier(.3,1.5,.5,1) calc(var(--wlfx-d, 0ms) + 200ms) both; }
@keyframes wlfxSprout { from { transform: scale(.2, 0); } to { transform: scale(1); } }
html.wlfx-on .tier:hover .t-leaves svg { transform-origin: 50% 100%; animation: wlfxSway 1.6s ease-in-out infinite; }
@keyframes wlfxSway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }

/* 6 影像馆卷尾 */
.wlfx-reelend { position: relative; min-height: 300px; border-radius: 14px; overflow: hidden; isolation: isolate; pointer-events: none; }
.wlfx-reelend .wlfx-cv { z-index: 0; }
.wlfx-reelend-txt { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 1; text-align: center; color: #fff; }
.wlfx-reelend-txt b { display: block; font-size: 20px; letter-spacing: .3em; text-shadow: 0 0 12px rgba(255,220,150,.6); }
.wlfx-reelend-txt small { font: 600 11px/1.6 ui-monospace, monospace; letter-spacing: .12em; opacity: .65; }

/* 首页：深度计 */
.wlfx-depth { position: fixed; left: 18px; top: 22vh; height: 56vh; width: 44px; z-index: 50; opacity: 0; pointer-events: none; transition: opacity .4s; }
.wlfx-depth.is-show { opacity: 1; pointer-events: auto; }
.wlfx-depth-rail { position: absolute; left: 20px; top: 0; bottom: 0; width: 4px; border-radius: 2px; opacity: .7; }
.wlfx-depth-stop { position: absolute; left: 12px; width: 20px; height: 20px; margin-top: -10px; padding: 0; border: 0; background: none; cursor: pointer; }
.wlfx-depth-stop i { position: absolute; left: 5px; top: 5px; width: 10px; height: 10px; background: currentColor; opacity: .45; transition: opacity .2s, scale .2s; }
.wlfx-depth-stop.is-on i { opacity: 1; scale: 1.2; }
.wlfx-depth-stop span { position: absolute; left: 28px; top: 50%; translate: -6px -50%; white-space: nowrap; padding: 4px 8px; font: 700 12px/1 ui-monospace, monospace; background: rgba(20,20,26,.85); color: #fff; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s; }
.wlfx-depth-stop:hover span, .wlfx-depth-stop:focus-visible span { opacity: 1; translate: 0 -50%; }
.wlfx-depth-head { position: absolute; left: 13px; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; transition: top .25s cubic-bezier(.2,.7,.2,1);
  background: linear-gradient(#4a2f1c 0 33%, transparent 33%), linear-gradient(90deg, transparent 0 22%, #fff 22% 44%, transparent 44% 56%, #fff 56% 78%, transparent 78%) 0 45% / 100% 17% no-repeat, #c69c6d;
  box-shadow: 0 0 0 2px #2b1a10, 0 0 10px rgba(255,216,90,.6); image-rendering: pixelated; }
.wlfx-depth-read { position: absolute; left: 38px; margin-top: -8px; pointer-events: none; font: 800 11px/16px ui-monospace, monospace; white-space: nowrap; opacity: .75; transition: top .25s cubic-bezier(.2,.7,.2,1); }

/* 首页：矿车轨道 / 在线心跳 / 红石流光 / 榜首 */
.wlfx-rail { position: absolute; left: 0; right: 0; top: -38px; height: 38px; pointer-events: none; }
.wlfx-rail .wlfx-cv { z-index: 0; }
html.wlfx-on .wl-step.wlfx-ding { animation: wlfxDing .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes wlfxDing { 0% { translate: 0 0; } 35% { translate: 0 -6px; } 100% { translate: 0 0; } }
html.wlfx-on .wl-st-bar { position: relative; overflow: hidden; }
.wlfx-redstone { position: absolute; top: 0; bottom: 0; left: -24px; width: 24px; pointer-events: none; background: linear-gradient(90deg, transparent 0 4px, #7a0000 4px 8px, #d9342b 8px 12px, #ff5a3c 12px 16px, #ffd0a0 16px 20px, transparent 20px); box-shadow: 0 0 6px 1px rgba(255,60,40,.55); animation: wlfxRed 1.8s steps(18) infinite; }
@keyframes wlfxRed { from { left: -24px; } to { left: 100%; } }.wlfx-totem { position: relative; }
.wlfx-totem::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 40%, rgba(255,216,90,.28) 50%, transparent 60%); background-size: 250% 100%; animation: wlfxTotem 4s ease-in-out 1s infinite; }
@keyframes wlfxTotem { 0% { background-position: 130% 0; } 40%, 100% { background-position: -30% 0; } }

@media (prefers-reduced-motion: reduce) {
  .wlfx-hz, .wlfx-stall, .wlfx-rings, .wlfx-radar, .wlfx-nap, .wlfx-book, .wlfx-reelend, .wlfx-depth, .wlfx-rail, .wlfx-redstone, .wlfx-dragon { display: none !important; }
}

/* —— v2b：像素化修正 / 矿井井壁 / 榜首金星 —— */
.wlfx-rings-cap { font-family: "WhiteLeaf Pixel", inherit; -webkit-font-smoothing: none; }
.wlfx-rings .wlfx-cv, .wlfx-radar .wlfx-cv, .wlfx-ecg-cv, .wlfx-shaft-cv { image-rendering: pixelated; image-rendering: crisp-edges; }
.wlfx-radar { border-radius: 0; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.28)); }
.wlfx-shaft { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.wlfx-shaft .wlfx-cv { z-index: 0; }
html.wlfx-mining, html.wlfx-mining body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%235b3f22' d='M10 10h3v3h-3zM7 13h3v3H7zM4 16h3v3H4z'/%3E%3Cpath fill='%234ee6ee' d='M7 1h9v3h3v3h3v9h-3v-6h-3V7h-3V4H7z'/%3E%3C/svg%3E") 4 20, pointer; }
.wlfx-depth-rail { left: 17px; width: 8px; border-radius: 0; opacity: 1; box-shadow: 0 0 0 2px rgba(0,0,0,.55); }
.wlfx-p.wlfx-star { width: 3px; height: 3px; background: #fff2a8; box-shadow: 3px 0 #ffd85a, -3px 0 #ffd85a, 0 3px #ffd85a, 0 -3px #ffd85a; }
@media (prefers-reduced-motion: reduce) { .wlfx-shaft { display: none !important; } }
/* v2c：自己的档案里，雷达放进「登记新基地」那一格 */
.wlfx-radar.is-intile { position: relative; left: auto; top: auto; flex: none; margin-bottom: 10px; }

/* v2d：访客也看得到雷达——空框里空转扫描；一排排满时标题栏右侧小雷达 */
.wlfx-radar.is-empty { position: relative; left: auto; top: auto; display: block; margin: 0 auto 14px; }
.wlfx-radar.is-mini { position: relative; left: auto; top: auto; flex: none; display: inline-block; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.28)); }
