/* ============================================================================
 * paper.css —— 「陈纸 + 沙画」登录页
 *
 * 用户要求：
 *   · 淡黄的白底，像「放了几个月的白纸」
 *   · 整个页面是沙画，中间的登录框**浅埋在细沙中**（能看见，不全遮）
 *   · 鼠标划过即推沙（不用按键），沙的交互物理拟真
 *   · 登录按钮**不要跳脱**（原来那种亮蓝实心按钮已经影响点击）
 *
 * 参考：mimo.mi.com 的半调网点 + 橄榄绿/米白配色
 * ========================================================================== */

:root {
  --paper:        #faf7ef;   /* 陈纸底色（淡黄白） */
  --paper-warm:   #f5f1e4;
  --paper-deep:   #ede7d6;
  --ink:          #3a3831;   /* 主文字：暖灰褐，不用纯黑 */
  --ink-2:        #6b6659;
  --ink-3:        #96907f;
  --olive:        #5f6b4a;   /* 参考图的橄榄绿 */
  --olive-deep:   #46503a;
  --sand-line:    #c9c0a8;
  --serif: "Songti SC", "Source Han Serif SC", "Noto Serif SC",
           "STSong", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.42, .44, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body.paper {
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.hidden { display: none !important; }

/* ── 页面容器 ─────────────────────────────────────────── */
.paper-wrap {
  position: relative; width: 100%; height: 100vh; overflow: hidden;
  background:
    radial-gradient(1200px 700px at 50% 40%, #fffdf7 0%, var(--paper) 45%, var(--paper-deep) 100%);
}

/* 沙画画布：★ 不接收鼠标事件 —— 保证「隔着沙子点登录框」没有违和感 */
#sand {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}

/* 陈纸纤维：极淡的斜纹 + 噪点，模拟纸张肌理 */
.paper-fibers {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5;
  background-image:
    repeating-linear-gradient(94deg, #00000006 0 1px, transparent 1px 3px),
    repeating-linear-gradient(4deg, #00000005 0 1px, transparent 1px 4px),
    radial-gradient(circle at 20% 30%, #00000008 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, #00000006 0 1px, transparent 1px);
  background-size: auto, auto, 7px 7px, 11px 11px;
}
/* 四角轻微压暗，像纸被手翻过的旧痕 */
.paper-vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 55%, #b9ad8e2e 100%),
    linear-gradient(180deg, #c8bb9920 0%, transparent 12%, transparent 88%, #c8bb9926 100%);
}

/* ── 内容层（z-index 高于沙画）───────────────────────── */
.stage {
  position: relative; z-index: 5;
  height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
}

.brand-line {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
.brand-line .rule {
  width: 46px; height: 1px; background: var(--sand-line);
}
.brand-text {
  font: 500 11px/1 var(--sans);
  letter-spacing: .28em; color: var(--ink-3); text-transform: uppercase;
}

.title {
  font: 400 40px/1.25 var(--serif);
  letter-spacing: .06em; color: var(--ink);
  margin-bottom: 10px;
  text-shadow: 0 1px 0 #ffffffcc, 0 -1px 0 #00000008;
}
.subtitle {
  font-size: 13px; color: var(--ink-3); letter-spacing: .12em; margin-bottom: 34px;
}

/* ── ★ 浅埋的登录框 ──────────────────────────────────── */
.card-embedded {
  position: relative;
  width: 100%; max-width: 372px;
  border-radius: 3px;
  /* 半透明：能看见纸纹与背后的沙 —— 「浅埋在细沙中」 */
  background: linear-gradient(180deg, #fdfbf542 0%, #f7f3e834 100%);
  border: 1px solid #b3a98c33;
  /* 内阴影造出「陷进去」的感觉，外阴影极轻（像沙刚盖上去） */
  box-shadow:
    0 1px 0 #ffffff8c inset,
    0 2px 10px -2px #8d826433 inset,
    0 10px 26px -16px #7d725920;
  backdrop-filter: blur(0.8px) saturate(1.04);
  transition: box-shadow .55s var(--ease-out), border-color .55s var(--ease-out);
}
/* 悬停时略微"显形"（边框清楚一点），但**不浮起** —— 保持埋在沙里的状态 */
.card-embedded:hover {
  border-color: #a2977a5c;
  box-shadow:
    0 1px 0 #ffffffb3 inset,
    0 2px 12px -2px #8d826440 inset,
    0 14px 32px -18px #7d72592b;
}
/* 框内撒一层极淡的沙粒网点（浮沙） */
.card-grain {
  position: absolute; inset: 0; border-radius: 3px; pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(circle, #8a7f6142 0.5px, transparent 0.75px),
    radial-gradient(circle, #9a8f7052 0.45px, transparent 0.7px);
  background-size: 4px 4px, 7px 6px;
  background-position: 0 0, 2px 3px;
}
.card-body { position: relative; padding: 26px 26px 22px; }

.card-embedded label {
  display: block; font-size: 12px; color: var(--ink-2);
  letter-spacing: .1em; margin: 14px 0 7px;
}
.card-embedded label:first-child { margin-top: 0; }

/* 输入框：纸上的细框，不要发光 */
.card-embedded input[type=text],
.card-embedded input[type=password] {
  width: 100%; padding: 10px 12px;
  background: #fffdf8a6;
  border: 1px solid #bfb59b66;
  border-radius: 3px; outline: none;
  color: var(--ink); font-size: 14px; letter-spacing: .04em;
  transition: border-color .22s var(--ease-out),
              background .22s var(--ease-out),
              box-shadow .22s var(--ease-out);
}
.card-embedded input::placeholder { color: #b3ab97; }
.card-embedded input:hover { border-color: #ada286; background: #fffdf8c9; }
.card-embedded input:focus {
  border-color: var(--olive);
  background: #fffefb;
  box-shadow: 0 0 0 2px #5f6b4a1f;
}

/* ── ★ 登录按钮：不再跳脱 ────────────────────────────── */
.btn-paper {
  display: block; width: 100%; margin-top: 22px;
  padding: 11px 16px;
  font: 400 14px/1 var(--sans); letter-spacing: .22em;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff8c 0%, #f3eddd8c 100%);
  border: 1px solid #b3a98c66;
  border-radius: 3px; cursor: pointer;
  box-shadow: 0 1px 0 #ffffffcc inset, 0 1px 2px #7d725915;
  transition: background .24s var(--ease-out),
              border-color .24s var(--ease-out),
              box-shadow .24s var(--ease-out),
              transform .14s var(--ease-spring);
}
.btn-paper:hover {
  background: linear-gradient(180deg, #ffffffcc 0%, #f0e9d6cc 100%);
  border-color: #9c9176;
  color: var(--olive-deep);
}
.btn-paper:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px #7d725922 inset;
}
.btn-paper:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-paper.block { width: 100%; }

/* 错误提示：像纸上的一行批注 */
.err {
  margin-top: 14px; padding: 8px 11px;
  font-size: 12.5px; color: #8a3a2c;
  background: #a8543f12; border-left: 2px solid #a8543f88;
  border-radius: 0 3px 3px 0;
}

.foot-note {
  margin-top: 30px; font-size: 11.5px; color: var(--ink-3);
  letter-spacing: .1em;
}

/* 加载小转圈（纸色调） */
.spin {
  display: inline-block; width: 12px; height: 12px;
  border: 1.5px solid #8a7f6140; border-top-color: var(--olive);
  border-radius: 50%; animation: sp .7s linear infinite;
  vertical-align: -2px; margin-right: 6px;
}
@keyframes sp { to { transform: rotate(360deg); } }

/* 入场：由沙中"浮起" */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.stage > * { animation: rise .7s var(--ease-out) both; }
.stage > *:nth-child(1) { animation-delay: .05s; }
.stage > *:nth-child(2) { animation-delay: .12s; }
.stage > *:nth-child(3) { animation-delay: .18s; }
.stage > *:nth-child(4) { animation-delay: .26s; }
.stage > *:nth-child(5) { animation-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  .stage > * { animation: none; }
  #sand { display: none; }
}

@media (max-width: 520px) {
  .title { font-size: 30px; }
  .card-embedded { max-width: 100%; }
}