/* ==========================================================================
 * css/pages/home.css — 界面 0 · 主界面样式
 * 作用域：全部以 .page-home 为前缀（design.md §5.4），禁止全局污染。
 * 变量来自 css/tokens.css（--bg-1 / --panel / --line / --ink / --muted /
 * --accent / --accent-cyan），均带兜底值。
 * 视觉方向：明日方舟式暗色工业 HUD —— 锐利斜切 / 直角括号框 / 技术标注 /
 * 故障闪烁 / 磁性悬停 / 光泽掠过，保持本站蓝黑色板，不引入异色。
 * 动效规范：主运动只用 transform/opacity（glitch/光泽允许 clip-path 与低透明度
 * 背景）；统一缓动 cubic-bezier(.22,1,.36,1)，hover 过渡 0.25–0.45s；
 * 所有无限循环动画包在 @media (prefers-reduced-motion: no-preference) 内。
 * 本期只做桌面端。
 * ========================================================================== */

.page-home {
  color: var(--ink, #e6ecf7);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

.page-home .home-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 48px 0;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
 * 1. LOGO 区 · 视差跟随 + 故障闪烁 + 环绕技术标注
 * ------------------------------------------------------------------------ */
.page-home .hero {
  position: relative;                      /* 技术标注定位基准 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;               /* LOGO 在 tall 区域内垂直居中 */
  box-sizing: border-box;
  min-height: 56vh;                      /* 首屏下沉：LOGO 区占足纵向空间 */
  padding: 24px 0;
  cursor: default;
}

.page-home .hero-parallax {
  position: relative;                      /* glitch 切片层定位基准 */
  transition: transform .18s ease-out;   /* transform-only（鼠标跟随，非 hover 过渡） */
  will-change: transform;
}

.page-home .hero-logo {
  display: block;
  width: 280px;
  height: auto;
}

/* 故障闪烁切片层：默认不渲染，仅 no-preference 下以偶发 1–2 帧切片错位闪现 */
.page-home .hero-logo-glitch { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .page-home .hero-logo-glitch {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
  }
  .page-home .glitch-a { animation: home-glitch-a 5.4s linear infinite; }
  .page-home .glitch-b { animation: home-glitch-b 5.4s linear infinite; }
}

/* 切片错位只出现在约 3 帧窗口内，其余时间完全透明（偶发故障感） */
@keyframes home-glitch-a {
  0%, 88.9%, 93.2%, 100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translate(0, 0); }
  89%   { opacity: .7; clip-path: inset(9% 0 74% 0);  transform: translate(-5px, 0); }
  90.6% { opacity: .7; clip-path: inset(61% 0 19% 0); transform: translate(4px, 0); }
  92%   { opacity: .7; clip-path: inset(37% 0 45% 0); transform: translate(-3px, 0); }
}

@keyframes home-glitch-b {
  0%, 55.9%, 59.6%, 100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translate(0, 0); }
  56%   { opacity: .55; clip-path: inset(72% 0 8% 0);  transform: translate(5px, 0); }
  57.4% { opacity: .55; clip-path: inset(22% 0 60% 0); transform: translate(-4px, 0); }
  58.6% { opacity: .55; clip-path: inset(48% 0 34% 0); transform: translate(3px, 0); }
}

/* 环绕技术标注小字（坐标 / 编号式装饰文本） */
.page-home .hero-anno {
  position: absolute;
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--muted, #8a97b1);
  opacity: .7;
  white-space: nowrap;
  pointer-events: none;
}

.page-home .hero-anno::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  background: var(--accent, #4d8dff);
  vertical-align: 1px;
}

