/* ═══════════════ 门口(home.html) —— 第一屏一个大框, 往下滚是立体叙事(3D 舞台钉在屏上, 字一幕一幕滚过) ═══════════════
   门口那一块直接用 simple.css 的类(.sp-home / .sp-box / .sp-cards …): 和简单模式长一个样子。
   颜色: 灰白 + 一个强调色(--a, 来自 simple.css -> calm.css 的 --acc)。彩色只留给机器本身和「我也试试」这种邀请你做的下一步。
   手机竖屏优先: 390 宽无横向滚动, 左右 16px; 舞台占上半屏, 字在下半屏滚过。 */

.hm{ overflow-x: hidden; }

/* ---------- 1018 S4 跨页过渡: 门口 → 简单模式(搭) → 工作台 ----------
   Chrome 126+ 支持跨页面 View Transitions; Firefox 等不支持 = 普通跳页(渐进增强, 不靠它干活)。
   两页都要声明 @view-transition 才会过渡(simple.css / level4.css 里也有); 舞台三页同名 mk-stage:
   门口的 3D 舞台(.hm-stage) -> 简单模式的舞台(.sp-stage) -> 工作台的 3D 面板(.panel.cad, level4.css), 跳页时平滑接上。
   prefers-reduced-motion: 不过渡(就是普通跳页)。过渡多长写在 simple.css(动画样式由「新」那一页的样式表管, 门口也载 simple.css)。 */
@view-transition{ navigation: auto; }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation: none; } }
.hm-stage{ view-transition-name: mk-stage; }
/* 英文页: 西文字体排在中文字体前面 —— 否则 Windows 上落到雅黑, ’ “ ” 会按全角排, 「doesn’ t」中间空一格 */
html[lang="en"] body.hm{ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

/* ---------- ① 门口 ---------- */
.hm-door{
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: 64px;
}
.hm-home{ padding-top: 6vh; }
a.sp-card{ text-decoration: none; color: var(--ink); }
.hm-cue{
  position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--mut); font-size: 14px; text-decoration: none; white-space: nowrap;
}
.hm-cue i{
  width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); animation: hmBob 1.8s ease-in-out infinite;
}
.hm-cue:hover{ color: var(--ink); }
@keyframes hmBob{ 0%, 100% { transform: translateY(-2px) rotate(45deg); } 50% { transform: translateY(4px) rotate(45deg); } }

/* ---------- ② 立体叙事 ---------- */
.hm-story{
  position: relative; max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.hm-stage{
  grid-column: 2; grid-row: 1; align-self: start;
  position: sticky; top: 0; height: 100vh; height: 100svh;
  padding: 16px 16px 16px 0;
}
.hm-view{
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 24px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #dfe3e8 0%, #eef0f3 55%, #f8f9fa 100%);
}
#hmCanvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hm-veil{
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: rgba(246,247,248,.66); transition: opacity .35s ease;
}
.hm-veil.off{ opacity: 0; pointer-events: none; }
.hm-veil p{ margin: 0; padding: 0 20px; font-size: 17px; font-weight: 700; color: var(--ink); text-align: center; }
.hm-spin{ width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--a); animation: hmSpin .9s linear infinite; }
@keyframes hmSpin{ to { transform: rotate(360deg); } }
.hm-dots{
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; gap: 8px; padding: 6px 10px; border-radius: 12px; background: rgba(255,255,255,.8);
}
.hm-dots i{ width: 7px; height: 7px; border-radius: 50%; background: var(--line2); transition: background .2s, transform .2s; }
.hm-dots i.on{ background: var(--a); transform: scale(1.25); }

