/*
 * 两不相伤·庄子意境登录页  v1.1.0
 * ------------------------------------------------------------------
 * 仅覆盖 WordPress 登录页（body.login-action-login）外观，不动登录逻辑。
 * 配色：墨黑 / 灰蓝 / 宣纸白。无高饱和渐变、无装饰纹样。
 *
 * v1.1.0 修订（2026-10-24）：
 *   1. 小舟由「从 58% 往下长」改为「整舟在视口垂直居中」，不再被视口底边切掉；
 *      水天相接处统一由 --zz-horizon 控制。
 *   2. 表单节奏压紧（行距 / 内边距），降低整舟高度，短屏自动收起引文。
 *   3. 启程动画加长加重：向水天相接处上移 + 缩小 + 淡出，配合「相忘于江湖」。
 *   4. 返回博客 / 语言切换移到四角，避免与舟体重叠。
 */

/* ==================== 1. 变量 ==================== */
body.login-action-login {
    --zz-ink:        #1b1f23;
    --zz-ink-soft:   #3d454d;
    --zz-ink-faint:  #6b7783;
    --zz-blue:       #6d8090;
    --zz-blue-soft:  #93a5b1;
    --zz-paper:      #f6f4f0;
    --zz-sky:        #e9eef0;
    --zz-water:      #dde5e7;
    --zz-line:       rgba(27,31,35,.14);
    --zz-ease:       cubic-bezier(.32,.06,.24,1);
    --zz-boat-w:     420px;
    --zz-horizon:    42%;        /* 水天相接处 */
}

/* ==================== 2. 舞台：清掉 WP 默认底色 ==================== */
body.login-action-login {
    background: var(--zz-paper);
    color: var(--zz-ink);
    font-family: "Songti SC","Source Han Serif SC","Noto Serif CJK SC",
                 "STSong","SimSun",Georgia,serif;
    overflow-x: hidden;
    min-height: 100vh;
}

