/* home-sequence.css — 首页「How It Works」滚动帧序列（配套 home-sequence.js）
 *
 * 规格：
 *   桌面（≥768px，2026-10-05 王总定稿 v4）：5 步 × 40 帧 = 200 帧 · 1280×720 · AVIF q45 · 视频前 4.0s · 满屏 cover
 *   手机（<768px，2026-10-05 王总拍板手机档）：5 步 × 32 帧 = 160 帧 · 768×432 · AVIF q42 · 2.11MB · 16:9 卡片
 *     —— 竖屏用满屏 cover 会裁掉约 74% 画面（1280 宽只看到中间 26%），故手机改为
 *        「标题 / 16:9 画面卡片 / 说明 + 按钮」纵向排布，画面 0 裁切；高度用 svh 规避 iOS 地址栏抖动。
 * 结构：
 *   <section data-seq>
 *     <div class="wrap">标题…</div>
 *     <div class="seq-track" data-seq-track data-seq-base="…" data-seq-ext="avif" data-seq-frames="40">
 *       <div class="seq-stage" data-seq-stage><canvas data-seq-canvas></canvas>…</div>
 *     </div>
 *     <div class="wrap"><div class="steps" data-seq-source>…静态卡片（文案唯一来源）…</div></div>
 *   </section>
 * 降级：无 JS / 屏宽 <360px / prefers-reduced-motion / 浏览器不支持 AVIF / 手机端 2G-3G 或开了省流
 *       → 不激活，显示 [data-seq-source] 静态卡片（内容零丢失）
 */

/* ── 未激活：轨道不占高度，静态卡片正常显示 ── */
[data-seq] .seq-track { display: none; }

/* ── 激活后：轨道 5 屏，内层 sticky 锁屏 ── */
[data-seq].seq-on .seq-track { display: block; height: 500vh; position: relative; }
[data-seq].seq-on [data-seq-source] { display: none; }
[data-seq].seq-on { padding-left: 0; padding-right: 0; }         /* 画面要满宽（只在桌面激活，安全） */
[data-seq].seq-on .wrap { padding-left: 24px; padding-right: 24px; }  /* 标题/文案保留左右留白 */

.seq-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #1C1815; }
.seq-stage [data-seq-canvas] { display: block; width: 100%; height: 100%; }   /* 只锁帧画布；标题画布尺寸由 JS 设定 */

/* ── 大字点阵标题（B 方案；canvas 绘制。真文字在 DOM 里以 .seq-sr 隐藏保留 → 屏幕阅读器/爬虫可读）── */
.seq-title { position: absolute; left: 0; right: 0; top: 46%; transform: translateY(-50%); z-index: 3;
             display: flex; justify-content: center; pointer-events: none; }
.seq-title canvas { display: block; }
/* 柔和暗角托底：保证金色点阵在任何画面上都够清楚（也更有电影感） */
.seq-title::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: min(1200px, 100vw); height: min(460px, 56vh); transform: translate(-50%, -50%);
  background: radial-gradient(58% 58% at 50% 50%, rgba(12,10,8,0.55), rgba(12,10,8,0) 72%); }
