/*
---
generated_by: GLM-5.3 (ZCode agent, Reflect experience v2 Task 3)
date: 2026-09-14
core_logic: V3a Home 视觉与状态重构——#page-home 专属纸张编辑风排版。顺序合同（体验地图 §5.1）：
  槽位首行 ①日期/身份 meta → ②Glance 六态内容 → ③小型辅助素描 → ④次级入口（home-cards 发丝线行）
  → ⑤Learn 安静条（cta-line）。本文件只作用于 #page-home（选择器带 #page-home 前缀或 home-* 类名），
  覆盖 head inline 块的 Home 旧白卡样式（#glance-slot/.home-card/.glance-*）与 indigo 按钮语言；
  壳区与其余页面不受影响。图片硬合同：素描 390×844 目标 ~117×92（上限 128×100）、桌面 ≤240×175、
  首屏面积 ≤4%（390 档实测 ~3.3%、1280 档 ~3.7%）。
test_record: Playwright en/zh-CN × 390×844/1280×900 全矩阵截图 + DOM 断言（scrollWidth≤clientWidth、
  img naturalWidth>0、小图 getBoundingClientRect 实测、禁串零命中）见 docs/reflect/ui-shots/v2-home/
  与 task-3-report.md（2026-09-14）。
recent_changes:
  - 2026-09-14: 初版——Glance 纸感槽位（墨色顶线+mono meta 行）/welcome 衬线标/按钮纸感化/
    素描小图硬合同/入口发丝线行/Learn cta-line。
  - 2026-09-14: 外审 212 修复轮（Task 2）——新增 .home-sky-boundary（公共态事实后一行
    12px mono 小字，恒标注非个人化）；其余规则零变化。
  - 2026-09-20: R-home-1（demo移植冲刺 task-8）——新增 .home-big-three（个人 Big Three 行，
    整行链接 #/chart，纸面静物卡与 home-card 同语言）+ .home-practice（今日练习静态骨架句）；
    其余规则零变化。
  - 2026-09-20: task-6（do/don't 双栏 + G-I）——新增 .glance-dd*（个人态 Do/Don't 双栏
    grid,窄屏 ≤480px 纵向堆叠;视觉语言与落地页 glance 卡同律）；其余规则零变化。
---
*/

/* ================= ①+② Glance 稳定槽位：白卡 → 墨线纸面（list-panel 同语言） =================
   覆盖 head inline 块 #glance-slot（白底/细灰边/14px 圆角）——本文件在加载链尾，同特异性胜出。 */
#glance-slot {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-8);
  padding: var(--reflect-space-12) 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--reflect-ink);
  border-radius: 0;
  box-shadow: none;
}

/* ① meta 首行：mono 小字（日期 + 身份状态）；日期未到（加载/失败无服务端日期）时圆点隐藏 */
.home-glance-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  font-family: var(--reflect-mono);
  font-size: 12px;              /* GC#6：辅助文字 ≥12px */
  line-height: 1.6;
  letter-spacing: .08em;
  color: var(--reflect-ink-soft);
}
.home-glance-dot { display: none; }
.home-glance-date:not(:empty) + .home-glance-dot { display: inline; }
.home-glance-identity { text-transform: uppercase; }

/* ② 态内容：eyebrow 标题（components.css 原语，槽内收紧下距） */
#glance-slot .eyebrow { margin-bottom: 2px; }

/* 日期行：inline 块 .glance-date（12px #9ca3af）→ mono 纸感 */
.glance-date {
  margin: 0;
  font-family: var(--reflect-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--reflect-ink-soft);
}

/* 个人 headline：衬线主判断（对比度与字号恒高于任何图像/辅助文本——§5.1 图片硬合同） */
.glance-headline {
  margin: 2px 0 0;
  font-family: var(--reflect-serif);
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--reflect-ink);
}

