/* ==========================================================================
   首页整屏滑动（2026-10-25 店主：「他的首页是滑动一下一个页，你也做成这个效果」）
   --------------------------------------------------------------------------
   参考站点 ak.hypergryph.com 的首页语言是三步，缺一条就不像：
     ① 一屏 = 一个完整画面（屏与屏之间不留"半张卡"，不让用户停在缝里）；
     ② **一次手势只走一屏**（不是"滚一段再吸附"，是"整屏推进"）；
     ③ 常驻的屏导航（右侧细点）+ 进入动画（内容从下方轻轻浮起）。

   实现要点（都是踩过坑才这么写的，改之前先读）：
     · 全部样式挂在 `html.fs-home` 下 —— 这个类由 `assets/js/home-fullscreen.js`
       在**确认可用**之后才加。脚本没跑（或屏太矮）时，首页退回普通长页，
       一点都不会坏。这是整份文件最重要的一条：默认不接管。
     · 吸附靠 CSS `scroll-snap`（touch / 键盘 / 滚动条都免费可用），
       不自己写 touchmove 拦截 —— 拦截会杀掉 iOS 的惯性滚动，手感立刻变差。
     · **滚轮必须自己接管**：强制吸附下滚一格（deltaY≈100）只走 100px，
       松手后 Snap 会把你吸回原屏 —— 鼠标用户会觉得"滚不动"。见 js 里的 wheel 部分。
     · 屏高用 `100svh` 而不是 `100vh`/`100dvh`：`100vh` 会在地址栏收起时溢出，
       `100dvh` 会在滚动中途改变高度导致整屏位移（抖动）。`svh` 取"最小视口"，稳定。
   ========================================================================== */

/* ---- ① 只在接管后生效 ---- */
html.fs-home {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
html.fs-home body {
  /* 防 iOS 整屏橡皮筋把 deck 整体拽出去（那会让第一屏露出一条背景） */
  overscroll-behavior-y: none;
}

/* 顶栏改为**固定覆盖**：sticky 会随吸附被滚出视口，屏 2/3 就没有导航了。
   固定之后各屏自己用 padding-top 让出顶栏高度，几何与改前完全一致
   （改前 hero 顶 = 118，改后仍然是 118）。 */
html.fs-home #site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
}

/* 首页的 `main.wrap` 是空壳（内容早已搬走），接管后直接不占位 */
html.fs-home main.wrap {
  display: none;
}

/* ---- ② 屏 ---- */
html.fs-home .fs-pane {
  position: relative;
  box-sizing: border-box;
  height: 100vh;              /* 兜底：不支持 svh 的老浏览器 */
  height: 100svh;
  padding-top: var(--topbar-h, 118px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;   /* 🔴 一次手势只停一屏；少了它就是"一甩三屏" */
  overflow: hidden;           /* 内容超出要裁，否则会把后面的屏顶下去（见 fs-over 阀门） */
  margin: 0;
}

/* 内容超出时的阀门：由 js 实测加上（高度不够的小屏 / 大字模式）。
   改成屏内可滚 —— 宁可这一屏"能滚"，也不要裁掉内容。 */
html.fs-home .fs-pane.fs-over {
  overflow-y: auto;
  overscroll-behavior: contain;
  justify-content: flex-start;
}

/* 极淡的顶部暖金光，给"整屏"一点层次；不用图片（大图模糊在低端机上会掉帧） */
html.fs-home .fs-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(62% 46% at 50% 0%, rgba(255, 224, 0, .055), transparent 72%);
}

/* 屏 1：轮播 + 六格。这两块**改前就正好铺满一屏**（见 brand-touch.css C15 的
   高度公式），所以这里不做任何"重新分配"，只把底边距收掉，
   再把两块作为一个整体在剩余空间里居中（桌面端会有余量）。 */
html.fs-home .fs-pane--hero .sec {
  margin: 22px 0 0;
}
@media (min-width: 681px) {
  html.fs-home .fs-pane--hero {
    padding-bottom: 28px;
  }
}

/* 屏 2：公告。`.pk` 自带 `overflow:hidden` 与 44/46 上下内边距，
   居中后上下留白是对称的，不用改。 */