.seq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 右下玻璃卡：只放【编号 + 说明句】（内容由 JS 从静态卡片复制，DOM 里只有一份原文）── */
.seq-copy { position: absolute; right: 6vw; bottom: 9vh; width: min(420px, 44vw); z-index: 4; }
.seq-panel {
  display: none; padding: 20px 22px; color: #fff; border-radius: 16px;
  background: rgba(28,24,21,0.55); border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.seq-panel.on { display: block; animation: seqIn .55s cubic-bezier(.22,1,.36,1) both; }
@keyframes seqIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.seq-panel .seq-num {
  display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: var(--cta, #C8873F);
  align-items: center; justify-content: center; font-weight: 800; font-size: 13.5px; margin-bottom: 10px;
}
.seq-panel p { margin: 0; color: rgba(255,255,255,0.88); font-size: 14.5px; }

/* ── 常驻 CTA（五步全程都在，不随步骤变；位置 = 玻璃小卡正下方）── */
.seq-cta {
  display: block; margin-top: 14px; text-align: center; text-decoration: none;
  background: var(--cta, #C8873F); color: #fff; font-size: 15px; font-weight: 700;
  padding: 13px 26px; border-radius: 50px; letter-spacing: 0.3px;
  box-shadow: 0 10px 26px rgba(195,125,74,0.42); transition: transform .2s, background .2s;
}
.seq-cta:hover { background: var(--cta-dark, #A96A22); transform: translateY(-2px); }

/* 静态布局（手机 / 无 JS / 减动效）下的同一 CTA：序列激活时隐藏，避免出现两个按钮 */
.seq-cta-static {
  display: block; max-width: 340px; margin: 26px auto 0; text-align: center; text-decoration: none;
  background: var(--cta, #C8873F); color: #fff; font-size: 15px; font-weight: 700;
  padding: 13px 26px; border-radius: 50px; letter-spacing: 0.3px;
  box-shadow: 0 10px 26px rgba(195,125,74,0.42);
}
.seq-cta-static:hover { background: var(--cta-dark, #A96A22); }
[data-seq].seq-on .seq-cta-static { display: none; }

/* ── 左下角提示 + 进度点 ── */
.seq-hint { position: absolute; left: 6vw; bottom: 12vh; z-index: 2; color: rgba(255,255,255,0.7); font-size: 13px; letter-spacing: 1.2px; }
.seq-bar { position: absolute; left: 6vw; bottom: 8vh; display: flex; gap: 10px; z-index: 2; }
.seq-dot { width: 34px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.25); transition: background .3s; }
.seq-dot.on { background: var(--cta, #C8873F); }

@media (prefers-reduced-motion: reduce) {
  .seq-panel.on { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   手机档（<768px）：满屏视差（cover 铺满）+ 每步一个横向裁切窗
   王总 2026-10-05 拍板："就用正常视频，只显示像素能显示的范围" → 竖屏满屏只看到中间约 26% 宽
   → 用 data-seq-pos（每步一个 0-1 的数）把裁切窗挪到"关键动作"所在处（步1=手+卷尺数字、步3=针）
   文字全部浮在画面上：大字在上、说明+按钮在下（底部压暗保证可读）
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  [data-seq].seq-on .seq-track { height: 400svh; }        /* 4 屏（桌面 5 屏，拇指少划一屏） */
  .seq-stage { height: 100svh; display: block; padding: 0; }
  /* 满屏：canvas 铺满整屏（cover 由 JS 绘制；横向位置 = 每步裁切窗） */
  .seq-stage [data-seq-canvas] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    aspect-ratio: auto; border-radius: 0; box-shadow: none;
  }
  /* 底部压暗：白字/按钮压在画面上也能读清 */
  .seq-stage::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 48%;
    background: linear-gradient(to top, rgba(10, 8, 7, 0.86), rgba(10, 8, 7, 0.34) 46%, rgba(10, 8, 7, 0));
    z-index: 1;
  }
  /* 大字位置 = 开发站已验证的 17%：顶栏是【滚动方向感知】的（下滑加 .nav-hide → translateY(-105%) 整条隐藏），
     浏览序列（下滑）时顶栏不在，17% 零遮挡；上滑时顶栏出现，dev 版仅 52px 高也不遮。
     注意：生产上若带药丸导航的顶栏版本（112px）注入成功，上滑瞬间会压住大字顶部约 30px（见手册 §24.18.1.2） */
  .seq-title { position: absolute; left: 0; right: 0; top: 17%; transform: translateY(-50%); }
  .seq-title::before { display: block; }                  /* 满屏时暗角托底要留着 */
  .seq-copy { position: absolute; left: 18px; right: 18px; bottom: 13.5%; width: auto; top: auto; }
  .seq-panel { padding: 14px 16px; border-radius: 14px; }
  .seq-panel .seq-num { width: 24px; height: 24px; font-size: 12.5px; margin-bottom: 8px; }
  .seq-panel p { font-size: 13.5px; }
  .seq-cta { margin-top: 12px; padding: 12px 22px; font-size: 14.5px; }
  .seq-bar { position: absolute; left: 18px; bottom: 6.5%; }
  .seq-dot { width: 26px; }
  .seq-hint { display: none; }                            /* 手机上省掉 SCROLL 提示 */
}