/* ================= 犟老头 STUBBORN OLD MAN · IP 展示板块 =================
   ⚠️ 2026-09-22 改版（用户要求）：原来照乐乐果园做的"一个板块里横向切换 + 章节说明文字"
   整套删掉了。用户原话："不要用板块内还需要横板切换这种，浏览起来很不方便，
   就正常往下滚，然后查看图片和视频，不用过多阐述这是表情演绎什么的，图片上都有标。"

   所以这里**没有** viewport / track / 章节头 / 翻页箭头 / 分页条，
   只有：标题 + 一条竖着排的媒体流（.jlt-flow > .jlt-item）。

   版面规则只有一条：**每张媒体按可用宽度铺满，但高度不超过一屏的 92%**。
   素材里自带标题和说明，页面这边一个字都不加，所以不需要给文字预留位置。
   这样竖着滚下来每屏正好是一张完整的图（或一支视频），不会被切成两半。 */

.jlt-section{
  position:relative;
  padding:clamp(56px,7vh,104px) var(--gutter);
  background:var(--black-absolute);
  border-bottom:1px solid var(--border);
  z-index:5;
}
.jlt-inner{max-width:1560px;margin:0 auto}

/* ---------- 标题（只有板块名，没有章节导航） ---------- */
.jlt-head{margin-bottom:clamp(28px,4.5vh,56px)}
.jlt-kicker{
  margin:0 0 10px;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--accent);
}
.jlt-name{
  margin:0 0 12px;
  font-family:var(--font-display-cn,'Noto Serif SC',serif);
  font-weight:700;
  font-size:clamp(28px,3vw,46px);
  line-height:1.16;
  letter-spacing:-.02em;
  color:var(--text-primary);
}
.jlt-intro{
  margin:0;
  max-width:44ch;
  font-size:15px;
  line-height:1.9;
  color:var(--text-secondary);
}

/* ---------- 竖着的媒体流 ----------
   一条流，每项占一行、居中。
   间距分两级：**件与件之间隔着分隔线**（这是大分组），分隔线两侧用小间距，
   这样序号一眼能看出属于"两条缝之间"的那一段，而不是贴着下一张图。 */
.jlt-flow{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px,2.2vh,26px);
}
.jlt-item{margin:0;width:100%;display:flex;justify-content:center}

/* ---------- 滚动入场：轻微放大 + 上移 ----------
   ⚠️ 这里**故意不用 clip-path / filter**：它们会让这一项变成"固定定位元素的包含块"，
      而大图查看（.jlt-lightbox，position:fixed）就挂在这一项里面 ——
      加了就会被裁在这一项的框里，全屏黑底直接失效。
      transform **不会**产生这个副作用（而且 .is-in 之后 transform 就是 none），所以用缩放+位移。
   ⚠️ 动效也只能挂在这一项**自己**身上：写在后代（img / .jlt-video）上的 transform
      会另起包含块，外面那些 max-height:92vh 就不管用了，图会按原始尺寸铺开。 */