.page-home .hero-anno--tl { top: 17%; left: 7%; }
.page-home .hero-anno--tr { top: 21%; right: 7%; }
.page-home .hero-anno--bl { bottom: 21%; left: 9%; }
.page-home .hero-anno--br {
  bottom: 16%;
  right: 8%;
  color: var(--accent-cyan, #35e0ff);
}

.page-home .hero-anno--br::before { background: var(--accent-cyan, #35e0ff); }

/* 信号标注的故障式闪烁（无限循环 → 仅 no-preference） */
@media (prefers-reduced-motion: no-preference) {
  .page-home .hero-anno--br { animation: home-anno-blink 2.6s steps(2, end) infinite; }
}

@keyframes home-anno-blink {
  0%, 100% { opacity: .85; }
  50%      { opacity: .25; }
}

.page-home .hero-sub {
  margin: 20px 0 0;
  font-size: 12px;
  letter-spacing: .35em;
  color: var(--muted, #8a97b1);
}

/* LOGO 正下方品牌字标（assets/img/brand.svg · 意安智行 + MINDSEC GO） */
.page-home .hero-brand {
  display: block;
  width: 300px;
  height: auto;
  margin: 18px auto 0;
}

/* hero 整组（主 LOGO + 字标）可点击 → #/about（home.js bindNavLinks 接管跳转） */
.page-home .hero-link {
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.page-home .hero-link:focus-visible {
  outline: 1px solid var(--accent, #4d8dff);
  outline-offset: 6px;
}

/* --------------------------------------------------------------------------
 * 2. 条幅区 · 磁性倾斜 + 鼠标形变 + 光泽掠过 + 点击 → #/room
 * ------------------------------------------------------------------------ */
.page-home .banner {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  height: 26vh;                          /* 首屏下沉：条幅拉高至约 1/4 屏 */
  margin-top: 8vh;                       /* 与 LOGO 区拉开间距，压过首屏底边 */
  border: 1px solid var(--line, rgba(140, 170, 255, .14));
  cursor: pointer;
  outline: none;
}

.page-home .banner:focus-visible {
  border-color: var(--accent, #4d8dff);
}

/* 磁性倾斜层：JS 依据鼠标位置写 rotateX/rotateY（见 home.js bindBannerDeform） */
.page-home .banner-tilt {
  width: 100%;
  height: 100%;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.page-home .banner-img {
  display: block;
  width: 100%;
  height: 100%;                          /* 填满条幅固定高度 */
  object-fit: cover;                     /* 1200×240 条幅图居中裁切，不变形 */
  transition: transform .2s ease-out;    /* transform-only（鼠标跟随） */
  will-change: transform;
}

/* 光泽掠过：线性渐变 sheen 周期扫过（低透明度背景 + transform，仅 no-preference） */
.page-home .banner-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 42%,
    rgba(230, 236, 247, .10) 50%,
    transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .page-home .banner-sheen { animation: home-sheen 4.8s cubic-bezier(.22, 1, .36, 1) infinite; }
}

@keyframes home-sheen {
  0%        { transform: translateX(-130%); }
  45%, 100% { transform: translateX(130%); }
}

.page-home .banner-hint {
  position: absolute;
  right: 20px;
  bottom: 14px;
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--accent-cyan, #35e0ff);
  opacity: 0;
  transition: opacity .25s cubic-bezier(.22, 1, .36, 1);   /* opacity-only */
  pointer-events: none;
}

.page-home .banner:hover .banner-hint { opacity: 1; }

/* 点击粒子飞散（home.js burstBanner）：原图与装饰瞬间隐去，画面由 canvas 粒子接管 */
.page-home .banner--bursting .banner-tilt,
.page-home .banner--bursting .banner-sheen,
.page-home .banner--bursting .banner-hint { opacity: 0; }

.banner-burst-canvas {
  position: fixed;            /* 位置/尺寸由 JS 按条幅 rect 写入 */
  z-index: 60;                /* 压过条幅与主区内容，不挡路由转场层 */
  pointer-events: none;
  transform-origin: center;   /* ① 展开阶段的 scale 放大中心 */
}

/* --------------------------------------------------------------------------
 * 2.5 粒子调参台（开发向，home.js bindBurstLab / BURST_CFG）
 * ------------------------------------------------------------------------ */
.page-home .burst-lab {
  margin-top: 14px;
  font-size: 12px;
  color: var(--muted, #8a97b1);
}
.page-home .burst-lab__toggle {
  padding: 6px 14px;
  letter-spacing: .2em;
  font-size: 12px;
  color: var(--muted, #8a97b1);
  background: none;
  border: 1px solid var(--line, rgba(140, 170, 255, .14));
  cursor: pointer;
  transition: color .25s cubic-bezier(.22, 1, .36, 1), border-color .25s cubic-bezier(.22, 1, .36, 1);
}
.page-home .burst-lab__toggle:hover {
  color: var(--accent-cyan, #35e0ff);
  border-color: var(--accent-cyan, #35e0ff);
}
.page-home .burst-lab__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin-top: 12px;
  padding: 14px 16px;
  background: rgba(16, 24, 39, .6);
  border: 1px solid var(--line, rgba(140, 170, 255, .14));
}
.page-home .burst-lab__panel[hidden] { display: none; }
.page-home .burst-lab__panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .1em;
  white-space: nowrap;
}
.page-home .burst-lab__panel input[type="range"] {
  width: 110px;
  accent-color: #4d8dff;
}
.page-home .burst-lab__panel span {
  min-width: 32px;
  font-family: Consolas, "Courier New", monospace;
  color: var(--accent-cyan, #35e0ff);
}
.page-home .burst-lab__preview {
  padding: 8px 22px;
  letter-spacing: .22em;
  font-size: 12px;
  color: var(--bg-0, #070b14);
  background: var(--accent, #4d8dff);
  border: none;
  cursor: pointer;
  transition: opacity .25s cubic-bezier(.22, 1, .36, 1);
}
.page-home .burst-lab__preview:hover { opacity: .85; }
.page-home .burst-lab__preview:disabled { opacity: .4; cursor: default; }

/* --------------------------------------------------------------------------
 * 3. 四六分区 · 左 4 右 6，两列等高（顶/底边在任意缩放下对齐）
 *    方案：.split 用 align-items:stretch 让两列同高；左右列内部改为 flex 列，
 *    .game-grid / .intro-panel 各自 flex:1 填满列高。左列高度由网格内容
 *    （图片宽高比）决定、右列由文字量决定，谁高听谁的，另一侧自动拉伸补齐，
 *    因此浏览器缩放（67%–150%）下两列底边始终对齐。
 * ------------------------------------------------------------------------ */
.page-home .split {
  display: flex;
  align-items: stretch;                  /* 两列等高（原为 flex-end，缩放下底边错位） */
  gap: 32px;
  margin-top: 48px;
}

.page-home .split-left {
  flex: 4 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page-home .split-right {
  flex: 6 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 左侧四框 · 横—竖—竖—横（2 列网格：横框跨 2 列，两竖框并排）
 * 行高按份数分配：第 1 行（体验按钮）内容自适应，竖格行 : 底部横框行 = 3:2，
 * 列高被拉伸时多出的空间按比例填充，外轮廓始终是整齐大长方形。 */
.page-home .game-grid {
  flex: 1 1 auto;                        /* 填满左列（stretch 后的）高度 */
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto minmax(0, 3fr) minmax(0, 2fr);
  gap: 16px;
}

.page-home .gl-cell {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line, rgba(140, 170, 255, .14));
  background: var(--panel, #101827);
  box-sizing: border-box;
}

.page-home .gl-cell--wide { grid-column: 1 / -1; }   /* 横 */
/* 竖格不再锁定 aspect-ratio：随行高 stretch 填充（img 为 object-fit:cover，
 * 不会变形）；其固有高度仍由 600×800 占位图的自然比例提供。 */

/* 第 4 格（底部横 · 密室逃脱）：明确的横放长方形。
 * JS 对三个游戏格统一输出 .gl-cell--tall（见 home.js gameCellHTML），
 * 这里用 [data-game="2"] 纯 CSS 修正为跨 2 列横框：
 *  - 网格行高不确定（左列驱动整体高度）时，由 aspect-ratio 21/9 提供固有高度；
 *  - 行高确定（右列文字更高、左列被拉伸）时，height:100% 填满所在行；
 *  - img 绝对定位，避免 600×800 竖图的自然比例把该行撑高。 */
.page-home .gl-game[data-game="2"] {
  grid-column: 1 / -1;
  aspect-ratio: 21 / 9;
  height: 100%;
}

.page-home .gl-game[data-game="2"] .gl-game-img {
  position: absolute;
  inset: 0;
}

/* 第 1 格（横）：「体验」按钮 */
.page-home .gl-enter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 28px;
  text-decoration: none;
  color: var(--ink, #e6ecf7);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);   /* transform-only */
}

.page-home .gl-enter:hover {
  transform: translateY(-3px);
  border-color: var(--accent, #4d8dff);
}

.page-home .gl-enter-text {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .5em;
}

.page-home .gl-enter-sub {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--accent-cyan, #35e0ff);
}

/* 第 2–4 格：小游戏图 + 悬停文字 */
.page-home .gl-game { margin: 0; }

.page-home .gl-game-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.8);                 /* 默认灰度，悬停转彩色（辅助效果） */
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}

.page-home .gl-game:hover .gl-game-img {
  transform: scale(1.05);
  filter: grayscale(0);
}

/* 悬停四角锐角括号框：::before 用 8 段线性渐变幻化出四个 L 形边角（opacity 淡入） */
.page-home .gl-game::before,
.page-home .char-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s cubic-bezier(.22, 1, .36, 1);
  background:
    linear-gradient(var(--accent-cyan, #35e0ff), var(--accent-cyan, #35e0ff)) 0 0 / 16px 2px,
    linear-gradient(var(--accent-cyan, #35e0ff), var(--accent-cyan, #35e0ff)) 0 0 / 2px 16px,
    linear-gradient(var(--accent-cyan, #35e0ff), var(--accent-cyan, #35e0ff)) 100% 0 / 16px 2px,
    linear-gradient(var(--accent-cyan, #35e0ff), var(--accent-cyan, #35e0ff)) 100% 0 / 2px 16px,
    linear-gradient(var(--accent-cyan, #35e0ff), var(--accent-cyan, #35e0ff)) 0 100% / 16px 2px,
    linear-gradient(var(--accent-cyan, #35e0ff), var(--accent-cyan, #35e0ff)) 0 100% / 2px 16px,
    linear-gradient(var(--accent-cyan, #35e0ff), var(--accent-cyan, #35e0ff)) 100% 100% / 16px 2px,
    linear-gradient(var(--accent-cyan, #35e0ff), var(--accent-cyan, #35e0ff)) 100% 100% / 2px 16px;
  background-repeat: no-repeat;
}

.page-home .gl-game:hover::before,
.page-home .char-card:hover::before { opacity: .95; }

/* 文字面板：一小块锐利斜切面板（右上角斜切），悬停滑入 */
.page-home .gl-game-caption {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  min-width: 46%;
  max-width: 88%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 26px 14px 16px;
  background: rgba(7, 11, 20, .85);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .28s cubic-bezier(.22, 1, .36, 1), transform .28s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.page-home .gl-game:hover .gl-game-caption {
  opacity: 1;
  transform: translateY(0);
}

.page-home .gl-game-name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--ink, #e6ecf7);
}

.page-home .gl-game-en {
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--accent-cyan, #35e0ff);
}

/* 右侧（6）：企划介绍文本框 · flex:1 填满右列高度，与左列顶/底边对齐 */
.page-home .intro-panel {
  position: relative;
  flex: 1 1 auto;
  padding: 36px 40px 64px;
  background: var(--panel, #101827);
  border: 1px solid var(--line, rgba(140, 170, 255, .14));
  box-sizing: border-box;
}

/* 左侧强调竖线（蓝→青渐变，静态背景） */
.page-home .intro-panel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  width: 3px;
  background: linear-gradient(180deg, var(--accent, #4d8dff), var(--accent-cyan, #35e0ff));
}

/* 顶部编号标注（PROJECT // 01，技术标注式小字） */
.page-home .intro-no {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--muted, #8a97b1);
  opacity: .85;
  pointer-events: none;
}

.page-home .intro-no::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border: 1px solid var(--accent, #4d8dff);
  vertical-align: 0;
}

.page-home .intro-title {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--ink, #e6ecf7);
}

.page-home .intro-title-en {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .35em;
  color: var(--muted, #8a97b1);
}

.page-home .intro-para {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 2;
  text-align: justify;
  color: var(--muted, #8a97b1);
}

/* 段落行间极细分隔线（比 --line 更淡） */
.page-home .intro-para + .intro-para {
  border-top: 1px solid rgba(140, 170, 255, .08);
  padding-top: 16px;
}

.page-home .intro-about {
  position: absolute;                    /* 右下角 */
  right: 32px;
  bottom: 24px;
  font-size: 13px;
  letter-spacing: .15em;
  text-decoration: none;
  color: var(--accent, #4d8dff);
  transition: opacity .25s cubic-bezier(.22, 1, .36, 1);
}

.page-home .intro-about:hover { opacity: .75; }

.page-home .intro-about-arrow {
  display: inline-block;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);   /* transform-only */
}

.page-home .intro-about:hover .intro-about-arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
 * 4. 人物立绘区 · #characters（sidebar「立绘与 IP」锚点）
 * ------------------------------------------------------------------------ */
.page-home .characters { margin-top: 72px; }

.page-home .sec-title {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .3em;
}

.page-home .sec-title-en {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .35em;
  color: var(--muted, #8a97b1);
}

.page-home .char-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 四个竖直并排 */
  gap: 20px;
}

.page-home .char-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line, rgba(140, 170, 255, .14));
  background: var(--panel, #101827);
}

.page-home .char-img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 480px;                     /* 充分长，完整展示全身 */
  object-fit: cover;
  filter: grayscale(.85);                /* 默认灰度，悬停转彩色（辅助效果） */
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), filter .4s ease;
}

.page-home .char-card:hover .char-img {
  transform: scale(1.04);
  filter: grayscale(0);
}

/* 立绘文字面板：同样为锐利斜切小块（右上角斜切），悬停滑入 */
.page-home .char-caption {
  position: absolute;
  left: 0;
  right: auto;
  bottom: 0;
  min-width: 58%;
  max-width: 92%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 30px 18px 18px;
  background: rgba(7, 11, 20, .88);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.page-home .char-card:hover .char-caption {
  opacity: 1;
  transform: translateY(0);
}

.page-home .char-tag {
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--accent-cyan, #35e0ff);
}

.page-home .char-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .2em;
}

.page-home .char-desc {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted, #8a97b1);
}

/* --------------------------------------------------------------------------
 * 5. 页脚 · 数据来自 window.SITE_DATA
 *    上方细线 draw-in：仅在 JS 标记 .rv 后启用 scaleX 0→1（无 JS 时直接可见）
 * ------------------------------------------------------------------------ */
.page-home .home-footer { margin-top: 80px; padding-bottom: 40px; }

.page-home .hf-line {
  height: 1px;
  background: var(--line, rgba(140, 170, 255, .14));
}

.page-home .rv .hf-line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1) .2s;
}

.page-home .rv.in .hf-line { transform: scaleX(1); }

.page-home .hf-row {
  display: flex;
  gap: 64px;
  padding: 24px 0 8px;
}

.page-home .hf-label {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--muted, #8a97b1);
}

.page-home .hf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-home .hf-links a {
  font-size: 12px;
  letter-spacing: .1em;
  text-decoration: none;
  color: var(--ink, #e6ecf7);
  transition: opacity .25s cubic-bezier(.22, 1, .36, 1);
}

.page-home .hf-links a:hover { opacity: .6; }

.page-home .hf-copyright {
  margin: 20px 0 0;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--muted, #8a97b1);
}

/* --------------------------------------------------------------------------
 * 6. 滚动显现（reveal）· 由 home.js bindReveal 驱动
 *    初始隐藏态 .rv 仅由 JS 在 IntersectionObserver 可用且非 reduced-motion
 *    时添加；显现完成后 JS 会移除 .rv，使 hover 过渡回到元素自身定义。
 *    本规则置于文件末尾：与同特异性选择器冲突时优先生效。
 * ------------------------------------------------------------------------ */
.page-home .rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1),
              transform .55s cubic-bezier(.22, 1, .36, 1);
}

.page-home .rv.in {
  opacity: 1;
  transform: translateY(0);
}