From 127f349fb2557636e2d36d190221bce6828f0836 Mon Sep 17 00:00:00 2001
From: wait4xx <X@alumni.nudt.edu.cn>
Date: Sun, 1 Nov 2026 13:21:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(gallery):=20=E7=81=AF=E7=AE=B1=20v2.1=20?=
 =?UTF-8?q?=E5=8D=81=E9=A1=B9=E5=85=A8=E9=87=8F=E2=80=94=E2=80=94=E8=B5=B7?=
 =?UTF-8?q?=E9=A3=9E=E5=BC=80=E5=90=88/=E9=9A=90=E5=B1=82/=E4=BE=A7?=
 =?UTF-8?q?=E7=BD=AE=20meta/HD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

①FLIP 原位起飞/回落（克隆双态矩形插值，关闭回落取缩略图实时
矩形）②背景点击关（containRect 几何判定——img 盒铺满 figure 的
元素链判定失效坑）③chrome 双层淡入+i 键/zoom 自动隐（换片重置）
④相邻预载 ⑤双指缩放 ⑥换片侧向过渡 ⑦缩放指示+首开提示 ⑧竖
图侧置 meta ⑨>1.5x HD 原图交换+404 兜底 ⑩竖拖关闭。reduced-
motion 全豁免；钳制数学保留。

验收三连修：chrome-in 动画 both 填充锁死 opacity（animation:none
掐填充——动画填充压制普通声明的级联陷阱）；× 钮独立于双层
chrome 补隐（全隐口径=只剩图，Esc/i 逃逸）；视觉终审四问修复
后全过（起飞连贯/侧置成立/隐层纯净/亮暗同判）。

车道：op-artalk（专项逐项+E2E 34/34）；收编验收+视觉终审双绿

验证: E2E 34/34；三态隐层 computed 实测（i 隐/复原/zoom 隐全
过）；全隐残留零（×/caption/箭头）；Esc 逃逸 ✓

Spec: none (灯箱 v2.1 定版，车道级交付)

Co-authored-by: GLM-5.3
---
 src/components/pages/GalleryPage.astro | 423 ++++++++++++++++++++++---
 src/i18n/ui.ts                         |   1 +
 2 files changed, 378 insertions(+), 46 deletions(-)

diff --git a/src/components/pages/GalleryPage.astro b/src/components/pages/GalleryPage.astro
index a4c0f1c..16b3c4c 100644
--- a/src/components/pages/GalleryPage.astro
+++ b/src/components/pages/GalleryPage.astro
@@ -119,7 +119,10 @@ const first = cards[0];
   </div>
 
   <dialog id="lb" aria-label={t('gallery_lightbox_label', locale)}>
-    <button id="lb-close" class="tap lbnav" type="button" aria-label={t('gallery_lightbox_close', locale)}>
+    <span id="lb-count" class="lb-count lb-l1">1 / {cards.length}</span>
+    <p id="lb-hint" class="lb-hint lb-l1" hidden>{t('lb_hint', locale)}</p>
+    <span id="lb-zoombadge" class="lb-zoombadge" aria-hidden="true"></span>
+    <button id="lb-close" class="tap lbnav lb-l1" type="button" aria-label={t('gallery_lightbox_close', locale)}>
       <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
         <path d="m5 5 14 14M19 5 5 19"></path>
       </svg>
@@ -128,16 +131,15 @@ const first = cards[0];
       <img id="lb-img" src={first?.fullSrc} alt={first?.alt ?? ''} />
     </div>
     <div class="lb-bottom">
-      <button id="lb-prev" class="tap lbnav" type="button" aria-label={t('gallery_lightbox_prev', locale)}>
+      <button id="lb-prev" class="tap lbnav lb-l1" type="button" aria-label={t('gallery_lightbox_prev', locale)}>
         <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
           <path d="m14.5 5.5-6.5 6.5 6.5 6.5"></path>
         </svg>
       </button>
-      <div class="lb-meta">
+      <div class="lb-meta lb-l2">
         <p id="lb-caption" class="lb-caption">{first?.caption ?? ''}</p>
         <div class="lb-row">
           <strong id="lb-title">{first?.title}</strong>
-          <span id="lb-count">1 / {cards.length}</span>
           <span id="lb-exif" class="lb-exif">{first?.exif}</span>
           <span class="lb-orig">
           <a id="lb-original" class="lb-act" href={first?.original} target="_blank" rel="noopener">
