/* ================= 乐乐果园 · IP 展示板块 =================
   结构：标题 + 细线章节导航在**画面之外**（不压住素材里已有的文字），
        下面是一个宽幅舞台，四个章节横向切换。

   ⚠️ 上面这段"固定大舞台 / sticky / 轻吸附 / ?lele=flat 退回滚动"的描述是**旧做法**，
   2026-09-20 用户要求「不希望它是滚动跳到下面的，而是它们在一个板块里，横着的一个栏」，
   那整套（sticky 固定舞台、滚动判章、轻吸附、三档 grid 缩放系数）已经删掉，
   现在是：**.lele-viewport（裁切窗口）> .lele-track（横向轨道）> .lele-ch × 4**，
   靠顶部按钮 / 面板下方左右箭头 / 按住横向拖动切换，页面只占一屏多一点的滚动距离。
   留下来的只有两条：切章时的裁切揭示（clip-path，32px）和标题晚进 560ms。

   画面尺寸集中在下方 :root 的 --lele-stage-w / --lele-media-h / --lele-chrome-h 三个变量里。 */

:root{
  --lele-reveal:32px;                              /* 裁切揭示的位移量（要求 24–40px） */
  --lele-reveal-dur:620ms;
  --lele-title-delay:560ms;                        /* 标题进入的延迟（要求 500–700ms） */
  --lele-title-dur:620ms;
}

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

/* ---------- 上方：标题与章节导航 ---------- */
.lele-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,72px);
  align-items:end;
  margin-bottom:clamp(28px,4.5vh,56px);
}
.lele-kicker{
  margin:0 0 10px;
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:.24em;
  color:var(--accent);
}
.lele-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);
}
.lele-intro{
  margin:0;
  max-width:44ch;
  font-size:15px;
  line-height:1.9;
  color:var(--text-secondary);
}

/* 细线章节导航（桌面在右侧，窄屏落到标题下面） */
.lele-nav{display:flex;flex-wrap:wrap;gap:0 26px}
.lele-nav-item{
  position:relative;
  display:flex;
  gap:9px;
  align-items:baseline;
  padding:12px 0;
  border-top:1px solid var(--border);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--text-secondary);
  transition:color .3s;
}
.lele-nav-item i{font-style:normal;font-size:11px;letter-spacing:.1em;opacity:.75}
.lele-nav-item::after{
  content:'';
  position:absolute;
  left:0;top:-1px;
  width:100%;height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.lele-nav-item:hover{color:var(--text-primary)}
.lele-nav-item.is-active{color:var(--accent)}
.lele-nav-item.is-active::after{transform:scaleX(1)}

/* ---------- 舞台：占页面宽度 80–92% ---------- */
.lele-stage{width:var(--lele-stage-w);max-width:100%;margin:0 auto}

/* 章节头的基本样式（排布由上面的横向轨道那一段管，这里只管字） */
.lele-ch-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px 18px;
  margin-bottom:clamp(14px,2.2vh,26px);
}
.lele-ch-no{font-size:12px;letter-spacing:.18em;color:var(--accent)}
.lele-ch-title{
  margin:0;
  font-family:var(--font-display-cn,'Noto Serif SC',serif);
  font-weight:700;
  font-size:clamp(19px,1.75vw,27px);
  line-height:1.3;
  letter-spacing:-.01em;
  color:var(--text-primary);
}
.lele-ch-note{margin:0;font-size:13px;line-height:1.8;color:var(--text-secondary)}