html.fs-home .pk.fs-pane {
  border-bottom: 0;
}
/* 🔴 必须 `min-width: 0`：`.pk` 变成 flex 容器后，`.pk-in` 成了 flex item，
   而 flex item 的 `min-width` 默认是 `auto`（= 内容最小宽度）。
   公告是一排横向卡片，最小宽度算出来 1148 —— 于是 `.pk-in` 被撑到 1148，
   卡片按桌面尺寸 895×604 渲染，390 的屏上直接溢出（实测）。
   块级布局时不会有这个问题，是"换成 flex 才暴露"的坑。 */
html.fs-home .pk.fs-pane > .pk-in {
  width: 100%;
  min-width: 0;
}

/* ── 公告屏「铺满」（2026-10-25 店主：「公告这一页铺满！」）───────────────
   实测 1920×960：`.pk-in` 只有 452px 高（y 287→739），屏高 960 —— 上下各空 250px，
   卡片行 289 高挤在中间，整屏像"内容没做完"。
   根因不是宽度（那一条早就 max-width:none 了），而是**高度没人负责**：
   `.pk-in` 是 `align-items: stretch` 的 flex，但它的高由内容决定，
   内容本身只有 452，屏就空着。

   解法是把这一屏当成**一页版式**来排，而不是"一条通栏里塞一行卡片"：
     · `.pk-in` 撑满屏（min-height: 100%，父级已是 flex + 100svh）；
     · 左栏两头撑开 —— 描边大字贴顶、NOTICE 贴底（原来是 `space-between`，
       但容器只有 452 高，撑不动）；
     · 右栏三段分布 —— 小字说明靠上、卡片行在剩余空间里**垂直居中**、分页点贴底。

   ⚠️ 卡片本身**不拉高**：它是 16:9 封面 + 标题 + 摘要的横版卡，
      硬拉高只能 `object-fit: cover` 裁掉封面两侧的联动文字（实测裁 46%）。
      「铺满」靠的是版式把整屏占住，不是把卡片拉成竖条。 */
@media (min-width: 901px) {
  html.fs-home .pk.fs-pane > .pk-in { min-height: 100%; align-items: stretch; }
  html.fs-home .pk.fs-pane .pk-side { justify-content: space-between; }
  /* 大字吃高度：屏越高字越大，但上限 96 —— 再大就把右栏挤窄了 */
  html.fs-home .pk.fs-pane .pk-word { font-size: clamp(46px, 6.6vh, 96px); }
  html.fs-home .pk.fs-pane .pk-main {
    display: flex; flex-direction: column; min-height: 0;
  }
  /* 卡片行吃掉中间所有剩余高度，并在里面垂直居中 */
  html.fs-home .pk.fs-pane .pk-viewport {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  html.fs-home .pk.fs-pane .pk-track { width: 100%; }
  /* 🔴 横滑轨道 → **整屏网格**（2026-10-25 店主：「我是叫你用数量铺满公告」）。
     上一版我把它做成了"一屏 2 张大卡"，理解错了：他要的是**数量**铺满 ——
     10 条公告一屏全部摊开，把整块屏幕填满，而不是靠放大两张图撑场面。
     所以整屏模式下这一屏不再横滑，改 5 列 × N 行的网格：
       · 列数固定 5（1920 下每张 305 宽，和普通页一屏 5 张同宽，封面细节不丢）；
       · 行高 `minmax(0,1fr)` 均分剩余高度 → 2 行就是各 365 高（图 275），
         10 条正好铺满，不留上下空档；
       · 图片区吃掉卡片里除标题/日期外的全部高度（`aspect-ratio: auto`），
         原图 16:9 用 cover 裁 —— 305×275 对 16:9 只裁 ~27%，联动标题还在。
     ⚠️ 代价：这一屏不再横滑，箭头与分页点在整屏模式下隐藏。
        桌面首页本来就是"一滑一屏"，公告一屏看全反而少了两次点击。 */
  html.fs-home .pk.fs-pane .pk-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 14px;
    width: 100%; height: 100%;
    /* 轨道会被 loopCarousel 写 transform —— 网格下必须压掉，否则整块被推走 */
    transform: none !important;
    transition: none !important;
  }
  html.fs-home .pk.fs-pane .pk-card {
    flex: none; margin-right: 0; min-height: 0;
    display: flex; flex-direction: column;
  }
  /* 🔴 图区**保持 16:9、不拉高**（第一版让它 `flex:1` 吃满剩余高度，
     结果 305×275 对 16:9 竖裁 36%，联动海报两侧的标题字被切掉半截）。
     多出来的高度全部给**文字**：标题放宽到 2 行、日文标题吃掉余量。
     这样卡片照样顶到行高（网格铺满），但封面一张都不裁。 */
  html.fs-home .pk.fs-pane .pk-thumb {
    flex: none; aspect-ratio: 16 / 9;
  }
  html.fs-home .pk.fs-pane .pk-t {
    flex: none; padding-bottom: 0;
    white-space: normal; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  html.fs-home .pk.fs-pane .pk-d { flex: none; }
  /* 日文原题吃掉剩余高度（它是这张卡里最后一块信息，多显示两行不损失什么） */
  html.fs-home .pk.fs-pane .pk-jp {
    flex: 1 1 auto; min-height: 0; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6;
  }
  /* 不再横滑：控件与分页点一起收起 */
  html.fs-home .pk.fs-pane .pk-viewport .hc-nav,
  html.fs-home .pk.fs-pane .pk-dots { display: none; }
  html.fs-home .pk.fs-pane .pk-dots { padding-top: 0; margin-top: auto; }
  /* 说明文字贴顶，别再让 space 把它推下去 */
  html.fs-home .pk.fs-pane .notice-sub { margin-top: 0; }
}

/* 屏 3：页脚。它自己 693px（390 宽），让出顶栏后剩 726 —— 刚好装得下。
   底部再让 44：底部横排屏导航占最后 40px，不给就让版权行被压住。 */
html.fs-home #site-footer.fs-pane {
  padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
}
html.fs-home #site-footer.fs-pane > .footer {
  margin: 0;
}