/* 行动/事实列表：inline 块 .glance-actions（14px 灰、indigo 圆点）→ 发丝线行 + 苔绿记号 */
.glance-actions {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.glance-actions li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--reflect-hairline);
  font-family: var(--reflect-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--reflect-ink);
}
.glance-actions li:last-child { border-bottom: 0; }
.glance-actions li::before {
  content: "·";
  flex: none;
  color: var(--reflect-moss);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

/* do/don't 双栏（task-6,2026-09-20 用户拍板「明确答案、禁模棱两可、写行动不写预言」;
   对标 Co-Star 双栏,与落地页 glance 卡各 3 条同视觉语言:发丝线顶分栏 + 栏头小胶囊
   标签 + 条目悬挂字符 ✺(moss)/✕(rust)）。数据=服务端 hintType 分类(home-view.js 解析,
   两类齐才揭);旧数据降级单列 .glance-actions。动画零分支(全站禁 reduce-motion 红线)。 */
.glance-dd {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  margin: 2px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--reflect-hairline);
}
.glance-dd-colhead { margin: 0 0 7px; }
.glance-dd-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--reflect-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--reflect-moss);
  color: var(--reflect-paper-light);
}
.glance-dd-tag--dont {
  background: transparent;
  border: 1px solid var(--reflect-line);
  color: var(--reflect-ink-soft);
}
.glance-dd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.glance-dd-list li {
  position: relative;
  padding-left: 15px;
  font-family: var(--reflect-sans);
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--reflect-ink);
}
.glance-dd-list li::before {
  content: "✺";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 10px;
  line-height: 1.9;
  color: var(--reflect-moss);
}
.glance-dd-list--dont li::before {
  content: "✕";
  color: var(--reflect-rust);
}
@media (max-width: 480px) {
  .glance-dd { grid-template-columns: 1fr; row-gap: 14px; }
}

/* 公共态非个人化说明：略收字级为辅助信息（≥12px，AA） */
.home-glance-note {
  margin-top: 2px;
  font-size: 14px;
}

/* 公共态边界行（外审 212 修复轮）：事实列表之后一行小字，恒标注「非个人化」（≥12px，AA） */
.home-sky-boundary {
  margin: 8px 0 0;
  font-family: var(--reflect-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--reflect-ink-soft);
}

/* 重试按钮与槽位间距（按钮语言见下） */
#glance-slot .btn-ghost { margin-top: var(--reflect-space-4); }

/* ================= 问候（页标题在 Glance 之后：壳聚焦锚点 preventScroll，无跳动） ================= */
.home-welcome {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-12);
}

/* ================= 出生数据/身份行（data-when 显隐由 shell.js 驱动，仅排版） ================= */
.home-cta-row {
  display: flex;
  flex-direction: column;
  gap: var(--reflect-space-12);
}
.home-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--reflect-space-12);
}

/* R-home-1（demo移植冲刺 task-8，2026-09-20）：个人 Big Three 行——整行链接直达 #/chart。
   纸面静物卡（hairline 细框 + paper-wash 底），与 explore 三卡（home-card）同语言；
   ☉☽↑ 字形=陶锈记号，星座值=衬线主文本（对比度恒高于装饰）。默认 hidden（index.html），
   三值齐才由 home-view.js 揭行——无盘用户零变化。 */
.home-big-three {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid var(--reflect-line);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-paper-wash);
  box-shadow: 4px 5px 0 var(--reflect-moss-wash);
  text-decoration: none;
  color: var(--reflect-ink);
  transition: border-color .18s var(--reflect-ease);
}
.home-big-three:hover { border-color: var(--reflect-moss); }
.home-big-three:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: 2px;
}
.home-bt-you {
  font-family: var(--reflect-mono);
  font-size: 12px;              /* GC#6：辅助文字 ≥12px */
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--reflect-ink-soft);
}
.home-bt-item {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}
.home-bt-glyph {
  font-size: 14px;
  line-height: 1;
  color: var(--reflect-rust);
}
.home-bt-item strong {
  font-family: var(--reflect-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--reflect-ink);
}
.home-bt-dot {
  color: var(--reflect-moss-pale);
  font-size: 14px;
  line-height: 1;
}
/* 今日练习（R-home-1）：一句静态骨架句（非个性化）；辅助行口径同 .home-glance-note */
.home-practice {
  margin: 0;
  font-size: 14px;
  color: var(--reflect-ink-soft);
}