/* ---------- 一个板块 + 横向切换（2026-09-20 用户要求重做）----------
   用户原话：「不希望它是滚动跳到下面的，而是它们在一个板块里，就是占用横着的一个栏」。
   所以原来的"四章竖着排、每章一屏、sticky 固定大舞台 + 轻吸附"整套做法全部去掉，
   改成：**四个章节并排在一个横向轨道里**，靠顶部那四个按钮（或底部左右箭头 / 横向拖动）
   切换，页面只占一屏高，不再产生 4 屏的滚动距离。

   结构：.lele-viewport（裁切窗口，固定高度）
         └ .lele-track（横向轨道，translateX 切换）
             └ .lele-ch × 4（每章宽 100%）

   ⚠️ 为什么用"固定高度 + overflow:hidden"而不是让内容自己撑高：
      横排之后每章只有 1/4 的横向空间可用来撑高度，四章高度还都不一样，
      轨道高度会取最高那个、其余章底部留一大片空白。固定高度最稳。

   ---------- 画面尺寸（2026-09-20 第三轮：用户要求"画面再大一点"）----------
   用户原话：「图片显示有红框那么大」「视频播放的大小也要变大，现在画面很小」。
   改之前实测：面板宽 1376，画面只有 852×479.5 —— 只占面板宽的 62%，
   两边各空出 262px 黑边，看起来就是"图很小、黑边很大"。

   现在改成**画面按宽度尽量撑满**，高度只在"一屏放不下"时才收：
     --lele-stage-w  舞台宽度（画面最多能有多宽）
     --lele-media-h  画面高度上限 = min(92vh, 舞台宽 ×9/16)
                     → 宽屏时是"高度上限"在管（画面≈整屏高），
                       窄屏时是"舞台宽度"在管（画面撑满左右）
     --lele-chrome-h 画面之外要预留的位置：章节头(约35) + 间距(约20) + 品牌翻页(约50) + 余量
     --lele-panel-h = 画面高 + chrome
   这样画面**永远整个放得进面板**（不会被 overflow:hidden 裁掉），
   而且改尺寸只需要动上面三个数，不用再去追散在各处的缩放系数。

   ⚠️ 画面撑满之后，"按住横向拖动切章"可用的空白只剩面板底部那一条
      （见 .lele-chrome-h 留出的余量）—— 验收脚本会检查这条还在。 */
:root{
  --lele-stage-w:min(92vw,1560px);
  --lele-media-h:min(92vh, calc(var(--lele-stage-w) * 9 / 16));
  --lele-chrome-h:124px;
  --lele-panel-h:calc(var(--lele-media-h) + var(--lele-chrome-h));
}

.lele-viewport{
  position:relative;
  overflow:hidden;
  height:var(--lele-panel-h);
  /* 九宫格按面板宽度缩放（cqw），所以这里必须是容器 */
  container-type:inline-size;
  /* 横向拖动手势用 pan-y：纵向滚动仍交给页面，不会和"按住左右拖"打架 */
  touch-action:pan-y;
}
.lele-track{
  display:flex;
  height:100%;
  /* 切章动画。拖动手势期间由 JS 临时关掉（见 lele.js 的 dragging） */
  transition:transform .55s var(--ease-out);
  will-change:transform;
}
.lele-track.is-dragging{transition:none}

.lele-ch{
  flex:0 0 100%;
  width:100%;
  height:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  /* 不在台上的章节不参与命中，也不进无障碍树 */
  visibility:hidden;
  pointer-events:none;
  opacity:0;
  transition:opacity .45s var(--ease-out);
}
.lele-ch.is-active{
  visibility:visible;
  pointer-events:auto;
  opacity:1;
}

/* 章节头（编号 + 标题 + 一行说明）：固定不缩，画面用剩下的空间 */
.lele-ch-head{
  flex:0 0 auto;
  /* 标题晚 560ms 进入：切到这一章时画面先揭开，标题随后淡入上移 */
  opacity:0;
  transform:translateY(10px);
  transition:opacity var(--lele-title-dur) var(--ease-out) var(--lele-title-delay),
             transform var(--lele-title-dur) var(--ease-out) var(--lele-title-delay);
}
.lele-ch.is-active .lele-ch-head{opacity:1;transform:none}

/* 画面：从"上边缘多让出 32px"的位置揭开。
   ⚠️ 用 .is-revealed 而不是 .is-active：is-revealed 由 JS 在切章时只加不摘，
   这样回头再看某一章不会重播动画（is-active 会被摘掉）。 */