/* 天光 / 水色 / 地平线 */
.zz-sky,
.zz-water,
.zz-horizon,
.zz-hills,
.zz-mist,
.zz-ripples {
    position: fixed;
    left: 0; right: 0;
    pointer-events: none;
}
.zz-sky   { top: 0; height: var(--zz-horizon); bottom: auto;
            background: linear-gradient(180deg,#f2f5f6 0%,var(--zz-sky) 58%,#e3eaec 100%); }
.zz-water { top: var(--zz-horizon); bottom: 0;
            background: linear-gradient(180deg,#e6ecee 0%,var(--zz-water) 40%,#d3dcdf 100%); }
.zz-horizon { top: var(--zz-horizon); height: 1px;
            background: linear-gradient(90deg,transparent,
                        rgba(109,128,144,.5) 22%,rgba(109,128,144,.55) 50%,
                        rgba(109,128,144,.5) 78%,transparent);
            will-change: transform; }
.zz-hills { top: calc(var(--zz-horizon) - 62px); height: 70px; opacity: .16; will-change: transform; }
.zz-hills svg { width: 100%; height: 100%; display: block; }

.zz-mist { border-radius: 50%; filter: blur(38px); pointer-events: none;
           will-change: transform; }
.zz-mist--a { left:-8%;  top:26%; width:62vw; height:34vh; opacity:.42;
              background: radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0) 72%); }
.zz-mist--b { right:-12%; top:34%; width:56vw; height:26vh; opacity:.30;
              background: radial-gradient(closest-side,rgba(185,199,207,.85),rgba(185,199,207,0) 70%); }
.zz-mist--c { left:22%;  top:38%; width:48vw; height:18vh; opacity:.24;
              background: radial-gradient(closest-side,rgba(255,255,255,1),rgba(255,255,255,0) 68%); }

.zz-ripples { top: var(--zz-horizon); bottom: 0; overflow: hidden; }
.zz-ripple {
    position: absolute; left: -30%; width: 160%; height: 1px;
    background: linear-gradient(90deg,transparent,rgba(109,128,144,.42) 30%,
                rgba(109,128,144,.42) 62%,transparent);
    animation: zz-drift linear infinite, zz-breathe ease-in-out infinite;
    will-change: transform,opacity;
}
.zz-r1 { top:14%; animation-duration:34s, 9s;  }
.zz-r2 { top:30%; animation-duration:46s,12s; animation-delay:-8s,-3s; }
.zz-r3 { top:50%; animation-duration:58s,15s; animation-delay:-20s,-6s; }
.zz-r4 { top:70%; animation-duration:70s,18s; animation-delay:-32s,-9s; }
.zz-r5 { top:86%; animation-duration:84s,21s; animation-delay:-44s,-12s; }
@keyframes zz-drift  { from{transform:translate3d(-6%,0,0)} to{transform:translate3d(6%,0,0)} }
@keyframes zz-breathe{ 0%,100%{opacity:.28} 50%{opacity:.75} }

/* ==================== 3. 小舟：三层（视差 / 驶离 / 船身） ==================== */
/* 整舟在视口垂直居中 —— 关键修复：不再从 58% 往下长，避免底部被切 */
.zz-parallax {
    position: fixed; left: 0; right: 0; top: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 18px 0;
    z-index: 5; pointer-events: none;
    will-change: transform;
}
.zz-voyage {
    position: relative; width: var(--zz-boat-w);
    pointer-events: auto;
    /* 先走（保持可见），后淡（溶入雾中）——读得出「驶向远处」而不只是淡出 */
    transition: transform 2100ms var(--zz-ease), opacity 1100ms ease-in 900ms;
    will-change: transform, opacity;
}
.zz-boat { position: relative; transform: translateY(-4px); }

/* 船篷：承载登录表单 */
.zz-canopy {
    position: relative; z-index: 2;
    background: linear-gradient(180deg,rgba(246,244,240,.97),rgba(239,236,230,.94));
    box-shadow: 0 1px 0 rgba(27,31,35,.06), 0 18px 44px -28px rgba(27,31,35,.42);
    border-radius: 2px;
    padding: 26px 32px 22px;
}
.zz-canopy::before {   /* 篷檐：一道淡影，暗示船篷而非卡片 */
    content:""; position:absolute; left:-6px; right:-6px; top:-7px; height:8px;
    background: linear-gradient(180deg,rgba(27,31,35,.10),rgba(27,31,35,0));
    border-radius: 3px;
}
.zz-hull        { display:block; width:100%; height:auto; margin-top:-2px; }
.zz-hull-reflect{ display:block; width:100%; height:auto; margin-top:-4px;
                  transform: scaleY(-1); opacity:.14;
                  mask-image: linear-gradient(180deg,rgba(0,0,0,.9),transparent 72%);
                  -webkit-mask-image: linear-gradient(180deg,rgba(0,0,0,.9),transparent 72%); }

/* 标题与引文（由 JS 注入） */
.zz-title    { margin:0 0 5px; font-size:25px; font-weight:500;
               letter-spacing:.22em; color:var(--zz-ink); }
.zz-subtitle { margin:0 0 18px; font-size:12.5px; letter-spacing:.16em;
               color:var(--zz-ink-faint); }
.zz-quote    { margin:14px 0 0; font-size:11.5px; line-height:1.8;
               color:var(--zz-blue-soft); letter-spacing:.08em; text-align:center; }
.zz-quote cite { font-style:normal; opacity:.8; }

/* ==================== 4. 覆盖 WP 登录表单 ==================== */
body.login-action-login #login {
    width: 100%; padding: 0; margin: 0;
}
body.login-action-login .wp-login-logo { display: none; }        /* 去 WP 标识 */

body.login-action-login #loginform {
    background: transparent; box-shadow: none; border: 0;
    padding: 0; margin: 0; overflow: visible;
}
body.login-action-login #loginform p { margin: 0 0 16px; }
body.login-action-login #loginform label {
    display: block; font-size: 12px; letter-spacing: .14em;
    color: var(--zz-ink-soft); margin-bottom: 6px; cursor: pointer;
}
body.login-action-login #loginform label i {
    font-style: normal; font-size: 11px; color: var(--zz-blue-soft);
    letter-spacing: .1em; margin-left: 6px;
}
body.login-action-login #loginform input.input {
    width: 100%; font-family: inherit; font-size: 16px;   /* 16px 防 iOS 缩放 */
    color: var(--zz-ink); background: transparent;
    border: 0; border-bottom: 1px solid var(--zz-line);
    border-radius: 0; padding: 8px 2px; margin: 0;
    box-shadow: none; outline: none;
    transition: border-color .35s var(--zz-ease), background-color .35s var(--zz-ease);
}
body.login-action-login #loginform input.input:hover { border-bottom-color: rgba(27,31,35,.26); }
body.login-action-login #loginform input.input:focus {
    border-bottom-color: var(--zz-blue); background: rgba(233,238,240,.5);
    box-shadow: none; outline: none;
}
body.login-action-login #loginform input.input:disabled { opacity: .55; }

