/* 富奥东机工减振器 · 产品手册 H5 翻页版
   纯静态，无第三方依赖 */

:root{
  /* 单页 210 x 285 mm -> 宽高比 0.736842 */
  --ratio: 0.736842;
  --sheetW: min(100vw, calc((100vh - 100px) * 0.736842));
  --chrome-top: 62px;
  --chrome-bottom: 74px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ink: #0b1622;
  --blue: #20458b;
  --blue-lt: #7fb2ff;
}
@supports (height: 100dvh){
  :root{ --sheetW: min(100vw, calc((100dvh - 100px) * 0.736842)); }
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0; height:100%; overflow:hidden;
  background:var(--ink);
  color:#fff;
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* 背景：深蓝渐变 + 一点光晕，模拟书页置于台面 */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, #1c3a63 0%, rgba(28,58,99,0) 60%),
    radial-gradient(100% 70% at 50% 115%, #123049 0%, rgba(18,48,73,0) 62%),
    linear-gradient(180deg,#0d1a29 0%, #0b1622 55%, #08111b 100%);
}

#stage{
  position:fixed; inset:0; z-index:1;
  overflow:hidden; touch-action:none; cursor:grab;
}
#stage.grabbing{ cursor:grabbing; }

#track{
  display:flex; height:100%;
  will-change:transform;
  backface-visibility:hidden;
}

.page{
  flex:0 0 100%; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  /* 关键：裁掉本页纸面的投影，否则相邻页的 box-shadow 会盖到当前页边缘 */
  overflow:hidden;
}

/* 纸面 */
.sheet{
  position:relative;
  width:var(--sheetW);
  aspect-ratio:210 / 285;
  background:#fff center/100% 100% no-repeat;
  box-shadow:0 18px 44px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.06) inset;
  border-radius:2px;
  overflow:hidden;
  transform-origin:0 0;
  will-change:transform;
}
.sheet img.full{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; object-fit:cover;
  opacity:0; transition:opacity .28s ease;
  -webkit-user-drag:none; user-select:none;
}
.sheet img.full.loaded{ opacity:1; }
.page[data-i="2"] .sheet{ box-shadow:0 18px 44px rgba(0,0,0,.55); }

/* ============ 顶部栏 ============ */
#topbar{
  position:fixed; z-index:20; top:0; left:0; right:0;
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 26px;
  background:linear-gradient(180deg, rgba(6,13,22,.88) 0%, rgba(6,13,22,.55) 55%, rgba(6,13,22,0) 100%);
  transition:opacity .26s ease, transform .26s ease;
}
.brand{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.brand-zh{ font-size:13px; font-weight:600; letter-spacing:.02em; white-space:nowrap; }
.brand-en{ font-size:8.5px; letter-spacing:.06em; color:rgba(255,255,255,.62); white-space:nowrap; }

#tocBtn{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 14px 0 12px; border-radius:17px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.10);
  color:#fff; font-size:13px; font-family:inherit;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  cursor:pointer; transition:background .2s, border-color .2s;
}
#tocBtn:active{ background:rgba(255,255,255,.2); }
#tocBtn .ico{
  width:13px; height:9px; position:relative; display:inline-block;
  border-top:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
}
#tocBtn .ico::after{
  content:""; position:absolute; left:0; right:0; top:50%; margin-top:-.8px;
  border-top:1.6px solid currentColor;
}

/* ============ 底部栏 ============ */
#bottombar{
  position:fixed; z-index:20; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:30px 16px calc(env(safe-area-inset-bottom,0px) + 14px);
  background:linear-gradient(0deg, rgba(6,13,22,.88) 0%, rgba(6,13,22,.5) 55%, rgba(6,13,22,0) 100%);
  transition:opacity .26s ease, transform .26s ease;
  pointer-events:none;
}
.counter{ font-size:12px; letter-spacing:.1em; color:rgba(255,255,255,.9); font-variant-numeric:tabular-nums; }
.counter b{ font-size:15px; font-weight:600; }
.counter i{ margin:0 4px; font-style:normal; color:rgba(255,255,255,.34); }
.counter span{ color:rgba(255,255,255,.55); }
.label{ font-size:10.5px; color:rgba(255,255,255,.5); letter-spacing:.04em; max-width:78vw;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 进度 */
#progress{
  position:fixed; z-index:22; left:0; right:0; bottom:0; height:3px;
  background:rgba(255,255,255,.08); pointer-events:none;
}
#progressBar{
  display:block; height:100%; width:3.8%;
  background:linear-gradient(90deg,#2f6fd0,#7fb2ff);
  transition:width .38s var(--ease);
}