.jlt-item{
  opacity:0;
  transform:scale(.985) translateY(18px);
  transform-origin:center center;
  transition:opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.jlt-item.is-in{
  opacity:1;
  transform:none;
}

/* 图与视频共用同一套尺寸规则：
   宽度 = 内容宽（跟着图自己的比例走），上限 100%；
   高度上限 92vh —— 高过一屏的素材会被按高度收窄，滚动时不会一张图占满好几屏。
   ⚠️ 不要在这里写死 aspect-ratio 或固定高度：写死了 16:9 的框套在
      1672×941（≈1.777:1）的图上会多出黑边，图本身是完整的。 */
.jlt-figure,
.jlt-video{
  display:block;
  width:auto;
  max-width:100%;
  padding:0;
  border:0;
  background:#000;
}
.jlt-figure{cursor:pointer}
.jlt-item-image .jlt-figure{max-height:92vh}

/* ---------- 鼠标划过画面：轻微抬起 + 提亮边框 ----------
   ⚠️ 变换只加在 .jlt-figure 上（它没有 max-height 的换算任务），
      而且不能加到 .jlt-item 上 —— 那会把上面那层揭开动效的 transform 顶掉。 */
.jlt-figure,
.jlt-video{
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
@media (hover:hover){
  .jlt-figure:hover,
  .jlt-video:hover{
    transform:scale(1.012);
    box-shadow:0 0 0 1px rgba(217,223,114,.45), 0 18px 50px rgba(0,0,0,.45);
  }
}
/* 键盘走到画面时也要看得见"焦点在哪"（.jlt-figure 是按钮） */
.jlt-figure:focus-visible{
  outline:1px solid var(--accent);
  outline-offset:6px;
}

.jlt-figure img,
.jlt-video video{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:92vh;   /* 高度上限和上面的 max-height 一起管，图永远不会比一屏还高太多 */
}

/* 图不能被浏览器"拖出去"（原生图片拖拽）：拖出去会把页面滚动手感搞坏。 */
.jlt-figure img{-webkit-user-drag:none;user-select:none}

/* ---------- 件与件之间的细分隔线（中间一枚序号） ----------
   ⚠️ 它**不参与**揭开动效：只画静态细线，让它一直稳稳地在两条薄缝里，
      跟着图一起闪反而显得乱。 */
.jlt-divider{
  display:flex;
  align-items:center;
  gap:clamp(12px,2vw,22px);
  width:100%;
  /* 分隔线两侧留出比流间距更大的空，序号才像"这一段的分隔"，而不是贴着下一张图 */
  margin-block:clamp(12px,2vh,24px);
  color:var(--text-secondary);
}
.jlt-divider-line{flex:1;height:1px;background:var(--border)}
.jlt-divider-no{
  flex:0 0 auto;
  font-size:11px;
  letter-spacing:.22em;
  font-variant-numeric:tabular-nums;
}
.jlt-divider-no i{font-style:normal;opacity:.45;margin:0 .25em}

/* ---------- 右下角进度角标 ----------
   固定定位、不占版面，所以不影响"一屏一件"的节奏。
   只在滚到这一块时淡入（.is-live 由脚本按"这一块在不在视口里"挂上）。 */
.jlt-hud{
  position:fixed;
  right:var(--gutter);
  bottom:clamp(18px,4vh,40px);
  z-index:60;                     /* 低于自定义光标 95、低于大图查看 90 */
  margin:0;
  font-size:11px;
  letter-spacing:.24em;
  color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.jlt-section.is-live .jlt-hud{opacity:1;transform:none}
.jlt-hud b{color:var(--accent);font-weight:500}
.jlt-hud i{font-style:normal;opacity:.45;margin:0 .3em}

/* ---------- 视频控件 ----------
   "声音"按钮**一直可见**：视频默认静音，用户得看得见"声音 关"才知道可以打开。
   "暂停 / 重播"平时淡出，鼠标移入画面或键盘聚焦时出现，不挡画面。 */
.jlt-video{position:relative;max-height:92vh}
.jlt-video-ui{
  position:absolute;
  left:0;right:0;bottom:0;
  display:flex;
  align-items:center;
  gap:22px;
  padding:34px 12px 10px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.5));
}
.jlt-video [data-play],
.jlt-video [data-replay]{
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
.jlt-video:hover [data-play],
.jlt-video:hover [data-replay],
.jlt-video:focus-within [data-play],
.jlt-video:focus-within [data-replay]{opacity:1;pointer-events:auto}

.jlt-vbtn{
  padding:7px 0;
  font-size:11px;
  letter-spacing:.16em;
  color:#CFCEC7;
  border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.jlt-vbtn:hover{color:var(--accent);border-color:var(--accent)}
.jlt-vbtn.is-on{color:var(--accent);border-color:var(--accent)}

/* ---------- 大图查看 ---------- */
/* z-index 要低于自定义光标（.custom-cursor 是 95），否则指针会被盖住，
   出现"看得见的指针位置 ≠ 实际点击位置"的问题。 */
.jlt-lightbox{
  position:fixed;
  inset:0;
  z-index:90;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(24px,5vh,64px) clamp(24px,5vw,88px);
  background:rgba(5,5,6,.95);
}
.jlt-lightbox.is-open{display:flex}
.jlt-lightbox-view{max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.jlt-lightbox-view img{
  max-width:100%;
  max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
}
.jlt-lightbox-close{
  position:absolute;
  top:clamp(14px,3vh,34px);
  right:clamp(18px,3vw,48px);
  padding:10px 0;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--text-secondary);
  border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.jlt-lightbox-close:hover{color:var(--accent);border-color:var(--accent)}
.jlt-lightbox-cap{
  position:absolute;
  left:clamp(18px,3vw,48px);
  bottom:clamp(16px,3vh,36px);
  margin:0;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--text-secondary);
}

/* ---------- 窄屏 ----------
   竖着滚的版面在窄屏天然成立，只把间距和字号收一收。
   手机上一张图往往比一屏还高（比例决定的），所以高度上限放宽到 78vh 以内更耐看。 */
@media (max-width:900px){
  .jlt-flow{gap:clamp(22px,4vh,40px)}
  .jlt-figure img,
  .jlt-video video{max-height:78vh}
  .jlt-item-image .jlt-figure{max-height:78vh}
  .jlt-video{max-height:78vh}
  /* 窄屏别做缩放揭示：手机上这点位移容易看出抖动，只留淡入 */
  .jlt-item{transform:translateY(12px)}
}

/* ---------- 用户关了动效就别动 ----------
   系统里开了"减少动态效果"时：所有揭示、抬起、角标位移全部关掉，直接就是最终状态。 */
@media (prefers-reduced-motion:reduce){
  .jlt-item,
  .jlt-item.is-in{opacity:1;transform:none;transition:none}
  .jlt-figure,
  .jlt-video{transition:none}
  .jlt-figure:hover,
  .jlt-video:hover{transform:none;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
  .jlt-hud{transition:none;transform:none}
  .jlt-section.is-live .jlt-hud{transform:none}
}