/* 福建人福建魂 · 登录页（水墨）。只给 login_page 用；站内其他页面仍用 lib/ui.php 的 CSS。 */
:root{
  --paper:#f3eee2;--panel:rgba(251,248,240,.74);--line:#e4dbc8;--line-strong:#cbbd9f;
  --fg:#1d1b17;--fg2:#4b463d;--muted:#8b8374;
  --red:#b3202a;--red-hover:#c92a34;--red-press:#8c161e;--red-ink:#f6e5df;--red-line:#e3b5ab;
  --brush:"Noto Serif TC","Songti TC","STSong","Noto Serif SC","SimSun",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Noto Sans SC",system-ui,sans-serif;
  --mono:"IBM Plex Mono",Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden}
body{color:var(--fg);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 水墨场景 ---------- */
.ink-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ink-scene i{position:absolute;display:block;background-repeat:no-repeat}
.ink-scene .far,.ink-scene .mid,.ink-scene .near{left:-6%;right:-6%;bottom:0;height:100%;background-size:cover;background-position:center bottom;
  transform:translate3d(calc(var(--mx, 0) * var(--k, 0px)), 0, 0);transition:transform .8s ease-out;opacity:0;animation:rise 1.8s ease-out forwards}
.ink-scene .far{background-image:url(mtn-far.webp);--k:-10px;top:-2%;bottom:auto;background-position:center top;animation-delay:.1s}
.ink-scene .mid{background-image:url(mtn-mid.webp);--k:-22px;height:96%;animation-delay:.35s}
.ink-scene .near{background-image:url(mtn-near.webp);--k:-40px;height:104%;bottom:-4%;animation-delay:.6s}
.ink-scene .mist{left:0;width:300%;height:42%;background:url(mist.webp) repeat-x left center/auto 100%;opacity:0;animation:fadein 2.4s 1s forwards,drift 140s linear infinite}
.ink-scene .mist.m1{top:30%}
.ink-scene .mist.m2{top:54%;height:32%;animation:fadein 2.4s 1.4s forwards,drift 90s linear infinite reverse}
.ink-scene .bamboo{top:-2%;right:-2%;width:min(34vw,380px);aspect-ratio:633/650;background:url(bamboo.webp) right top/contain no-repeat;transform-origin:100% 0;opacity:0;
  animation:fadein 1.6s 1.2s forwards,sway 7s 1.2s ease-in-out infinite alternate}

/* ---------- 版面 ---------- */
.fj{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,400px);align-items:center;
  gap:clamp(24px,5vw,80px);max-width:1120px;margin:0 auto;padding:clamp(24px,6vh,64px) clamp(16px,5vw,56px) 12vh}
.fj-art{position:relative;display:grid;justify-items:center;gap:6px;min-width:0}
.fj-art::before{content:"";position:absolute;inset:-4% -8%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(243,238,226,.82),rgba(243,238,226,.5) 60%,rgba(243,238,226,0))}

/* 「魂」：墨晕开 → 一笔写出 → 圆相慢转 → 盖「闽」印 */
.hun{position:relative;width:min(30vw,340px);aspect-ratio:1}
.hun i{position:absolute;display:block;pointer-events:none}
.hun .splash{inset:4%;background:url(splash.webp) center/contain no-repeat;opacity:0;animation:bleed 2.2s .2s cubic-bezier(.2,.7,.2,1) forwards}
.hun .enso{inset:-2%;background:url(enso.webp) center/contain no-repeat;opacity:0;animation:fadein 1.4s 1.6s forwards,spin 160s 1.6s linear infinite}
.hun .brush{left:15%;top:14%;width:70%;height:70%;background:url(fj-hun.webp) center/contain no-repeat;clip-path:inset(0 100% 0 0);animation:write 1.6s .8s cubic-bezier(.6,0,.3,1) forwards}
.hun .stamp{right:2%;bottom:4%;width:23%;aspect-ratio:1;background:url(fj-seal.webp) center/contain no-repeat;opacity:0;animation:stamp .5s 2.6s cubic-bezier(.3,1.6,.5,1) forwards}