/* 密码框与「显示密码」按钮 */
body.login-action-login .user-pass-wrap { position: relative; }
body.login-action-login .wp-pwd { position: relative; }
body.login-action-login .wp-hide-pw {
    position: absolute; right: 0; top: 4px;
    background: transparent; border: 0; box-shadow: none;
    color: var(--zz-blue-soft); padding: 4px 2px; min-height: 0; height: auto;
}
body.login-action-login .wp-hide-pw .dashicons { font-size: 15px; width: 15px; height: 15px; }
body.login-action-login .wp-hide-pw:hover { color: var(--zz-ink); background: transparent; }
body.login-action-login .wp-hide-pw:focus-visible { outline: 2px solid var(--zz-blue); outline-offset: 2px; }

/* 记住我 */
body.login-action-login .forgetmenot {
    display: flex; align-items: center; gap: 8px;
    margin: 16px 0 14px; font-size: 12px; letter-spacing: .06em; color: var(--zz-ink-soft);
    float: none;
}
body.login-action-login .forgetmenot label { margin: 0; font-size: 12px; }
body.login-action-login .forgetmenot input[type=checkbox] {
    width: 15px; height: 15px; margin: 0; accent-color: var(--zz-blue);
    box-shadow: none; border: 1px solid var(--zz-line);
}
body.login-action-login .forgetmenot input[type=checkbox]:focus-visible {
    outline: 2px solid var(--zz-blue); outline-offset: 2px;
}
/* 帮助气泡（图标化，与意境冲突）——隐藏但保留文字提示于 title */
body.login-action-login .forgetmenot .wp-tooltip { display: none; }

/* 提交按钮 */
body.login-action-login p.submit { margin: 0; }
body.login-action-login #wp-submit {
    width: 100%; display: block;
    font-family: inherit; font-size: 15px; letter-spacing: .36em; text-indent: .36em;
    color: var(--zz-paper); background: var(--zz-ink);
    border: 0; border-radius: 2px; box-shadow: none; text-shadow: none;
    padding: 12px 0; min-height: 0; height: auto; line-height: 1.2; cursor: pointer;
    transition: background-color .35s var(--zz-ease), letter-spacing .5s var(--zz-ease), opacity .3s;
}
body.login-action-login #wp-submit:hover {
    background: var(--zz-ink-soft); letter-spacing: .44em; color: var(--zz-paper);
}
body.login-action-login #wp-submit:focus-visible { outline: 2px solid var(--zz-blue); outline-offset: 3px; }
body.login-action-login #wp-submit:disabled,
body.login-action-login #wp-submit[disabled] { opacity: .5; cursor: default; letter-spacing: .36em; }

/* 错误提示（WP 的 #login_error） */
body.login-action-login #login_error,
body.login-action-login .message,
body.login-action-login .notice {
    background: transparent; border: 0; border-left: 0; box-shadow: none;
    margin: 0 0 12px; padding: 0; color: #8a5b52;
    font-size: 11.5px; letter-spacing: .05em; text-align: center;
}
/* 前端校验提示（JS 注入） */
.zz-err {
    display: block; min-height: 15px; margin: -10px 0 10px;
    font-size: 11.5px; letter-spacing: .05em; color: #8a5b52; text-align: center;
    opacity: 0; transform: translateY(-3px);
    transition: opacity .28s var(--zz-ease), transform .28s var(--zz-ease);
}
.zz-err.is-on { opacity: 1; transform: none; }

/* 字段错误态 */
body.login-action-login .zz-field-error input.input { border-bottom-color: #8a5b52; }

/* 导航：注册 / 忘记密码 —— 保留功能，弱化排版 */
body.login-action-login #nav {
    margin: 14px 0 0; padding: 0; text-align: center;
    font-size: 12px; letter-spacing: .06em; color: var(--zz-ink-faint);
}
body.login-action-login #nav a { color: var(--zz-blue); text-decoration: none; }
body.login-action-login #nav a:hover { color: var(--zz-ink); }
body.login-action-login #nav a:focus-visible { outline: 2px solid var(--zz-blue); outline-offset: 3px; }