/* ================= 按钮纸感化（仅 #page-home 作用域；覆盖 head inline 块 indigo 语言） ================= */
#page-home .btn-primary {
  min-height: 44px;             /* GC#7 触控目标 */
  padding: 0 20px;
  border: 1px solid var(--reflect-ink);
  border-radius: var(--reflect-radius-md);
  background: var(--reflect-ink);
  color: var(--reflect-paper-light);
  font-family: var(--reflect-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--reflect-ease), border-color .18s var(--reflect-ease);
}
#page-home .btn-primary:hover {
  background: var(--reflect-moss);
  border-color: var(--reflect-moss);
}
#page-home .btn-primary[disabled] { opacity: .55; cursor: not-allowed; }
#page-home .btn-primary[disabled]:hover { background: var(--reflect-ink); border-color: var(--reflect-ink); }
#page-home .btn-ghost {
  min-height: 44px;
  padding: 0 var(--reflect-space-16);
  border: 0;
  border-radius: var(--reflect-radius-md);
  background: transparent;
  color: var(--reflect-ink-soft);
  font-family: var(--reflect-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--reflect-ease), color .18s var(--reflect-ease);
}
#page-home .btn-ghost:hover {
  background: var(--reflect-moss-wash);
  color: var(--reflect-ink);
}
#page-home .btn-primary:focus-visible,
#page-home .btn-ghost:focus-visible,
#page-home .home-card:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: 2px;
}

/* ================= ③ 小型辅助素描：图片硬合同（§5.1） =================
   390×844 目标 ~117×92（≤128×100）；桌面 ≤240×175；右对齐停顿位（demo .hero-figure 语言）；
   图像处理（灰阶/洗色/内衬线框）全由 components.css .sketch/.sketch--pond 提供，此处只管尺寸。
   面积占比：390 档 117×92 ≈ 3.3% ≤4%；1280 档 240×175 ≈ 3.7% ≤4%。 */
.home-sketch {
  width: clamp(110px, 30vw, 128px);
  height: clamp(92px, 15vw, 100px);
  margin-left: auto;            /* 右对齐小图：正文列左侧留阅读节奏 */
  border: 1px solid var(--reflect-line);
  box-shadow: 6px 7px 0 rgba(82, 107, 86, .12);   /* demo hero-art 同语言（≤纸感平阴影） */
}
@media (min-width: 768px) {
  .home-sketch {
    width: clamp(180px, 30vw, 240px);
    height: clamp(120px, 15vw, 175px);
  }
}

/* ================= ③+ G-H EROS 水彩动画横幅（2026-09-18 用户拍板，Co-Star 对标） =================
   位置合同：glance 槽位之下、home-cards 三卡之上。水彩纸版钉在纸面编辑流上——
   配色零新值，全走 tokens.css D26 令牌（moss/rust/ochre/pale）。三层分区零互压：
   背景层=水彩晕染底（铺满整卡）；文案层=eyebrow+衬线标题；人物舞台层=两人剪影
   牵手渐显+手写感贴纸；页脚层=副文案+CTA。动画四组错峰：洗底缓开（Bloom）→
   剪影慢入（Figure）→ 文案浮起（Rise）→ 贴纸浮现+小幅摇摆（StickerIn/Sway）。
   动画无条件播放（全站红线：禁 reduce-motion 分支）；唯一无限动画=贴纸 ±1.1deg
   慢摆（用户拍板的「贴纸动效」，6.5s 周期，振幅小于 hover 过渡）。 */

.home-eros {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--reflect-space-12);
  margin: var(--reflect-space-24) 0 var(--reflect-space-8);
  padding: var(--reflect-space-24) var(--reflect-space-16) var(--reflect-space-16);
  overflow: hidden;
  background: var(--reflect-paper-light);
  border: 1px solid var(--reflect-line);
  box-shadow: var(--reflect-shadow-flat);
  text-decoration: none;
  text-align: center;
}
.home-eros:focus-visible {
  outline: 2px solid var(--reflect-rust);
  outline-offset: 2px;
}
.home-eros:hover {
  border-color: var(--reflect-moss);
}