.lele-ch.is-revealed .lele-video,
.lele-ch.is-revealed .lele-figure,
.lele-ch.is-revealed .lele-brand-nav,
.lele-ch.is-revealed .lele-versions{
  animation:lele-reveal var(--lele-reveal-dur) var(--ease-out) both;
}
/* 画面本体：撑满面板宽度，高度不超过 --lele-media-h（超了就收窄） */
.lele-ch .lele-video,
.lele-ch .lele-figure{
  flex:0 1 auto;
  min-height:0;
  max-height:var(--lele-media-h);
}
.lele-ch .lele-video{aspect-ratio:16 / 9}
/* 视频、表情整图、品牌图三者用**同一条宽度规则**，所以看上去一样大
   （2026-09-20 用户要求"视频播放尺寸大一点，和图片一样大"）。
   刻意不写 .lele-ch .lele-video 那一级：它特异度更高（0,2,0），
   会把设计板那条（0,3,0）在视频上盖掉，两者就不等大了。 */
.lele-ch[data-ch="expression"] .lele-figure,
.lele-ch[data-ch="brand"] .lele-figure,
.lele-ch[data-ch="motion"] .lele-video{
  margin-inline:auto;
  align-self:center;
  /* 宽度 = 面板宽的 100%，除非"高度上限"换算出来的宽度更小 */
  width:min(100%,calc(var(--lele-media-h) * 16 / 9));
}
.lele-ch[data-ch="design"] .lele-figure{
  margin-inline:auto;
  align-self:center;
  /* 设计板原图 1672×941，比 16:9 略窄，按它自己的比例换算 */
  width:min(100%,calc(var(--lele-media-h) * 1672 / 941));
}
@keyframes lele-reveal{
  from{clip-path:inset(var(--lele-reveal) 0 0 0)}
  to{clip-path:inset(0 0 0 0)}
}

/* ---------- 01 动态演绎 ---------- */
.lele-video{position:relative;background:#000;width:100%}
.lele-video video{
  display:block;
  width:100%;
  height:auto;
  max-height:inherit;
  object-fit:contain;   /* 两支视频比例不同，各自保持原比例，不拉伸 */
  background:#000;
}
.lele-ch .lele-video video{height:100%}
.lele-video-ui{
  position:absolute;
  left:0;right:0;bottom:0;
  display:flex;
  align-items:center;
  gap:22px;
  padding:34px 4px 6px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.45));
  opacity:0;
  pointer-events:none;
  transition:opacity .3s;
}
.lele-video:hover .lele-video-ui,
.lele-video:focus-within .lele-video-ui{opacity:1;pointer-events:auto}
.lele-vbtn{
  padding:7px 0;
  font-size:11px;
  letter-spacing:.16em;
  color:#CFCEC7;
  border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.lele-vbtn:hover{color:var(--accent);border-color:var(--accent)}
.lele-vbtn.is-on{color:var(--accent);border-color:var(--accent)}

.lele-versions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 16px;
  margin-top:14px;
  font-size:12px;
  letter-spacing:.14em;
  color:var(--text-secondary);
}
.lele-version{
  padding:6px 0;
  color:var(--text-secondary);
  border-bottom:1px solid transparent;
  transition:color .25s,border-color .25s;
}
.lele-version:hover{color:var(--text-primary)}
.lele-version.is-on{color:var(--accent);border-color:var(--accent)}
.lele-versions-sep{opacity:.4}

/* ---------- 02 / 03 / 04 整图展示（不裁边、不重排） ---------- */
.lele-figure{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:#000;
  cursor:pointer;
}
/* 图不能被浏览器"拖出去"（原生图片拖拽）。
   ⚠️ 这条是必需的，不是锦上添花：在画面上按住横向拖动切章时，
   原生拖拽会抢走指针、把 pointermove 变成 pointercancel，
   于是"在图上拖"会变成"拖到一半弹回"（验收脚本抓到过）。 */