@@ -151,7 +153,7 @@ const first = cards[0];
         </span>
         </div>
       </div>
-      <button id="lb-next" class="tap lbnav" type="button" aria-label={t('gallery_lightbox_next', locale)}>
+      <button id="lb-next" class="tap lbnav lb-l1" type="button" aria-label={t('gallery_lightbox_next', locale)}>
         <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
           <path d="m9.5 5.5 6.5 6.5-6.5 6.5"></path>
         </svg>
@@ -161,34 +163,39 @@ const first = cards[0];
 </BaseLayout>
 
 <script>
-  // 灯箱：原生 dialog，←→ 切换、Esc 原生关闭；触屏快滑翻页是键盘的等价物。
-  // ClientRouter 下模块脚本只执行一次，接线挂在 astro:page-load 按当前 DOM 重装
+  // 灯箱 v2.1：原生 dialog + FLIP 起飞 + 滚轮锚点缩放 + 双指 + chrome 召唤 + HD 交换。
+  // 缩放引擎（applyZoom 钳制/zoomAt 锚点）为 44626f8 定稿数学，v2.1 全部叠加不动其核心。
+  // ClientRouter 下模块脚本只执行一次，接线挂在 astro:page-load 按当前 DOM 重装。
   document.addEventListener('astro:page-load', () => {
     const lb = document.getElementById('lb') as HTMLDialogElement | null;
     const shots = [...document.querySelectorAll<HTMLButtonElement>('.shot-btn')];
     if (!lb || shots.length === 0) return;
 
     const img = document.getElementById('lb-img') as HTMLImageElement;
+    const fig = lb.querySelector('.lb-figure') as HTMLElement | null;
     const titleEl = document.getElementById('lb-title') as HTMLElement;
     const exifEl = document.getElementById('lb-exif') as HTMLElement;
     const captionEl = document.getElementById('lb-caption') as HTMLElement | null;
+    const badge = document.getElementById('lb-zoombadge');
+    const hintEl = document.getElementById('lb-hint');
     const reduced = matchMedia('(prefers-reduced-motion: reduce)');
     let idx = 0;
 
-    // ── v2 缩放态：滚轮光标锚点缩放（0.5x–5x）+ 放大后拖拽平移 + 双击 1x↔2.5x ──
+    // ── 缩放引擎（v2 定稿，钳制数学不得回退） ──
     const zoom = { s: 1, tx: 0, ty: 0 };
     const applyZoom = () => {
-      // 平移钳制：缩放后的图盒不得超出舞台（|t| ≤ 尺寸差/2）——拖飞与回 1x 偏移残留同治
       const mx = Math.max(0, (img.clientWidth * (zoom.s - 1)) / 2);
       const my = Math.max(0, (img.clientHeight * (zoom.s - 1)) / 2);
       zoom.tx = Math.min(mx, Math.max(-mx, zoom.tx));
       zoom.ty = Math.min(my, Math.max(-my, zoom.ty));
       img.style.transform = zoom.s === 1 ? 'none' : `translate(${zoom.tx}px, ${zoom.ty}px) scale(${zoom.s})`;
       img.classList.toggle('zoomed', zoom.s !== 1);
+      applyChrome(zoom.s > 1); // ③ zoom 驱动 chrome 自动隐
+      scheduleBadge();
+      applyHD();
     };
     const resetZoom = () => { zoom.s = 1; zoom.tx = 0; zoom.ty = 0; applyZoom(); };
     const zoomAt = (next: number, cx: number, cy: number) => {
-      // 光标为不动点：先求图面上锚点，再按新 scale 反算平移量
       const rect = img.getBoundingClientRect();
       const ax = cx - rect.left - rect.width / 2 - zoom.tx;
       const ay = cy - rect.top - rect.height / 2 - zoom.ty;
@@ -200,41 +207,250 @@ const first = cards[0];
     };
     lb.addEventListener('wheel', (e) => {
       if (!lb.open) return;
-      e.preventDefault(); // 滚轮在灯箱内一律缩放：含 Ctrl+滚轮（劫持页面缩放的预期在灯箱内成立）
+      e.preventDefault();
       const factor = Math.exp(-e.deltaY * 0.0015);
-      const next = Math.min(5, Math.max(1, zoom.s * factor)); // 下限 1：fit-contain 即最小（0.5x 制造偏移态）
+      const next = Math.min(5, Math.max(1, zoom.s * factor));
       if (next === zoom.s) return;
       zoomAt(next, e.clientX, e.clientY);
     }, { passive: false });
-    // 拖拽平移：仅放大态（=1 时不抢点击/翻页）；pointer capture 全程跟随
+
+    // ── ③ chrome 双层：i 键召唤 + zoom 自动隐（回 1x 淡回用户偏好态） ──
+    let userHideChrome = false;
+    function applyChrome(autoHide: boolean) {
+      lb.classList.toggle('chrome-off', userHideChrome || autoHide);
+    }
+    lb.addEventListener('keydown', (e) => {
+      if (e.key === 'i' || e.key === 'I') {
+        e.preventDefault();
+        userHideChrome = !userHideChrome;
+        applyChrome(zoom.s > 1);
+      } else if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        show(idx - 1);
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        show(idx + 1);
+      }
+    });
+
+    // ── ⑦ 缩放指示：停稳 400ms 后亮 900ms 淡出 ──
+    let badgeTimer: number | undefined;
+    function scheduleBadge() {
+      if (!badge) return;
+      badge.textContent = `${Math.round(zoom.s * 100)}%`;
+      clearTimeout(badgeTimer);
+      if (zoom.s === 1) { badge.classList.remove('on'); return; }
+      badgeTimer = window.setTimeout(() => {
+        badge.classList.add('on');
+        badgeTimer = window.setTimeout(() => badge?.classList.remove('on'), 900);
+      }, 400);
+    }
+
+    // ── ① FLIP 起飞/回落：克隆 cover 双态矩形插值（PS data-cropped 路线） ──
+    const containRect = () => {
+      const f = fig!.getBoundingClientRect();
+      const iw = img.naturalWidth || 1, ih = img.naturalHeight || 1;
+      const k = Math.min(f.width / iw, f.height / ih);
+      const w = iw * k, h = ih * k;
+      return { left: f.left + (f.width - w) / 2, top: f.top + (f.height - h) / 2, width: w, height: h };
+    };
+    const setBox = (el: HTMLElement, r: { left: number; top: number; width: number; height: number }) => {
+      el.style.left = `${r.left}px`; el.style.top = `${r.top}px`;
+      el.style.width = `${r.width}px`; el.style.height = `${r.height}px`;
+    };
+    function flyFrom(from: DOMRect) {
+      if (reduced.matches || !fig) return;
+      const c = containRect();
+      const cl = document.createElement('img');
+      cl.className = 'lb-flip-img';
+      cl.src = img.src;
+      cl.alt = '';
+      setBox(cl, from);
+      lb.appendChild(cl);
+      requestAnimationFrame(() => requestAnimationFrame(() => setBox(cl, c)));
+      setTimeout(() => cl.remove(), 340);
+    }
+    function flyBack() {
+      if (reduced.matches) return;
+      const thumb = shots[idx]?.querySelector('img');
+      if (!thumb) return;
+      const c = containRect();
+      const cl = document.createElement('img');
+      cl.className = 'lb-flip-back';
+      cl.src = img.src;
+      cl.alt = '';
+      setBox(cl, c);
+      document.body.appendChild(cl);
+      requestAnimationFrame(() => requestAnimationFrame(() => setBox(cl, thumb.getBoundingClientRect())));
+      setTimeout(() => cl.remove(), 340);
+    }
+
+    // ── ② 背景点击关闭：contain 布局下 img 元素盒铺满 figure，视觉空白也在 img 上——
+    //     背景判定不能看 e.target，须按 contain 内容盒几何（盒外=关，盒内 8px 容差=图区）
+    let justDragged = false;
+    lb.addEventListener('click', (e) => {
+      if (!lb.open) return;
+      const t = e.target as Element;
+      if (t.closest('button, a, .lb-l2, .lb-hint')) return;
+      if (justDragged) { justDragged = false; return; }
+      const c = containRect();
+      const inside =
+        e.clientX >= c.left - 8 && e.clientX <= c.left + c.width + 8 &&
+        e.clientY >= c.top - 8 && e.clientY <= c.top + c.height + 8;
+      if (!inside) lb.close();
+    });
+
+    // ── ⑤ 双指缩放 + ⑩ 竖拖关闭（pointer 统一；单指拖拽 v2 保持） ──
+    const pts = new Map<number, { x: number; y: number }>();
+    let pinch: { d: number; s: number } | null = null;
+    let tap: { x: number; y: number; closed: boolean } | null = null;
     let drag: { x: number; y: number; tx: number; ty: number; moved: boolean } | null = null;
     img.addEventListener('pointerdown', (e) => {
-      if (zoom.s <= 1) return;
-      e.preventDefault();
-      img.setPointerCapture(e.pointerId);
-      drag = { x: e.clientX, y: e.clientY, tx: zoom.tx, ty: zoom.ty, moved: false };
-      img.classList.add('grabbing');
+      pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      if (pts.size === 2) {
+        drag = null;
+        img.classList.remove('grabbing');
+        const [a, b] = [...pts.values()];
+        pinch = { d: Math.hypot(a!.x - b!.x, a!.y - b!.y), s: zoom.s };
+        return;
+      }
+      if (pts.size === 1) tap = { x: e.clientX, y: e.clientY, closed: false };
+      if (zoom.s > 1) {
+        e.preventDefault();
+        img.setPointerCapture(e.pointerId);
+        drag = { x: e.clientX, y: e.clientY, tx: zoom.tx, ty: zoom.ty, moved: false };
+        img.classList.add('grabbing');
+      }
     });
     img.addEventListener('pointermove', (e) => {
-      if (!drag) return;
-      const dx = e.clientX - drag.x, dy = e.clientY - drag.y;
-      if (Math.abs(dx) + Math.abs(dy) > 3) drag.moved = true;
-      zoom.tx = drag.tx + dx;
-      zoom.ty = drag.ty + dy;
-      applyZoom();
+      if (!pts.has(e.pointerId)) return;
+      pts.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      if (pinch && pts.size === 2) {
+        const [a, b] = [...pts.values()];
+        const d = Math.hypot(a!.x - b!.x, a!.y - b!.y);
+        const mid = { x: (a!.x + b!.x) / 2, y: (a!.y + b!.y) / 2 };
+        const next = Math.min(5, Math.max(1, pinch.s * (d / pinch.d)));
+        if (next !== zoom.s) zoomAt(next, mid.x, mid.y);
+        return;
+      }
+      if (drag) {
+        const dx = e.clientX - drag.x, dy = e.clientY - drag.y;
+        if (Math.abs(dx) + Math.abs(dy) > 3) drag.moved = true;
+        zoom.tx = drag.tx + dx;
+        zoom.ty = drag.ty + dy;
+        applyZoom();
+        return;
+      }
+      // ⑩ zoom=1 竖向拖 >80px 且竖向主导 → 关闭回落
+      if (tap && !tap.closed && zoom.s === 1) {
+        const dy = e.clientY - tap.y, dx = e.clientX - tap.x;
+        if (Math.abs(dy) > 80 && Math.abs(dy) > Math.abs(dx) * 1.2) {
+          tap.closed = true;
+          lb.close();
+        }
+      }
     });
-    const endDrag = () => { drag = null; img.classList.remove('grabbing'); };
-    img.addEventListener('pointerup', endDrag);
-    img.addEventListener('pointercancel', endDrag);
+    const endPointer = (e: PointerEvent) => {
+      pts.delete(e.pointerId);
+      if (pts.size < 2) pinch = null;
+      if (drag?.moved) justDragged = true;
+      drag = null;
+      tap = null;
+      img.classList.remove('grabbing');
+      if (justDragged) setTimeout(() => (justDragged = false), 120);
+    };
+    img.addEventListener('pointerup', endPointer);
+    img.addEventListener('pointercancel', endPointer);
     img.addEventListener('dblclick', (e) => {
       if (zoom.s === 1) zoomAt(2.5, e.clientX, e.clientY);
       else resetZoom();
     });
 
+    // ── ⑨ HD 交换：>1.5x 懒换原图（decode 后无闪白），回落 1.5x 以下回 1440 ──
+    let hd = { on: false, failed: false, gen: 0 };
+    function applyHD() {
+      const btn = shots[idx];
+      if (!btn) return;
+      const full = btn.dataset.full ?? '';
+      const orig = btn.dataset.original ?? '';
+      if (zoom.s > 1.5 && !hd.on && !hd.failed && orig) {
+        const gen = hd.gen;
+        const probe = new Image();
+        probe.src = orig;
+        probe.decode?.().then(() => {
+          if (hd.gen === gen && zoom.s > 1.5 && !hd.on) { img.src = orig; hd.on = true; }
+        }).catch(() => { hd.failed = true; }); // 404/解码失败：留 1440 兜底
+      } else if (zoom.s <= 1.5 && hd.on) {
+        img.src = full;
+        hd.on = false;
+      }
+    }
+
+    // ── ⑧ 长图侧置 meta：竖图(ratio<0.9)且视口≥820 ──
+    function applySideMeta() {
+      const btn = shots[idx];
+      if (!btn) return;
+      const w = Number(btn.dataset.w) || 1, h = Number(btn.dataset.h) || 1;
+      lb.classList.toggle('side-meta', w / h < 0.9 && innerWidth >= 820);
+    }
+    addEventListener('resize', () => lb.open && applySideMeta(), { passive: true });
+
+    // ── ④ 相邻预载（克制档 ±1，idle 后） ──
+    const idle: (f: () => void) => void =
+      'requestIdleCallback' in window
+        ? (f) => requestIdleCallback(f)
+        : (f) => setTimeout(f, 200);
+    function preloadNeighbors() {
+      idle(() => {
+        for (const j of [idx + 1, idx - 1]) {
+          const b = shots[(j + shots.length) % shots.length];
+          if (b?.dataset.full) { const pre = new Image(); pre.src = b.dataset.full; }
+        }
+      });
+    }
+
+    // ── ⑦ 首开提示：每会话一次，2.6s 自隐 ──
+    let hintShown = false;
+    function maybeHint() {
+      if (hintShown || !hintEl || sessionStorage.getItem('lb-hint') === '1') return;
+      hintShown = true;
+      sessionStorage.setItem('lb-hint', '1');
+      hintEl.hidden = false;
+      setTimeout(() => { hintEl!.hidden = true; }, 2600);
+    }
+
+    // ── ⑥ 换片过渡：旧图 140ms 淡出 → 新图 decode 后侧向 10% 位移淡入 ──
+    let lastIdx = 0;
+    async function transitionSwap(btn: HTMLButtonElement, dir: 1 | -1) {
+      const next = btn.dataset.full ?? '';
+      if (reduced.matches) { img.src = next; return; }
+      img.style.opacity = '0'; // 旧图淡出（transition 160ms 已有）
+      await new Promise<void>((done) => {
+        const probe = new Image();
+        probe.src = next;
+        probe.decode ? probe.decode().then(() => done()).catch(() => done()) : (probe.onload = () => done());
+        setTimeout(done, 1200); // 网络兜底
+      });
+      img.src = next;
+      img.classList.add('slide-in');
+      img.style.transform = `translateX(${dir * 10}%)`;
+      img.style.opacity = '0';
+      void img.offsetWidth; // 强制 reflow 再进终态
+      requestAnimationFrame(() => {
+        img.style.transform = 'none';
+        img.style.opacity = '1';
+      });
+      setTimeout(() => img.classList.remove('slide-in'), 320);
+    }
+
     const show = (i: number) => {
-      idx = (i + shots.length) % shots.length;
+      const n = shots.length;
+      const prevIdx = idx;
+      idx = (i + n) % n;
       const btn = shots[idx]!;
-      img.src = btn.dataset.full ?? '';
+      const firstOpen = !lb.open;
+      const dir: 1 | -1 = ((idx - prevIdx + n) % n === 1 ? 1 : -1);
+      hd = { on: false, failed: false, gen: hd.gen + 1 }; // ⑨ 换图重置 HD 态
       img.alt = btn.ariaLabel ?? '';
       const title = btn.dataset.title ?? '';
       titleEl.textContent = title;
@@ -243,39 +459,44 @@ const first = cards[0];
         captionEl.textContent = btn.dataset.caption ?? '';
         captionEl.style.display = captionEl.textContent ? '' : 'none';
       }
-      resetZoom(); // 换图回正：缩放态不跨图残留
       exifEl.textContent = btn.dataset.exif ?? '';
       exifEl.style.display = btn.dataset.exif ? '' : 'none';
       const countEl = document.getElementById('lb-count');
-      if (countEl) countEl.textContent = `${idx + 1} / ${shots.length}`;
+      if (countEl) countEl.textContent = `${idx + 1} / ${n}`;
       const orig = btn.dataset.original ?? '';
       (document.getElementById('lb-original') as HTMLAnchorElement).href = orig;
       const dl = document.getElementById('lb-download') as HTMLAnchorElement;
       dl.href = orig;
       dl.setAttribute('download', btn.dataset.title ?? 'photo');
-      if (!reduced.matches) {
-        img.style.opacity = '0';
-        requestAnimationFrame(() => {
-          img.style.opacity = '1';
-        });
+      resetZoom();
+      applySideMeta();
+      if (firstOpen) {
+        // ① 起飞：先摆 contain 真身再克隆从缩略图矩形起飞盖过渡
+        img.src = btn.dataset.full ?? '';
+        lb.classList.remove('chrome-in', 'chrome-off');
+        lb.showModal();
+        requestAnimationFrame(() => lb.classList.add('chrome-in'));
+        const thumb = btn.querySelector('img');
+        if (thumb) flyFrom(thumb.getBoundingClientRect());
+        maybeHint();
+      } else {
+        void transitionSwap(btn, dir); // ⑥ 换片过渡
       }
-      if (!lb.open) lb.showModal();
+      lastIdx = idx;
+      preloadNeighbors();
+      userHideChrome = false; // 换片重置召唤偏好（新图默认亮 chrome）
     };
 
     shots.forEach((btn, i) => btn.addEventListener('click', () => show(i)));
     document.getElementById('lb-prev')?.addEventListener('click', () => show(idx - 1));
     document.getElementById('lb-next')?.addEventListener('click', () => show(idx + 1));
     document.getElementById('lb-close')?.addEventListener('click', () => lb.close());
-    lb.addEventListener('close', resetZoom);
-    lb.addEventListener('keydown', (e) => {
-      if (e.key === 'ArrowLeft') {
-        e.preventDefault();
-        show(idx - 1);
-      } else if (e.key === 'ArrowRight') {
-        e.preventDefault();
-        show(idx + 1);
-      }
+    lb.addEventListener('close', () => {
+      flyBack(); // ① 回落到当前缩略图（实时矩形，列表滚动后仍准）
+      resetZoom();
+      lb.classList.remove('chrome-in', 'chrome-off', 'side-meta');
     });
+    // 触屏快滑翻页（v2 保持）：横滑翻页与 ⑩ 竖拖关正交
     let x0: number | null = null;
     lb.addEventListener('touchstart', (e) => {
       x0 = e.touches[0]!.clientX;
@@ -521,6 +742,116 @@ const first = cards[0];
     .lb-orig { margin-left: 0; }
   .lb-meta { order: 3; flex-basis: 100%; }
   }
+
+  /* ── v2.1 chrome 双层淡入（③）：层1 +140ms、层2 +300ms，仅 opacity 无位移 ── */
+  .lb-l1, .lb-l2 { transition: opacity 200ms var(--ease); }
+  #lb:not(.chrome-in) .lb-l1, #lb:not(.chrome-in) .lb-l2 { opacity: 0; }
+  #lb.chrome-in .lb-l1 { animation: lbFade 300ms cubic-bezier(0.4, 0, 0.22, 1) 140ms both; }
+  #lb.chrome-in .lb-l2 { animation: lbFade 300ms cubic-bezier(0.4, 0, 0.22, 1) 300ms both; }
+  @keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
+  /* 召唤态（i 键）与 zoom>1 自动隐：opacity 归零不接交互 */
+  #lb.chrome-off .lb-l1, #lb.chrome-off .lb-l2 { opacity: 0; pointer-events: none; animation: none; }
+  /* × 独立于双层 chrome（层1 只包箭头/计数）——全隐口径=只剩图；逃逸路径 Esc/i 保持 */
+  #lb.chrome-off #lb-close { opacity: 0; pointer-events: none; }
+  /* animation:none 掐掉 chrome-in 的 both 填充——动画填充压制普通声明，隐层曾被锁死 opacity:1 */
+  #lb.chrome-off { cursor: zoom-in; }
+
+  /* 层1 计数：右上角 close 旁（原底行挪出） */
+  .lb-count {
+    position: absolute;
+    top: 16px;
+    right: 64px;
+    z-index: 11;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: #98a2b3;
+    letter-spacing: 0.06em;
+  }
+
+  /* 首开提示胶囊（⑦）：底部居中 meta 上方，2.6s 自隐由 JS 控制 */
+  .lb-hint {
+    position: absolute;
+    bottom: 118px;
+    left: 50%;
+    translate: -50% 0;
+    z-index: 11;
+    margin: 0;
+    padding: 7px 14px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.22);
+    background: rgba(20, 24, 30, 0.72);
+    color: #dfe6f3;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    letter-spacing: 0.03em;
+    white-space: nowrap;
+  }
+
+  /* 缩放指示（⑦）：右下 mono 小字 */
+  .lb-zoombadge {
+    position: absolute;
+    right: 18px;
+    bottom: 14px;
+    z-index: 11;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: #dfe6f3;
+    opacity: 0;
+    transition: opacity 240ms var(--ease);
+    pointer-events: none;
+  }
+  .lb-zoombadge.on { opacity: 0.9; }
+
+  /* 长图侧置 meta（⑧）：竖图宽视口时层2 挪进右侧 letterbox，横图维持底部 */
+  #lb.side-meta .lb-l2 {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    translate: 0 -50%;
+    width: 216px;
+    max-height: 70vh;
+    overflow-y: auto;
+    scrollbar-width: none;
+    border-left: 1px solid rgba(255, 255, 255, 0.08);
+    padding-left: 16px;
+  }
+  #lb.side-meta .lb-l2 .lb-row { flex-direction: column; align-items: flex-start; }
+
+  /* FLIP 起飞/回落克隆（①）：dialog 内 absolute（dialog 全屏故 viewport 坐标等价）；
+     关闭回落克隆挂 body 需 fixed（dialog 关闭即离 top-layer，回落动画要活到 dialog 之外） */
+  :global(.lb-flip-img) {
+    position: absolute;
+    z-index: 6; /* 盖真身、让位 chrome(11) */
+    object-fit: cover;
+    border-radius: 6px;
+    pointer-events: none;
+    transition: left 300ms cubic-bezier(0.4, 0, 0.22, 1),
+      top 300ms cubic-bezier(0.4, 0, 0.22, 1),
+      width 300ms cubic-bezier(0.4, 0, 0.22, 1),
+      height 300ms cubic-bezier(0.4, 0, 0.22, 1);
+  }
+  :global(.lb-flip-back) {
+    position: fixed;
+    z-index: 2147483000;
+    object-fit: cover;
+    border-radius: 6px;
+    pointer-events: none;
+    transition: left 300ms cubic-bezier(0.4, 0, 0.22, 1),
+      top 300ms cubic-bezier(0.4, 0, 0.22, 1),
+      width 300ms cubic-bezier(0.4, 0, 0.22, 1),
+      height 300ms cubic-bezier(0.4, 0, 0.22, 1);
+  }
+
+  /* 换片过渡（⑥）：新图侧向 10% 位移淡入由 JS inline 过渡驱动 */
+  #lb-img.slide-in { transition: opacity 280ms var(--ease), transform 280ms var(--ease); }
+
+  /* reduced-motion：v2.1 所有新动效全豁免（缩放/拖拽本体不在此列，由 v2 保持） */
+  @media (prefers-reduced-motion: reduce) {
+    #lb.chrome-in .lb-l1, #lb.chrome-in .lb-l2 { animation: none; opacity: 1; }
+    .lb-l1, .lb-l2, .lb-zoombadge { transition: none; }
+    .lb-flip-img, :global(.lb-flip-back) { display: none; }
+    #lb-img.slide-in { transition: none; }
+  }
 </style>
 
 <style>
diff --git a/src/i18n/ui.ts b/src/i18n/ui.ts
index 5f9ba2a..dc70f10 100644
--- a/src/i18n/ui.ts
+++ b/src/i18n/ui.ts
@@ -96,6 +96,7 @@ const dict = {
 
   // ===== F 车道：访问量小字（Artalk pv，组件内独立计数） =====
   pv_viewed: { zh: '人看过', en: 'views' },
+  lb_hint: { zh: '滚轮缩放 · 双击放大 · Esc 关闭', en: 'Wheel to zoom · Double-click · Esc' },
 
   // ===== 命令面板（Phase 4 T1 车道）：动作/导航/分组与键位提示 =====
   nav_home: { zh: '首页', en: 'Home' },