.hm-acts{ grid-column: 1; grid-row: 1; }
.hm-act{
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: 0 40px 0 max(24px, 5vw);
}
.hm-in{ max-width: 30em; opacity: .28; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.hm-act.on .hm-in{ opacity: 1; transform: none; }
.hm-mini{ width: 120px; height: 56px; margin-bottom: 14px; }
.hm-mini svg{ width: 100%; height: 100%; overflow: visible; display: block; }
.hm-h{
  margin: 0 0 12px; color: var(--ink);
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em;
  text-wrap: balance;            /* 大字折行时两行差不多长(不剩一个「话。」挂在第二行) */
  /* 10-23: 光 balance 会把「分享出去，别 / 人再改一点。」从「别人」中间切开 —— 中文一段一段(标点之间)不拆, 在逗号处折;
     一段长到一行放不下时 overflow-wrap 照样让它折, 不会撑出去 */
  word-break: keep-all; overflow-wrap: anywhere;
}
.hm-p{ margin: 0 0 22px; color: var(--mut); font-size: 19px; line-height: 1.55; }
.hm-try{
  display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 23px;
  background: var(--a-t); color: var(--a-h); font-size: 17px; font-weight: 800; text-decoration: none;
  border: 1.5px solid transparent; transition: border-color .15s, transform .08s;
}
.hm-try:hover{ border-color: var(--a); }
.hm-try:active{ transform: scale(.97); }
.hm-try:focus-visible{ outline: 3px solid var(--a-t); border-color: var(--a); }
.hm-try-x{ background: #fff; color: var(--ink); border-color: var(--line2); }
.hm-try-x:hover{ border-color: var(--mut); }

/* 小动画: 一律灰线, 只有方块 / 眼睛 / 射线用强调色 */
.hm-mini .ln{ fill: none; stroke: var(--mut); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hm-mini .ln.fill{ fill: var(--soft2); }
.hm-mini .ln.card{ fill: #fff; }
.hm-mini .ln.bub{ fill: #fff; }
.hm-mini .gd{ stroke: var(--line2); stroke-width: 2; stroke-linecap: round; }
.hm-mini .acc{ fill: var(--a); }
.hm-mini .wall{ fill: #d9d2c5; }
.hm-mini .ray{ stroke: var(--a); stroke-width: 2; stroke-dasharray: 3 4; }
.hm-mini .say{ font: 800 13px/1 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; fill: var(--ink); text-anchor: middle; }
/* 10-19 讲原理时涂的橙(和 3D 舞台上涂件的同一个橙 #e8730c, home_logic.PAINT_HEX); 虚线 = 画出来的设计 */
.hm-mini .or{ fill: none; stroke: #e8730c; stroke-width: 3; stroke-linecap: round; }
.hm-mini .or-f{ fill: #e8730c; }
.hm-mini .dash{ stroke-dasharray: 3 3; }
.hm-mini g, .hm-mini rect{ transform-box: fill-box; }
.hm-act.on .mv-drop{ animation: hmDrop 2.6s cubic-bezier(.5,0,.75,0) infinite; }
.hm-act.on .mv-spin{ animation: hmTurn 1.6s linear infinite; transform-box: view-box; }
.hm-act.on .mv-hop{ animation: hmHop 3.2s ease-in-out infinite; }
.hm-act.on .mv-hop2{ animation: hmHop2 3.2s ease-in-out infinite; }
.hm-act.on .mv-back{ animation: hmBack 3s ease-in-out infinite; }
.hm-act.on .mv-fork{ animation: hmFork 3s ease-out infinite; }
/* 两条腿一前一后摆: 同一个动画, 右腿晚半拍(错开半圈) */
.hm-mini .mv-legL, .hm-mini .mv-legR{ transform-origin: 50% 0; }
.hm-act.on .mv-legL{ animation: hmStep 1.2s ease-in-out infinite; }
.hm-act.on .mv-legR{ animation: hmStep 1.2s ease-in-out -.6s infinite; }
@keyframes hmDrop{ 0% { transform: translateY(-16px); opacity: 0; } 15% { opacity: 1; } 45%, 100% { transform: translateY(0); opacity: 1; } }
@keyframes hmTurn{ to { transform: rotate(360deg); } }
@keyframes hmHop{ 0%, 15% { transform: translate(-35px, 10px); } 50% { transform: translate(4px, -8px); } 75%, 100% { transform: translate(43px, 26px); } }
@keyframes hmHop2{ 0%, 15% { transform: translate(-32px, 0); } 50% { transform: translate(6px, -12px); } 75%, 100% { transform: translate(44px, 0); } }
@keyframes hmStep{ 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes hmBack{ 0% { transform: translateX(0); } 45% { transform: translateX(38px); } 60% { transform: translateX(38px); } 100% { transform: translateX(0); } }
@keyframes hmFork{ 0% { transform: translateX(-60px); opacity: 0; } 30% { opacity: 1; } 55%, 100% { transform: translateX(0); opacity: 1; } }

/* ---------- ③ 最后一屏 ---------- */
.hm-end{
  min-height: 100vh; min-height: 100svh;          /* 整整一屏: 滚到底时舞台完全离开视野(仿真暂停) */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 16px max(40px, env(safe-area-inset-bottom)); text-align: center;
}
.hm-end-h{ margin: 0 0 10px; font-size: clamp(30px, 5vw, 48px); font-weight: 800; line-height: 1.15; color: var(--ink); }
.hm-end-sub{ margin: 0 0 26px; color: var(--mut); font-size: 17px; }
/* 10-23 接族谱(tree.html): 一颗不抢眼的胶囊按钮, 放在输入框下面、「全部工具」上面 */
.hm-tree{ display: inline-block; margin-top: 22px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line2);
  color: var(--ink); font-size: 15px; line-height: 1.4; text-decoration: none; max-width: 100%; }
.hm-tree:hover{ border-color: var(--ink); }
.hm-all{ display: block; margin-top: 18px; color: var(--mut); font-size: 14px; text-decoration: none; padding: 8px 4px; }
.hm-all:hover{ color: var(--ink); text-decoration: underline; }

/* ---------- 手机: 舞台占上半屏, 字在下半屏滚过 ---------- */
@media (max-width: 760px){
  .hm-story{ display: block; }
  .hm-stage{
    position: sticky; top: 0; z-index: 3; height: 50vh; height: 50svh;
    padding: 0; background: var(--k1, #f6f7f8);
  }
  .hm-view{ border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
  .hm-dots{ bottom: 10px; }
  .hm-act{ min-height: 50vh; min-height: 50svh; padding: 24px 16px; }
  .hm-in{ max-width: none; }
  .hm-mini{ width: 96px; height: 45px; margin-bottom: 10px; }
  .hm-h{ font-size: 28px; margin-bottom: 8px; }
  .hm-p{ font-size: 17px; margin-bottom: 16px; }
  .hm-try{ height: 44px; font-size: 16px; }
}
@media (max-width: 560px){
  .hm-home{ padding-top: 64px; }
  .hm-door{ padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce){
  .hm-cue i, .hm-spin{ animation: none; }
  .hm-act.on .mv-drop, .hm-act.on .mv-spin, .hm-act.on .mv-hop, .hm-act.on .mv-hop2, .hm-act.on .mv-back, .hm-act.on .mv-fork,
  .hm-act.on .mv-legL, .hm-act.on .mv-legR{ animation: none; }
  .hm-mini .mv-hop{ transform: translate(43px, 26px); }     /* 不动的时候停在终点 */
  .hm-mini .mv-hop2{ transform: translate(44px, 0); }       /* 方块已经装到右边那台大框脚两足上 */
  .hm-in{ transition: none; }
}