/* 福建人福建魂 · 登录后水墨动效（motion v1）
   接在 fj-inner-v1.css 之后载入，只加装饰：按压墨晕／飞墨／朱印、离页淡墨、进场、骊山远景与流云、页首墨龙。
   装饰层全部 pointer-events:none、不占版面；信件正文（iframe／pre）之上不叠任何东西；prefers-reduced-motion 时全部关闭。 */

/* ---------- 1. 按压：不规则墨晕＋飞墨＋朱印（画在独立的装饰层，不放进按钮里）---------- */
.fj-drop{display:none!important}/* v1 的圆形墨晕改由下面的不规则墨晕取代 */
.fj-fx{position:fixed;inset:0;z-index:2147480000;pointer-events:none;overflow:hidden;contain:strict}
.fj-fx i{position:absolute;display:block;pointer-events:none}
.fj-fx .bl{overflow:hidden;isolation:isolate}
.fj-fx .bl>i{width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);
  background:radial-gradient(closest-side,currentColor 0 40%,color-mix(in srgb,currentColor 50%,transparent) 64%,transparent);
  -webkit-mask:url(/assets/ink/fj-bloom.webp) center/contain no-repeat;mask:url(/assets/ink/fj-bloom.webp) center/contain no-repeat;
  opacity:0;animation:fjm-bloom .56s cubic-bezier(.12,.7,.25,1) both}
.fj-fx .dot{width:var(--d,30px);height:var(--d,30px);margin:calc(var(--d,30px)/-2) 0 0 calc(var(--d,30px)/-2);background:var(--ink,#1d1b17);
  -webkit-mask:url(/assets/ink/fj-bloom.webp) center/contain no-repeat;mask:url(/assets/ink/fj-bloom.webp) center/contain no-repeat;
  opacity:0;animation:fjm-dot .5s cubic-bezier(.15,.7,.3,1) both}
.fj-fx .fk{width:var(--z);height:var(--z);margin:calc(var(--z)/-2) 0 0 calc(var(--z)/-2);background:var(--ink,#1d1b17);
  -webkit-mask:url(/assets/ink/fj-fleck.webp) var(--m) 50%/400% 100% no-repeat;mask:url(/assets/ink/fj-fleck.webp) var(--m) 50%/400% 100% no-repeat;
  opacity:0;animation:fjm-fleck .46s cubic-bezier(.2,.8,.3,1) both}
.fj-fx .sl{width:22px;height:22px;margin:-11px 0 0 -11px;background:url(/assets/ink/fj-seal.webp) center/contain no-repeat;
  opacity:0;animation:fjm-seal .52s cubic-bezier(.3,1.4,.5,1) both}
@keyframes fjm-bloom{0%{opacity:.36;transform:scale(.06) rotate(var(--r))}55%{opacity:.26}100%{opacity:0;transform:scale(1) rotate(var(--r))}}
@keyframes fjm-dot{0%{opacity:.3;transform:scale(.2) rotate(var(--r))}100%{opacity:0;transform:scale(1) rotate(var(--r))}}
@keyframes fjm-fleck{0%{opacity:.9;transform:translate(0,0) rotate(var(--a)) scale(.5)}70%{opacity:.75}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--a)) scale(1)}}
@keyframes fjm-seal{0%{opacity:0;transform:scale(1.9) rotate(-18deg)}30%{opacity:.95;transform:scale(.9) rotate(-7deg)}65%{opacity:.92;transform:scale(1) rotate(-7deg)}100%{opacity:0;transform:scale(1.02) rotate(-7deg)}}