.lele-figure img{-webkit-user-drag:none;user-select:none}
.lele-frame-media{position:relative;display:block;width:100%;background:#000}
.lele-frame-media[data-ratio="board"]{aspect-ratio:1672 / 941}
.lele-frame-media[data-ratio="wide"]{aspect-ratio:16 / 9}
.lele-frame-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;   /* 完整显示，不裁边 */
}

/* ---------- 03 表情延展 ----------
   2026-09-20 用户要求：不要按格拆开的那套（"现在没对齐，还不如不弄"），**就一张图**。
   所以 .lele-grid / .lele-cell 的全部样式（按格裁切、按格悬停抬起、单格放大视窗）
   连同脚本一起删掉了。表情延展现在走和"角色设定"完全一样的 .lele-figure 整图样式，
   只多一条宽度规则（见上面的 data-ch="expression"）。 */

/* ---------- 04 品牌应用：翻两页 ---------- */
.lele-brand-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  margin-top:16px;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--text-secondary);
}
.lele-brand-count b{color:var(--accent);font-weight:500}
.lele-arrow{
  width:34px;height:34px;
  display:grid;place-items:center;
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--text-secondary);
  font-size:14px;
  transition:color .25s,border-color .25s,background .25s;
}
.lele-arrow:hover{color:var(--black-main);background:var(--accent);border-color:var(--accent)}

/* ---------- 面板下方的章节切换（← 01/04 →） ----------
   ⚠️ 这三条样式以前**根本不存在**：.lele-pager 是裸的 div，
   而 .lele-arrow 是 display:grid（块级），于是两个箭头各占一行、
   实测整块高 88px、还挤在页面左下角（2026-09-20 用户截图里能看到）。
   现在按品牌翻页那条的写法补上，两个箭头和计数在一行、靠右。 */
.lele-pager{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  margin-top:16px;
  font-size:12px;
  letter-spacing:.16em;
  color:var(--text-secondary);
}
.lele-pager-count b{color:var(--accent);font-weight:500}

/* ---------- 大图查看（整图 / 单格裁切共用） ---------- */
/* z-index 要低于自定义光标（.custom-cursor 是 95），否则指针会被盖住，
   出现"看得见的指针位置 ≠ 实际点击位置"的问题。 */
.lele-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);
}
.lele-lightbox.is-open{display:flex}
.lele-lightbox-view{max-width:100%;max-height:100%;display:flex;align-items:center;justify-content:center}
.lele-lightbox-view img{
  max-width:100%;
  max-height:100%;
  width:auto;height:auto;
  object-fit:contain;
}
/* 单格裁切（.lele-lightbox-view.is-crop）的样式已随九宫格按格展示一起删除：
   2026-09-20 用户要求表情延展只放一张图，不再按格放大。
   大图查看现在只有"整图放大"一种形态（.lele-lightbox-view 本身）。 */
.lele-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;
}
.lele-lightbox-close:hover{color:var(--accent);border-color:var(--accent)}
.lele-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);
}

/* ---------- 窄屏 ----------
   2026-09-20 起不再"退回普通滚动"：四章并排 + 按钮切换在窄屏同样成立
   （用户要的是"一个板块横着切"，不是"竖着滚到底"）。只收紧尺寸。 */
@media (max-width:900px){
   .lele-head{grid-template-columns:1fr;align-items:start}
   .lele-nav{order:2}
   .lele-stage{width:100%}
   /* 窄屏下章节头那行字会折成两三行，画面之外要多留位置；
      画面本身不用管：舞台窄了，--lele-media-h 会自动跟着变小 */
   :root{--lele-chrome-h:190px}
 }
@media (prefers-reduced-motion:reduce){
  .lele-track{transition:none}
  .lele-ch{transition:none}
  .lele-ch-head{opacity:1;transform:none;transition:none}
  .lele-ch.is-revealed .lele-video,
  .lele-ch.is-revealed .lele-figure,
  .lele-ch.is-revealed .lele-brand-nav,
  .lele-ch.is-revealed .lele-versions{animation:none}
}