/* 桌面端左右翻页按钮 */
#pager{ position:fixed; z-index:21; inset:0; pointer-events:none; }
#pager button{
  position:absolute; top:50%; width:44px; height:64px; margin-top:-32px;
  border:0; border-radius:8px; padding:0; cursor:pointer;
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.75);
  display:none; align-items:center; justify-content:center;
  pointer-events:auto; transition:background .2s, opacity .25s;
  font-size:0; line-height:0;
}
#pager button::before{
  content:""; width:11px; height:11px; border-top:2px solid currentColor; border-right:2px solid currentColor;
}
#prevBtn{ left:14px; } #prevBtn::before{ transform:rotate(-135deg); margin-left:4px; }
#nextBtn{ right:14px; } #nextBtn::before{ transform:rotate(45deg); margin-right:4px; }
#pager button:hover{ background:rgba(255,255,255,.16); }
#pager button:disabled{ opacity:.2; cursor:default; }
@media (hover:hover) and (pointer:fine){
  #pager button{ display:flex; }
}

/* ============ 目录抽屉 ============ */
#scrim{
  position:fixed; inset:0; z-index:30; background:rgba(4,10,17,.6);
  opacity:0; transition:opacity .28s ease;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
#scrim.show{ opacity:1; }

#toc{
  position:fixed; z-index:31; top:0; right:0; bottom:0;
  width:min(88vw, 380px);
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#12263f 0%, #0c1a2b 100%);
  border-left:1px solid rgba(255,255,255,.08);
  box-shadow:-20px 0 50px rgba(0,0,0,.5);
  transform:translate3d(102%,0,0);
  transition:transform .36s var(--ease);
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
#toc.open{ transform:translate3d(0,0,0); }

.toc-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:22px 20px 16px; border-bottom:1px solid rgba(255,255,255,.08);
}
.toc-head h2{ margin:0; font-size:20px; font-weight:600; letter-spacing:.01em; }
.toc-head p{ margin:3px 0 0; font-size:12px; color:rgba(255,255,255,.5); letter-spacing:.3em; }
#tocClose{
  width:32px; height:32px; flex:0 0 auto; border-radius:50%;
  border:1px solid rgba(255,255,255,.16); background:transparent; color:rgba(255,255,255,.7);
  font-size:20px; line-height:1; cursor:pointer; font-family:inherit;
}
#tocClose:active{ background:rgba(255,255,255,.1); }