/* 背景层：水彩画布绝对铺底（纸面+多层洗+颗粒+手绘框） */
.home-eros-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ① 水彩晕染底：整组错峰缓开（fade 0→1 只作用于组层，子椭圆自带的多层透明度
   属性不被动画覆盖——元素级 opacity 若被 keyframes 接管会全部变 1，洗色变色块）；
   子层只做 scale 呼吸展开，透明度恒由属性承载 */
.home-eros-wash {
  animation: homeErosBloom 2.4s var(--reflect-ease) .1s both;
}
.home-eros-wash > * {
  transform-box: fill-box;
  transform-origin: center;
  animation: homeErosWashSpread 2.8s var(--reflect-ease) both;
}
.home-eros-wash > *:nth-child(1) { animation-delay: .1s; }
.home-eros-wash > *:nth-child(2) { animation-delay: .35s; }
.home-eros-wash > *:nth-child(3) { animation-delay: .6s; }
.home-eros-wash > *:nth-child(4) { animation-delay: .85s; }
@keyframes homeErosBloom {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes homeErosWashSpread {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

/* 文案层：eyebrow mono 小字距 → 衬线标题（入场自下 6px 浮起，错峰） */
.home-eros-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--reflect-space-4);
}
.home-eros-eyebrow {
  font-family: var(--reflect-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--reflect-ink-soft);
  animation: homeErosRise .6s var(--reflect-ease) both;
}
.home-eros-title {
  font-family: var(--reflect-serif);
  font-size: clamp(23px, 4.4vw, 30px);
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--reflect-ink);
  animation: homeErosRise .6s var(--reflect-ease) .12s both;
}
@keyframes homeErosRise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 人物舞台层：剪影画布居中（占卡片主视觉带），贴纸绝对定位于本层、与文案/页脚零互压 */
.home-eros-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  min-height: 176px;
}
.home-eros-figs {
  width: min(78vw, 330px);
  height: auto;
  display: block;
  /* ② 人物层=单张 AI 羊毛毡图（2026-10-03 拍板，index.html 舞台层注释有溯源）。
     椭圆 mask 羽化四缘融进水彩纸底——颜色写 black/transparent 关键字，
     本段零 hex 零 rgba 的配色合同不破；-webkit- 兜旧 Safari。
     图自带地面影、首帧构图即完整，原 blob 剪影错峰渐显（4.5s 才完整）退役 */
  -webkit-mask-image: radial-gradient(ellipse 80% 76% at 50% 54%, black 50%, transparent 96%);
  mask-image: radial-gradient(ellipse 80% 76% at 50% 54%, black 50%, transparent 96%);
}

/* ③ 手写感标签贴纸：纸片小签 + 衬线斜体（手写感近似），浮现后 ±1.1deg 慢摆（各自错拍）。
   --tilt 单值改角度；stickerIn 终帧 = sway 起帧，交接无跳变。 */