/* ---- ③ 进入动画（内容轻轻浮起；只动 opacity/transform）---- */
html.fs-home .fs-pane > #heroCarousel,
html.fs-home .fs-pane > .sec,
html.fs-home .pk.fs-pane > .pk-in,
html.fs-home #site-footer.fs-pane > .footer {
  transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
              transform .55s cubic-bezier(.22, .61, .36, 1);
}
html.fs-home .fs-pane:not(.is-live) > #heroCarousel,
html.fs-home .fs-pane:not(.is-live) > .sec,
html.fs-home .pk.fs-pane:not(.is-live) > .pk-in,
html.fs-home #site-footer.fs-pane:not(.is-live) > .footer {
  opacity: 0;
  transform: translateY(18px);
}
/* 同一屏里第二块晚一点起（0.06s 足够看出"先后"，多了会显得拖） */
html.fs-home .fs-pane--hero:not(.is-live) > .sec {
  transition-delay: .07s;
}

/* 🔴 2026-10-25 店主：「这一点你理解错了，这个动画是给页脚的」。
   上一版我把「从下往上冒出来 / 从上往下滑进去」做大在**公告屏**（64px + 方向类），
   理解错了 —— 那是给**页脚抽屉**的（见 footer-drawer.css 的同名段）。
   公告屏回到原本的 18px 轻浮起（上面 `.fs-pane:not(.is-live) > *` 那组规则），
   不再有 64px 位移与方向类。
   ⚠️ `setLive(i, dir)` 仍然会打 `.fs-from-up / .fs-from-down`：方向信息本身有用
      （以后哪一屏需要"从来的方向进出"直接用），只是当前没有屏在读它。 */

/* 站点总闸关闭时：彻底停掉（不位移、不淡入）
   🔴 这里原来写的是 `@media (prefers-reduced-motion: reduce)`。问题在于
     店主那台 PC 的 Windows「动画效果」是**关着**的 —— 系统报 reduce，
     于是整条 `transform: none !important` 生效，公告屏的"冒出来"永远看不见。
     站点自己的口径（store.js 的 Motion）是**默认 mv-force 强制开**，
     首页脚本 `reduceMotion()` 也只认 `html.mv-off`。现在 CSS 与它们对齐：
     系统偏好不再单独决定，只有 `html.mv-off` 才真关。 */