.fj-title{margin:0;width:100%;max-width:560px;line-height:0}
.fj-title img{display:block;width:100%;height:auto;clip-path:inset(0 100% 0 0);animation:write 1.5s 1.5s cubic-bezier(.5,0,.3,1) forwards}
.stroke-u{display:block;height:26px;width:min(360px,70%);background:url(stroke.webp) center/contain no-repeat;clip-path:inset(0 100% 0 0);animation:write 1.1s 2.4s ease-out forwards;opacity:.7}

/* ---------- 宣纸面板 ---------- */
.fj-panel{position:relative;background:var(--panel);border:1px solid var(--line-strong);border-radius:6px;padding:30px 28px 26px;
  box-shadow:0 18px 50px rgba(60,40,20,.12);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;animation:rise 1s .5s ease-out forwards}
.fj-panel::before{content:"";position:absolute;left:14px;right:14px;top:8px;height:3px;background:var(--red);opacity:.85;border-radius:2px}
.fj-panel h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:6px 0 20px;font:900 26px/1.2 var(--brush);letter-spacing:.18em}
.fj-panel h2 small{font:500 11px/1 var(--mono);letter-spacing:.08em;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fj-panel form{display:grid;gap:18px;margin:0}
.fj-panel label{display:grid;gap:8px}
.fj-panel .lbl{font:700 13px/1 var(--brush);letter-spacing:.2em;color:var(--fg2)}
.fj-panel input{width:100%;height:46px;padding:0 14px;border:1px solid var(--line-strong);border-radius:4px;background:rgba(255,253,247,.9);color:var(--fg);font:16px/1 var(--sans);
  transition:border-color .2s,box-shadow .2s}
.fj-panel input:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px rgba(29,27,23,.08)}
.fj-panel button{height:48px;border:0;border-radius:4px;background:var(--fg);color:#f6f1e4;font:900 16px/1 var(--brush);letter-spacing:.5em;text-indent:.5em;cursor:pointer;
  transition:background .2s,transform .1s}
.fj-panel button:hover{background:var(--red)}
.fj-panel button:active{background:var(--red-press);transform:translateY(1px)}
.flash{display:flex;align-items:flex-start;gap:8px;margin:0 0 16px;padding:10px 12px;border:1px solid var(--red-line);border-radius:4px;background:var(--red-ink);color:#7d1a22;font-size:14px;line-height:1.5}
.flash svg{flex:none;width:16px;height:16px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2}
.flash.ok{border-color:#b9d9c3;background:#e0efe4;color:#1f5e37}

@keyframes rise{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
@keyframes fadein{to{opacity:1}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
@keyframes sway{from{rotate:-1.5deg}to{rotate:2deg}}
@keyframes bleed{0%{opacity:0;transform:scale(.25);filter:blur(10px)}60%{opacity:.45}100%{opacity:.14;transform:scale(1);filter:blur(0)}}
@keyframes write{to{clip-path:inset(0 0 0 0)}}
@keyframes spin{to{rotate:360deg}}
@keyframes stamp{0%{opacity:0;transform:scale(2.4) rotate(-18deg)}70%{opacity:1;transform:scale(.92) rotate(-6deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}

@media (max-width:820px){
  .fj{grid-template-columns:minmax(0,1fr);align-content:start;gap:18px;padding-top:28px;padding-bottom:16vh}
  .fj-art{gap:2px}
  .hun{width:min(46vw,200px)}
  .fj-title{max-width:min(92vw,440px)}
  .stroke-u{height:18px}
  .fj-panel{width:100%;max-width:420px;justify-self:center;padding:26px 20px 22px}
  .ink-scene .bamboo{width:42vw;top:2%}
}
@media (prefers-reduced-motion:reduce){
  .ink-scene i,.hun i,.fj-title img,.stroke-u,.fj-panel{animation:none!important;opacity:1;clip-path:none}
  .hun .splash{opacity:.14}
  .hun .stamp{transform:rotate(-6deg)}
}