.home-eros-sticker {
  position: absolute;
  z-index: 2;
  padding: 5px 12px;
  background: var(--reflect-paper-light);
  border: 1px solid var(--reflect-line);
  box-shadow: 2px 3px 0 rgba(82, 107, 86, .16);
  font-family: var(--reflect-serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.3;
  color: var(--reflect-ink);
  white-space: nowrap;
  animation:
    homeErosStickerIn .7s var(--reflect-ease) both,
    homeErosSway 6.5s ease-in-out infinite;
}
.home-eros-sticker--1 { left: 3%; top: 16%; --tilt: -3deg; animation-delay: 1.7s, 2.4s; }
.home-eros-sticker--2 { right: 3%; top: 42%; --tilt: 2.4deg; animation-delay: 2s, 3.1s; }
.home-eros-sticker--3 { left: 9%; bottom: 10%; --tilt: -1.6deg; animation-delay: 2.3s, 3.8s; }
.home-eros-sticker--4 { right: 7%; bottom: 13%; --tilt: 2.2deg; animation-delay: 2.6s, 4.1s; }
@keyframes homeErosStickerIn {
  from { opacity: 0; transform: rotate(var(--tilt, -2deg)) translateY(9px) scale(.95); }
  to { opacity: 1; transform: rotate(var(--tilt, -2deg)) translateY(0) scale(1); }
}
@keyframes homeErosSway {
  0%, 100% { transform: rotate(var(--tilt, -2deg)); }
  25% { transform: rotate(calc(var(--tilt, -2deg) + 1.1deg)); }
  75% { transform: rotate(calc(var(--tilt, -2deg) - 1.1deg)); }
}

/* 页脚层：一句副文案 + CTA「选择伴侣」（沿用 #page-home btn-primary 纸感按钮语言） */
.home-eros-foot {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--reflect-space-12);
  max-width: 42ch;
}
.home-eros-sub {
  font-family: var(--reflect-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--reflect-ink-soft);
  animation: homeErosRise .6s var(--reflect-ease) .3s both;
}
.home-eros-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;             /* GC#7 触控目标 */
  padding: 0 22px;
  background: var(--reflect-ink);
  border: 1px solid var(--reflect-ink);
  border-radius: var(--reflect-radius-md);
  color: var(--reflect-paper-light);
  font-family: var(--reflect-sans);
  font-size: 15px;
  font-weight: 600;
  transition: background .18s var(--reflect-ease), border-color .18s var(--reflect-ease);
  animation: homeErosRise .6s var(--reflect-ease) .5s both;
}
.home-eros:hover .home-eros-cta {
  background: var(--reflect-moss);
  border-color: var(--reflect-moss);
}

@media (min-width: 768px) {
  .home-eros-stage { min-height: 216px; }
  .home-eros-figs { width: min(46vw, 400px); }
  .home-eros-sticker { font-size: 15px; }
}
@media (max-width: 480px) {
  .home-eros { padding-left: var(--reflect-space-12); padding-right: var(--reflect-space-12); }
  .home-eros-sticker { font-size: 12.5px; padding: 4px 9px; }
}

/* ================= ④ 次级入口：白卡海 → 发丝线行（墨色顶线 + mono 眉标 + 衬线行标） =================
   类名 home-cards/.home-card 被固定合同测试引用（位置恒晚于 Glance 槽位），仅换纸感排版。 */
.home-cards {
  border-top: 1px solid var(--reflect-ink);
  padding-top: var(--reflect-space-12);
}
.home-cards .eyebrow { margin-bottom: var(--reflect-space-4); }
.home-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--reflect-space-16);
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--reflect-hairline);
  border-radius: 0;
  text-decoration: none;
  transition: background .16s var(--reflect-ease);
}
.home-card:hover { background: var(--reflect-moss-wash); }
.home-card-text {
  flex: 1 1 auto;
  min-width: 0;
}
.home-card-title {
  display: block;
  font-family: var(--reflect-serif);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 400;
  color: var(--reflect-ink);
}
.home-card-sub {
  display: block;
  margin-top: 3px;
  font-family: var(--reflect-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--reflect-ink-soft);
}
.home-card-go {
  flex: none;
  font-family: var(--reflect-mono);
  font-size: 15px;
  color: var(--reflect-ink-soft);
  transition: color .18s var(--reflect-ease), transform .18s var(--reflect-ease);
}
.home-card:hover .home-card-go {
  color: var(--reflect-rust);
  transform: translate(1px, -1px);
}

/* ================= ⑤ Learn 安静条：cta-line 原语（mono 小字距 + ↗，hover 陶锈） ================= */
.home-learn { margin-top: var(--reflect-space-4); }

/* ================= Task3 2026-09-18：Welcome 营销段降权 =================
   副文案小于正文 body-copy（15px/断点17px）与 Glance 事实——首屏主任务是「今天怎么样」，
   营销句只做氛围（体验地图 §2 先内容后装饰）。 */
.home-welcome .body-copy {
  font-size: 14px;
  color: var(--reflect-ink-soft);
}

/* ================= v3.1 首页改版（图纸 home.png / notes §v3；PR-C 2026-10-07） ================= */

/* 今日块开场天空横条：通栏 150px，底部渐隐到纸色（图纸 band；report-stars 1800×1057） */
.home-sky-band { position: relative; height: 150px; overflow: hidden; }
.home-sky-band img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
.home-sky-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--reflect-paper) 97%); }