html.mv-off .fs-pane > *,
html.mv-off .fs-pane:not(.is-live) > * {
  transition: none !important;
  transform: none !important;
}
html.mv-off.fs-home { scroll-behavior: auto; }

/* ---- ④ 屏导航（手机：底部横条 · 桌面：右侧竖排带文字）------------------
   为什么手机不在右侧竖排（参考站是竖排的）：
     390 宽下内容左右只留 16 边，右侧竖排的 40px 命中盒会压在卡片右边缘上，
     实测截图里那 3 个菱形和轮播自己的菱形页码挤在同一高度，
     看起来像"多了 5 个轮播点" —— 那是噪音，不是导航。
   手机改到底部**横排短横线**：① 形状和轮播的菱形区分开；
     ② 落在首屏面板底部的空白里（面板 845、卡片止于 807），不压任何内容；
     ③ 横排在底部是移动端的通用语言（和轮播页码同一套认知）。
   桌面（≥900）内容左右有余量，回到参考站的竖排 + 文字标签。 */
/* 手机上不挂可点的屏导航，改挂**屏序号**（01 / 03）。原因很实在：
   390 宽的屏上，竖向或底部的 40×40 命中盒一定会压在卡片上 ——
   底排卡片下沿到屏底只有 17px，横向横条的命中区会偷走"环境/我的收藏"
   两张卡最底下 24px 的点击（点了就跳屏，比看不见导航更糟）。
   序号是纯文字、`pointer-events:none`，既说明"一共有 3 屏"，又一点不挡手。 */
.fs-count {
  position: fixed;
  right: 16px;
  bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  z-index: 66;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .12em;
  color: var(--text-3);
  pointer-events: none;
}
.fs-count b {
  color: var(--gold-ink);          /* 当前页用金字（白主题下自动换暗金） */
  font-weight: 700;
}

/* 可点的屏导航只在桌面出现（≥900 内容左右有余量） */
.fs-rail {
  display: none;
  position: fixed;
  left: 50%;
  bottom: max(0px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 66;
}
.fs-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.fs-rail li { position: relative; }
.fs-rail button {
  position: relative;
  width: 40px;                /* 触控底线 40×40（视口守卫会记小目标） */
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fs-dash {
  width: 12px;
  height: 2px;
  border-radius: 1px;
  /* 不做半透明：首屏第一次实测时 .5 透明度的非活动横线在深色面板底上
     基本看不见，屏导航就"只剩一条金线"，像残留物。用实色 `--text-3`。 */
  background: var(--text-3);
  transition: width .25s ease-out, background .2s;
}
.fs-rail button:hover .fs-dash,
.fs-rail button:focus-visible .fs-dash {
  background: var(--text-2);
}
.fs-rail button[aria-current="true"] .fs-dash {
  width: 22px;
  background: var(--gold);
}
.fs-rail button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -6px;
  border-radius: 6px;
}

/* 文字标签只在桌面出现（手机上会盖住内容，是噪音） */
.fs-txt {
  position: absolute;
  right: 42px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--text-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}

@media (min-width: 900px) {
  .fs-rail {
    display: block;
    left: auto;
    right: max(10px, env(safe-area-inset-right, 0px));
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .fs-rail ol {
    flex-direction: column;
    gap: 2px;
  }
  .fs-count { display: none; }
  /* 竖细线 + 金色进度：只在桌面画（手机上会变成屏幕上一条莫名其妙的竖线） */
  .fs-rail ol::before,
  .fs-rail ol::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .fs-rail ol::before {
    top: 12px;
    bottom: 12px;
    background: var(--ink-4);
    opacity: .7;
  }
  .fs-rail ol::after {
    top: 12px;
    height: calc((100% - 24px) * var(--fs-p, 0));
    background: var(--gold);
    transition: height .3s ease-out;
  }
  .fs-dash {
    width: 2px;
    height: 12px;
    border-radius: 1px;
  }
  .fs-rail button[aria-current="true"] .fs-dash {
    width: 2px;
    height: 22px;
  }
  .fs-rail button:hover .fs-txt,
  .fs-rail button:focus-visible .fs-txt,
  .fs-rail button[aria-current="true"] .fs-txt {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}