.toc-body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 0 14px; }
.toc-item{
  display:flex; align-items:baseline; gap:10px; width:100%; text-align:left;
  padding:12px 20px; border:0; background:transparent; color:#fff;
  font-family:inherit; cursor:pointer; border-left:2px solid transparent;
}
.toc-item:active{ background:rgba(255,255,255,.06); }
.toc-item .zh{ font-size:14.5px; font-weight:500; white-space:nowrap; }
.toc-item .en{ font-size:10.5px; color:rgba(255,255,255,.42); letter-spacing:.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toc-item .no{ margin-left:auto; font-size:11px; color:rgba(255,255,255,.4);
  font-variant-numeric:tabular-nums; flex:0 0 auto; }
.toc-item.sub{ padding-left:34px; }
.toc-item.sub .zh{ font-size:13.5px; font-weight:400; }
.toc-item.active{ background:rgba(127,178,255,.10); border-left-color:var(--blue-lt); }
.toc-item.active .zh{ color:#cfe1ff; }
.toc-group{
  padding:16px 20px 6px; font-size:11px; letter-spacing:.22em;
  color:rgba(255,255,255,.38); display:flex; align-items:baseline; gap:8px;
}
.toc-group .en{ letter-spacing:.08em; font-size:9.5px; }
.toc-rule{ height:1px; margin:6px 20px 2px; background:rgba(255,255,255,.07); }

.toc-foot{
  display:flex; flex-direction:column; gap:5px;
  padding:14px 20px 18px; border-top:1px solid rgba(255,255,255,.08);
  font-size:11.5px;
}
.toc-foot a{ color:rgba(255,255,255,.55); text-decoration:none; }
.toc-foot a:active{ color:#cfe1ff; }

/* ============ 第 2 页目录页上的实目录（覆盖原稿空白色块） ============ */
/* 原 PDF 中该色块位于页面 left 23.90% / top 36.91% / 宽 66.52% / 高 56.08% */
.toc-fill{
  position:absolute; left:23.90%; top:36.91%; width:66.52%; height:56.08%;
}
.toc-fill .list{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:7.5% 7%;
}
.tf-row{
  display:flex; align-items:baseline; gap:.5em;
  width:100%; border:0; background:transparent; color:#fff;
  font-family:inherit; text-align:left; padding:0; cursor:pointer;
  line-height:1.15;
}
.tf-row .zh{ font-size:calc(var(--sheetW) * .0258); font-weight:500; white-space:nowrap; }
.tf-row .en{ font-size:calc(var(--sheetW) * .0175); color:rgba(255,255,255,.62);
  letter-spacing:.02em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tf-row .no{ margin-left:auto; font-size:calc(var(--sheetW) * .0195);
  color:rgba(255,255,255,.66); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.tf-row.sub{ padding-left:1.15em; }
.tf-row.group{ cursor:default; }
.tf-row.group .zh{ color:#fff; letter-spacing:.08em; }
.tf-row.group::after{
  content:""; flex:1; height:1px; margin-left:.6em;
  background:rgba(255,255,255,.35); transform:translateY(-.25em);
}

/* ============ 其它 ============ */
.bars-hidden #topbar{ opacity:0; transform:translateY(-14px); pointer-events:none; }
.bars-hidden #bottombar{ opacity:0; transform:translateY(14px); }
.bars-hidden #pager button{ opacity:0; pointer-events:none; }

#hint{
  position:fixed; z-index:25; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 96px);
  transform:translateX(-50%);
  padding:9px 18px; border-radius:20px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  font-size:12.5px; letter-spacing:.06em; white-space:nowrap;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; transition:opacity .5s ease; pointer-events:none;
}
#hint.show{ opacity:1; animation:hintPulse 2s ease-in-out infinite; }
@keyframes hintPulse{
  0%,100%{ transform:translateX(-50%) translateX(-6px); }
  50%    { transform:translateX(-50%) translateX(6px); }
}

#loading{
  position:fixed; z-index:40; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:rgba(255,255,255,.6); font-size:13px; letter-spacing:.2em;
  transition:opacity .35s ease;
}
#loading.done{ opacity:0; pointer-events:none; }

@media (max-width:359px){
  .brand-en{ display:none; }
  .label{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  #hint.show{ animation:none; }
  *{ transition-duration:.01ms !important; }
}

/* ==========================================================================
   移动端点击区域修正（2026-11-01 手机端审计）
   审计发现：目录覆盖层的行高只有 11px、若干文字链接只有 14~16px，手机上点不准。
   这里用负边距扩大可点范围，视觉排版完全不变。
   ========================================================================== */

/* 目录覆盖层：每行填满自己的槽位，可点高度直接翻倍 */
.tf-row{ flex:1 1 0; min-height:0; align-items:center; }

/* 抽屉里的目录项：保证 42px 以上的可点高度 */
.toc-item{ min-height:42px; }

/* 文字链接：视觉不动，四周扩 8px 热区 */
.back, .link, .fol, .more, a.r{
  padding:8px; margin:-8px;
}

/* 底部/页脚链接 */
.foot a, .pagefoot a, .toc-foot a{ padding:6px; margin:-6px; }

/* 语言切换按钮 */
.langsw button{ min-height:30px; padding:5px 12px; }

@media (max-width:640px){
  .toc-fill .list{ padding:5% 6%; }
}

/* ==========================================================================
   语言：目录（覆盖层 + 抽屉）跟随 data-lang
   中文模式保留「中文 + 小号英文」的双语排版（与手册一致）；
   英文模式只显示英文，并把英文提升为主样式。
   ========================================================================== */
html[data-lang="en"] .tf-row .zh,
html[data-lang="en"] .toc-item .zh,
html[data-lang="en"] .toc-group .zh{ display:none; }

html[data-lang="en"] .tf-row .en,
html[data-lang="en"] .toc-item .en,
html[data-lang="en"] .toc-group .en{
  font-size:calc(var(--sheetW, 300px) * .0258);
  color:#fff; letter-spacing:0; font-weight:500;
}
html[data-lang="en"] .toc-item .en{ font-size:15px; }
html[data-lang="en"] .toc-group .en{ font-size:12px; letter-spacing:.12em; }
html[data-lang="en"] .tf-row .no{ margin-left:auto; }

/* 通用：按 data-lang 只显示对应语言（未标记的元素两种都显示） */
html[data-lang="cn"] [data-lang="en"]{ display:none !important; }
html[data-lang="en"] [data-lang="cn"]{ display:none !important; }