/* 返回博客 / 语言切换：移到四角，不与舟体重叠 */
body.login-action-login #backtoblog {
    position: fixed; left: 22px; top: 18px; right: auto; bottom: auto; margin: 0;
    text-align: left; font-size: 11.5px; letter-spacing: .08em; z-index: 6;
}
body.login-action-login #backtoblog a { color: var(--zz-blue-soft); text-decoration: none; }
body.login-action-login #backtoblog a:hover { color: var(--zz-ink); }

body.login-action-login .language-switcher {
    position: fixed; right: 20px; bottom: 16px; margin: 0; padding: 0; z-index: 6;
    text-align: right; font-size: 11px; color: var(--zz-blue-soft);
}
body.login-action-login .language-switcher label { display: block; margin-bottom: 4px; font-size: 11px; }
body.login-action-login .language-switcher select {
    font-size: 11px; color: var(--zz-ink-soft); background: rgba(255,255,255,.6);
    border: 1px solid var(--zz-line); border-radius: 2px; padding: 2px 4px;
    font-family: inherit; max-width: 130px;
}
body.login-action-login .language-switcher input.button {
    font-size: 11px; padding: 3px 8px; min-height: 0; height: auto; line-height: 1.4;
    background: transparent; border: 1px solid var(--zz-line); border-radius: 2px;
    box-shadow: none; color: var(--zz-ink-soft); font-family: inherit;
}

/* ==================== 5. 状态：轻晃 / 启程 ==================== */
.zz-shake { animation: zz-shake .42s var(--zz-ease); }
@keyframes zz-shake {
    0%,100%{ transform: translate3d(0,0,0) }
    25%{ transform: translate3d(-3px,0,0) }
    75%{ transform: translate3d(3px,0,0) }
}

/* 点击后等待服务端这段时间：舟身缓缓起伏，避免「点了没反应」的死等感 */
body.login-action-login.zz-waiting .zz-boat { animation: zz-sail 2.2s ease-in-out infinite; }
@keyframes zz-sail {
    0%,100% { transform: translateY(-4px) rotate(0deg); }
    50%     { transform: translateY(-7px) rotate(.4deg); }
}

/* 启程：缓缓驶向水天相接处（上移 + 缩小 + 淡出） */
body.login-action-login.zz-gone .zz-voyage {
    transform: translate3d(4vw, -7vh, 0) scale(.4);
    opacity: 0;
}
body.login-action-login.zz-gone .zz-canopy { pointer-events: none; }
body.login-action-login.zz-gone .zz-ripples { opacity: .55; transition: opacity 1.6s ease; }

.zz-farewell {
    position: fixed; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    margin: 0; text-align: center;
    font-size: 20px; letter-spacing: .42em; color: var(--zz-ink-soft);
    opacity: 0; transition: opacity 1.2s var(--zz-ease) .45s; pointer-events: none;
    z-index: 4;
}
body.login-action-login.zz-gone .zz-farewell { opacity: .9; }

/* ==================== 6. 响应式 ==================== */
/* 矮屏：收起引文，进一步压紧 */
@media (max-height: 820px) {
    .zz-quote { display: none; }
}
@media (max-height: 700px) {
    .zz-canopy { padding: 20px 28px 18px; }
    .zz-title { font-size: 21px; }
    .zz-subtitle { margin-bottom: 12px; }
    body.login-action-login #loginform p { margin-bottom: 12px; }
    body.login-action-login .forgetmenot { margin: 12px 0 10px; }
    .zz-hull-reflect { display: none; }
}

@media (max-width: 520px) {
    body.login-action-login { --zz-boat-w: min(90vw,420px); --zz-horizon: 38%; }
    .zz-canopy { padding: 22px 20px 20px; }
    .zz-title { font-size: 22px; letter-spacing: .18em; }
    .zz-r4, .zz-r5, .zz-mist--c { display: none; }   /* 减层，保帧率 */
    .zz-hills { opacity: .13; }
    body.login-action-login #backtoblog {
        left: 16px; top: auto; bottom: 16px;
    }
    body.login-action-login .language-switcher { right: 16px; bottom: 14px; }
}

/* ==================== 7. 降低动态效果 ==================== */
@media (prefers-reduced-motion: reduce) {
    .zz-ripple, .zz-mist { animation: none !important; }
    .zz-ripple { opacity: .42; }
    .zz-voyage { transition-duration: .001ms !important; }
    .zz-shake { animation: none !important; }
    .zz-boat   { animation: none !important; }
    .zz-farewell { transition-duration: .001ms !important; }
}