/* ✦ 分隔：赭石四角星 16px + 两条发丝线（图纸 ✦ 行） */
.home-deep-divider { display: flex; align-items: center; gap: 12px; margin: 28px 2px 6px; color: var(--reflect-ochre); }
.home-deep-line { flex: 1; height: 1px; background: var(--reflect-hairline); }
.home-deep-star { width: 16px; height: 16px; flex: none; }

/* 往深一层三行：62×62 缩略图（.sketch 管线去色偏棕）+ 文字 + ›（图纸 rows） */
.home-deep { display: flex; flex-direction: column; }
.home-deep-row { display: flex; align-items: center; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--reflect-hairline); text-decoration: none; }
.home-deep-row:last-child { border-bottom: 0; }
.home-deep-thumb { width: 62px; height: 62px; flex: none; overflow: hidden; }
.home-deep-thumb img { width: 100%; height: 100%; object-fit: cover; }
.home-deep-copy { flex: 1; min-width: 0; }
.home-deep-title { display: block; color: var(--reflect-ink); }
.home-deep-sub { display: block; color: var(--reflect-ink-soft); font-size: 13px; margin-top: 2px; }
.home-deep-go { color: var(--reflect-ink); opacity: .55; flex: none; }

/* EROS 横幅外边距改 v3.1 口径（左右 22px / 上 30px / 下 0；page-pad 20px 边距 + 2px 补足；
   结构样式一字不改——施工单 §7） */
.home-eros { margin: 30px 2px 0; }

/* ================= PR-G 动效（H1–H4；motion_spec §2，2026-10-07） ================= */
/* H1 骨架：>300ms 未到才挂载（home-view.js）；高光扫 2 遍后静止（GC 禁无限脉冲）。 */
.m-skel { margin: 14px 0 4px; }
.m-skel i {
  display: block;
  height: 16px;
  border-radius: 4px;
  background: var(--reflect-paper-wash);
  position: relative;
  overflow: hidden;
  margin-top: 12px;
}
.m-skel i:nth-child(1) { height: 30px; width: 78%; margin-top: 0; }
.m-skel i:nth-child(2) { width: 92%; }
.m-skel i:nth-child(3) { width: 84%; }
.m-skel i:nth-child(4) { width: 60%; }
.m-skel i::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: m-skel-sheen 1.3s var(--m-ease-inout) 2;
}
@keyframes m-skel-sheen { to { transform: translateX(100%); } }

/* H2 内容块分层浮起：--i × 70ms 交错（home-view.js render 内容态挂 .m-in）。 */
.m-in { animation: m-rise var(--m-rise-dur) var(--m-ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes m-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* H3 星闪 / H4 流星：挂 PR-C 夜空横条（.home-sky-band 内 .m-sky 覆盖层）。
   星闪=无限环境动效（周期 4.5–8.8s ≥4.5s 档、只动 opacity/transform、
   离视口 visibility 收停——▲13 规则补丁允许项）；流星每次进页 2.6s 一发（有限）。 */
.m-sky { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.m-star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 0 4px 1px rgba(255, 250, 235, .6);
  opacity: .25;
  animation: m-twinkle var(--d, 6s) var(--m-ease-inout) var(--dl, 0s) infinite;
}
@keyframes m-twinkle {
  0%, 100% { opacity: .2; transform: scale(.7); }
  50% { opacity: .95; transform: scale(1.15); }
}
.m-comet {
  position: absolute;
  left: -30%;
  top: 58%;
  width: 120px;
  height: 2px;
  border-radius: 2px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255, 250, 235, 0), rgba(255, 250, 235, .9) 85%, #fff);
  transform-origin: 100% 50%;
}
.m-comet.m-go { animation: m-comet var(--m-comet-dur) cubic-bezier(.3, .1, .3, 1) both; }
@keyframes m-comet {
  0% { opacity: 0; transform: translate(0, 0) rotate(-16deg) scaleX(.4); }
  15% { opacity: 1; }
  70% { opacity: .9; }
  100% { opacity: 0; transform: translate(560px, -150px) rotate(-16deg) scaleX(1); }
}