/* ---------- 2. 离页：一道淡墨从左扫过（页首之下、内容之上；导航照常进行）---------- */
.fj-wipe{position:fixed;inset:0;z-index:19;pointer-events:none;overflow:hidden;contain:strict;transition:opacity .25s}
.fj-wipe.out{opacity:0}
.fj-wipe b{position:absolute;top:0;bottom:0;left:0;width:160%;display:block;
  background:linear-gradient(90deg,var(--bg,#f3eee2) 0 62.5%,color-mix(in srgb,var(--ink,#1d1b17) 14%,var(--bg,#f3eee2)) 69%,color-mix(in srgb,var(--ink,#1d1b17) 6%,transparent) 74%,transparent 78%);
  opacity:.72;transform:translateX(-100%);animation:fjm-sweep .24s cubic-bezier(.45,0,.2,1) forwards}
.fj-wipe i{position:absolute;display:block;width:var(--d);height:var(--d);margin:calc(var(--d)/-2) 0 0 calc(var(--d)/-2);background:var(--ink,#1d1b17);
  -webkit-mask:url(/assets/ink/fj-wipe.webp) center/contain no-repeat;mask:url(/assets/ink/fj-wipe.webp) center/contain no-repeat;
  opacity:0;transform:scale(.12) rotate(var(--r));animation:fjm-blot .24s cubic-bezier(.2,.75,.3,1) forwards}
@keyframes fjm-sweep{to{transform:translateX(0)}}
@keyframes fjm-blot{40%{opacity:.17}to{opacity:.12;transform:scale(1) rotate(var(--r))}}
/* 站内换页的交叉淡入改短、只用透明度，留给下面的分段进场 */
::view-transition-old(root){animation:.16s ease-out both fjm-vt-out}
::view-transition-new(root){animation:.2s ease-out both fjm-vt-in}
@keyframes fjm-vt-out{to{opacity:0}}
@keyframes fjm-vt-in{from{opacity:0}}

/* ---------- 3. 进场：首次绘制时内容分段浮起（全部在 400ms 内结束）---------- */
body[data-screen]>main>*{animation:fjm-rise .26s cubic-bezier(.2,.7,.25,1) backwards}
body[data-screen]>main>:nth-child(2){animation-delay:35ms}
body[data-screen]>main>:nth-child(3){animation-delay:70ms}
body[data-screen]>main>:nth-child(4){animation-delay:105ms}
body[data-screen]>main>:nth-child(n+5){animation-delay:140ms}
.js .mcard,.js .acct{animation-duration:.26s;animation-delay:calc(min(var(--i,0),5)*18ms + 50ms)}
.js body[data-screen="set"] .card{animation-duration:.26s;animation-delay:calc(min(var(--i,0),4)*25ms + 20ms)}
.split .ch{animation-duration:.28s;animation-delay:calc(min(var(--i,0),6)*12ms + 20ms)}
@keyframes fjm-rise{from{opacity:0;translate:0 10px}}

/* ---------- 4. 骊山远景：晚霞、落日、远峰、华清宫、流云（在内容之后、对比很低）---------- */
.fj-bg{--g:1}
.fj-bg .glow{left:0;right:0;bottom:0;height:min(62vh,660px);
  background:radial-gradient(ellipse 40% 56% at 74% 100%,rgba(232,146,80,.22),rgba(232,146,80,.08) 46%,transparent 72%),
    radial-gradient(ellipse 90% 44% at 38% 100%,rgba(214,124,82,.07),transparent 70%);
  opacity:var(--g);animation:fjm-in 2.4s .2s both,fjm-breathe 16s 2.6s ease-in-out infinite alternate}
.fj-bg .sun{right:17%;bottom:min(24vh,260px);width:min(118px,9vw);aspect-ratio:360/348;background:url(/assets/ink/sun-glow.webp) center/contain no-repeat;
  opacity:.085;animation:fjm-in 3s .4s both}
.fj-bg .far{background-image:url(/assets/ink/lishan-far.webp)}
.fj-bg .mid{background-image:url(/assets/ink/lishan-mid.webp)}
.fj-bg .palace{left:6%;bottom:min(10vh,110px);width:min(430px,33vw);aspect-ratio:900/338;background:url(/assets/ink/lishan-palace.webp) center bottom/contain no-repeat;
  opacity:.16;animation:fjm-in 2.4s .6s both}
.fj-bg .cloud{right:5%;bottom:min(33vh,360px);width:min(260px,22vw);aspect-ratio:480/349;background:url(/assets/ink/cloud-swirl.webp) center/contain no-repeat;
  opacity:.07;animation:fjm-in 3s 1s both,fjm-bob 40s ease-in-out infinite alternate}
.fj-bg .mist2{left:0;bottom:4vh;width:300%;height:12vh;background:url(/assets/ink/mist.webp) repeat-x left center/auto 100%;
  opacity:.3;animation:fjm-in 2.6s 1.2s both,fjm-drift2 260s linear infinite}
:root[data-theme="dark"] .fj-bg{--g:.32}
:root[data-theme="dark"] .fj-bg .glow{filter:none}
:root[data-theme="dark"] .fj-bg .far{background-image:url(/assets/ink/lishan-far-n.webp);filter:none}
:root[data-theme="dark"] .fj-bg .mid{background-image:url(/assets/ink/lishan-mid-n.webp);filter:none}
:root[data-theme="dark"] .fj-bg .sun{display:none}
@keyframes fjm-in{from{opacity:0}}
@keyframes fjm-breathe{from{opacity:calc(var(--g)*.72)}to{opacity:var(--g)}}
@keyframes fjm-bob{from{transform:translate(0,0)}to{transform:translate(-36px,-8px)}}
@keyframes fjm-drift2{from{transform:translateX(-33.333%)}to{transform:translateX(0)}}

/* ---------- 5. 页首墨龙（由 JS 偶尔放出，约 6 秒飞越后移除）---------- */
.fj-dragon{position:fixed;left:0;top:0;z-index:21;width:200px;height:60px;pointer-events:none;opacity:0;will-change:transform,opacity;mix-blend-mode:multiply}
.fj-dragon svg{display:block;width:200px;height:60px;overflow:visible;opacity:.5}
.fj-dragon .b{fill:#1d1b17;fill-opacity:.58}
.fj-dragon .k{fill:#1d1b17}
.fj-dragon .s{fill:none;stroke:#f3eee2;stroke-width:1.5;stroke-dasharray:1.4 2.4;stroke-linecap:round;opacity:.45}
.fj-dragon .t{fill:none;stroke:#1d1b17;stroke-width:1.1;stroke-linecap:round}
:root[data-theme="dark"] .fj-dragon{mix-blend-mode:screen}
:root[data-theme="dark"] .fj-dragon svg{filter:invert(1) hue-rotate(180deg)}

/* ---------- 分页在背景时暂停装饰动画 ---------- */
html.fj-hidden .fj-bg i,html.fj-hidden .fj-fx i,html.fj-hidden .fj-wipe *{animation-play-state:paused}

/* ---------- 手机：不放墨龙、雾淡一些 ---------- */
@media (max-width:760px){
  .fj-dragon{display:none!important}
  .fj-bg .mist{opacity:.3}
  .fj-bg .mist2,.fj-bg .cloud{display:none}
  .fj-bg .glow{height:34vh}
  .fj-bg .sun{width:64px;bottom:15vh;right:14%}
  .fj-bg .palace{width:52vw;bottom:5vh;opacity:.13}
}

/* ---------- 减少动态：全部关闭，只留静态远景 ---------- */
@media (prefers-reduced-motion:reduce){
  .fj-fx,.fj-wipe,.fj-dragon{display:none!important}
  .fj-bg .glow,.fj-bg .sun,.fj-bg .palace,.fj-bg .cloud,.fj-bg .mist2{animation:none!important}
  body[data-screen]>main>*{animation:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}