/* ─────────────────────────────────────────────────────────────────────────────
   AIDMP 动森（Animal Crossing）网页主题底座
   —— 网页化迁移的共享皮肤：令牌 + 字体 + 漂移叶纹背景 + 羊皮纸卡 / 输入框 / 按压按钮。

   视觉基准来自 animal-island-ui（MIT，https://github.com/guokaigdg/animal-island-ui）
   官方首页：底色 #7DC395 + home_bg.webp 叶纹平铺，background-position 由 100% 0%
   漂到 0% 100%，80s linear infinite（其 demo/App.tsx 的 homeBg + bgScroll）。

   ⚠️ 不引 animal-island-ui 的编译产物 index.css：其类名带构建哈希
   （.animal-btn-primary-9t / .animal-input-12），且为 React DOM 结构而写，
   Django 模板直接依赖会在对方下次发版时碎掉。这里只沿用它稳定的设计令牌。

   ⚠️ 鼠标指针保持系统常规：不做 cursor:url() 自定义光标
   （对方 demo 全局套了 <Cursor> 手指光标组件，本主题刻意不引）。
   ───────────────────────────────────────────────────────────────────────────── */

/* 西文显示字：Nunito（中文回落系统字体，不背 Noto Sans SC 的 1.1MB 中文子集） */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./files/nunito-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url("./files/nunito-latin-900.woff2") format("woff2");
}

:root {
  /* teal 主色（= animal-island-ui --animal-primary-color） */
  --ac-teal: #19c8b9;
  --ac-teal-600: #13a99c;
  --ac-teal-700: #0f8a80;
  --ac-teal-50: #e8f6f1;
  --ac-teal-100: #c8ebe1;
  --ac-teal-200: #a3ddcd;
  --ac-grad: linear-gradient(135deg, #8fdcc4 0%, #19c8b9 58%, #13a99c 100%);

  /* 暖棕文字 / 羊皮纸面 */
  --ac-ink: #5a4a34;
  --ac-ink-2: #7a6a52;
  --ac-ink-3: #a8997f;
  --ac-brown: #7c5734;   /* demo 副标题色 */
  --ac-line: #e7d8b6;
  --ac-bg: #fffdf8;
  --ac-card: #f7f3df;
  --ac-cream: #fff9e6;   /* demo 大标题色 */

  /* 草地绿（首页底色） */
  --ac-grass: #7dc395;

  --ac-sh-sm: 0 2px 4px rgba(120, 90, 40, .08);
  --ac-sh-md: 0 8px 22px rgba(120, 90, 40, .14);
  --ac-sh-lg: 0 16px 40px rgba(61, 52, 40, .18);

  --ac-font: "Nunito", "Noto Sans SC", "Zen Maru Gothic", -apple-system,
             "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ── 漂移叶纹背景：整页铺满，80s 一轮斜向漂移 ── */
.ac-grass-bg {
  background: url("./img/home_bg.webp") 0 0 / auto repeat, var(--ac-grass);
  animation: ac-bg-scroll 80s linear infinite;
}
@keyframes ac-bg-scroll {
  0%   { background-position: 100% 0%; }
  100% { background-position: 0% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ac-grass-bg { animation: none; }
}

/* ── 大标题：奶油色 + 硬投影（demo heroTitle 令牌） ── */
.ac-hero-title {
  font-family: var(--ac-font);
  font-size: 55px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ac-cream);
  text-shadow: 0 4px 1px rgba(0, 0, 0, .4);
  margin: 0 0 12px;
}
.ac-hero-sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ac-brown);
  margin: 0 0 28px;
  max-width: 520px;
}
/* 版本 / 标记药丸（demo heroVersion 令牌） */
.ac-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 10px;
  background: #e6f9f6;
  color: var(--ac-teal);
  margin-left: 8px;
  vertical-align: middle;
  text-shadow: none;
}

/* ── 羊皮纸卡 ── */
.ac-card {
  background: var(--ac-card);
  border: 2px solid var(--ac-line);
  border-radius: 28px;
  box-shadow: var(--ac-sh-lg);
}

/* ── 输入框 ── */
.ac-field { margin-bottom: 16px; }
.ac-label {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--ac-ink);
  margin-bottom: 7px;
  letter-spacing: .2px;
}
.ac-input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ac-ink);
  background: var(--ac-bg);
  border: 2px solid var(--ac-line);
  border-radius: 16px;
  outline: none;
  transition: border-color .14s, box-shadow .14s;
}
.ac-input::placeholder { color: var(--ac-ink-3); }
.ac-input:focus {
  border-color: var(--ac-teal-200);
  box-shadow: 0 0 0 4px rgba(25, 200, 185, .18);
}

/* ── 按压按钮（动森 3px 实心投影） ── */
/* 动森原生 Button（type="primary" · size="middle"）—— 逐值照抄 animal-island-ui
   的 .animal-btn + .animal-btn-middle + .animal-btn-primary 三层层叠结果：
   奶油底 #f8f8f0 + 棕字 #794f27 + 0 5px #bdaea0 硬投影，没有渐变、不是青绿。
   2026-08-08 换回来：之前这里是自己配的青绿渐变 + teal 投影，跟原生不是一个东西。
   注释里的 token 名是库 :root 里的原值，改动前先回去核对，别凭感觉调数。 */
.ac-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;                        /* --animal-spacing-sm */
  height: 45px;                    /* .animal-btn-middle */
  padding: 0 20px;
  border: 2px solid #f8f8f0;       /* --animal-border-width；primary 描边同底色 */
  border-radius: 50px;
  cursor: pointer;                 /* 常规手型，非自定义光标图 */
  font-family: inherit;
  font-size: 14px;                 /* --animal-font-size-base */
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  user-select: none;
  outline: none;
  color: #794f27;                  /* --animal-text-color */
  background: #f8f8f0;             /* --animal-bg-color */
  box-shadow: 0 5px #bdaea0;
  transition: all .25s cubic-bezier(.4, 0, .2, 1);  /* --animal-motion-* */
}
.ac-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px #bdaea0; }
.ac-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px #bdaea0; }
.ac-btn:focus-visible { outline: 2px solid #19c8b9; outline-offset: 2px; }
.ac-btn:disabled { cursor: not-allowed; opacity: .5; box-shadow: none; }
.ac-btn-block { display: flex; width: 100%; }   /* .animal-btn-block */

/* ── 提示条 ── */
.ac-alert {
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 700;
  border: 2px solid #ecccbd;
  background: #fbeee6;
  color: #b4503c;
  margin-bottom: 16px;
}
.ac-alert.ok { border-color: #b9e3c4; background: #eefaf0; color: #2f8a55; }