/* 转场和开关动画（第二版规格第 7 节）。脚本在 transition.js。
   - :root 的时长和缓动 token，board.css、style.css、map.css 用 var() 引用
   - View Transition：方案 A（默认）和方案 B（html[data-mode="dossier"]，地址带 ?vt=B）
   - 方案 B 的卷宗结构（.dossier、#deskScrim）
   - 详情抽屉、评分细则、手机目录的开关动画
   style.css 不给 .sheet、#scrim、.rv、.stamp 写 transform、transition、animation，这些都在这里。 */

:root{
  --t1:150ms; --t2:250ms; --t3:400ms;
  --e-in:cubic-bezier(.55,.055,.675,.19);    /* 退场，A24 ease-in-power2 */
  --e-out:cubic-bezier(.215,.61,.355,1);     /* 入场，A24 ease-out-power2 */
  --e-io:cubic-bezier(.645,.045,.355,1);     /* 平移，A24 默认 */
  --e-paper:cubic-bezier(.3,.7,.15,1);       /* 照片变形，第一版沿用 */
  --e-expo:cubic-bezier(.19,1,.22,1);        /* 抽屉、卷宗滑入，A24 out-expo */
  --e-pop:cubic-bezier(.34,1.56,.64,1);      /* 钉子、印章、悬停转正的回弹 */
}

/* ---------- View Transition 公共 ---------- */
html[data-vt]::view-transition-old(root),html[data-vt]::view-transition-new(root){mix-blend-mode:normal}
html[data-vt]::view-transition-old(exhibit),html[data-vt]::view-transition-new(exhibit){height:100%;object-fit:fill}
/* 照片和钉子画在卷宗（dossier）上面；伪元素是绝对定位的，z-index 有效 */
::view-transition-group(exhibit){z-index:3}
::view-transition-group(pin){z-index:4}
::view-transition-group(site-head){z-index:2}

/* ---------- A：首页进子页，480ms ---------- */
html[data-vt="open"]::view-transition-old(root){animation:var(--t1) var(--e-in) both vt-out,var(--t1) var(--e-in) both vt-shrink}
/* 新页淡入从 100ms 起（规格表写 150ms）：和旧页淡出叠 50ms，免得 150–250ms 之间整屏几乎空白，像闪了一下白 */
html[data-vt="open"]::view-transition-new(root){animation:var(--t2) var(--e-out) 100ms both vt-in,var(--t3) var(--e-io) both vt-up}
html[data-vt="open"]::view-transition-group(exhibit){animation-duration:440ms;animation-timing-function:var(--e-paper)}
html[data-vt="open"]::view-transition-old(exhibit){animation:160ms var(--e-in) both vt-out}
html[data-vt="open"]::view-transition-new(exhibit){animation:200ms var(--e-out) 120ms both vt-in}
html[data-vt="open"]::view-transition-old(pin){animation:160ms var(--e-in) both pin-out}

/* ---------- B：子页回首页，380ms（之后 board.js 落钉、红线回弹 200ms） ---------- */
html[data-vt="back"]::view-transition-old(root){animation:var(--t1) var(--e-in) both vt-out,var(--t1) var(--e-in) both vt-down}
html[data-vt="back"]::view-transition-new(root){animation:var(--t2) var(--e-out) 80ms both vt-in,var(--t2) var(--e-out) 80ms both vt-grow}
html[data-vt="back"]::view-transition-group(exhibit){animation-duration:380ms;animation-timing-function:var(--e-paper)}
html[data-vt="back"]::view-transition-old(exhibit){animation:160ms var(--e-in) both vt-out}
html[data-vt="back"]::view-transition-new(exhibit){animation:200ms var(--e-out) 100ms both vt-in}
/* 新画面里的钉子先藏着，转场结束后由 board.js 从上方落下 */
html[data-vt="back"]::view-transition-group(pin){animation:none}
html[data-vt="back"]::view-transition-new(pin){animation:none;opacity:0}

/* ---------- AB 组合（默认）：卷宗升起 → 停 → 放大铺满，860ms；回程缩成卷宗 → 下落，680ms ----------
   新子页本身就是 A 的整屏排版，先缩到 --uf-s（0.8）倍当卷宗，浮在压暗的手记上，再放大到 1 铺满。
   --uf-* 由 transition.js 量好写在 <html> 上；照片的三段关键帧也在 transition.js 里按同一组数算。
   手记压暗用 brightness(.8)，接近 B 的遮罩 rgba(28,24,20,.22)；卷宗的细边和投影用 drop-shadow，跟着缩放 */
html[data-vt="unfold"],html[data-vt="fold"]{--uf-shadow:drop-shadow(0 0 1px rgba(60,45,30,.35)) drop-shadow(0 22px 34px rgba(40,30,20,.32))}
html[data-vt="unfold"]::view-transition-new(root),html[data-vt="fold"]::view-transition-old(root){transform-origin:0 0;filter:var(--uf-shadow)}
/* 进 */
html[data-vt="unfold"]::view-transition-old(root){animation:340ms var(--e-out) both uf-dim}
html[data-vt="unfold"]::view-transition-new(root){animation:860ms linear both uf-open,200ms var(--e-out) both vt-in}
html[data-vt="unfold"]::view-transition-old(exhibit){animation:160ms var(--e-in) 40ms both vt-out}
html[data-vt="unfold"]::view-transition-new(exhibit){animation:200ms var(--e-out) 160ms both vt-in}
html[data-vt="unfold"]::view-transition-old(pin){animation:160ms var(--e-in) both pin-out}
/* 回：旧子页在上面，先缩成卷宗，再下落淡出；手记 340ms 起由暗转亮，照片 340ms 起飞回 */
html[data-vt="fold"]::view-transition-old(root){z-index:1;animation:680ms linear both uf-close}
html[data-vt="fold"]::view-transition-new(root){animation:680ms linear both uf-undim}
html[data-vt="fold"]::view-transition-old(exhibit){animation:160ms var(--e-in) 340ms both vt-out}
html[data-vt="fold"]::view-transition-new(exhibit){animation:200ms var(--e-out) 420ms both vt-in}
html[data-vt="fold"]::view-transition-group(pin){animation:none}
html[data-vt="fold"]::view-transition-new(pin){animation:none;opacity:0}

@keyframes uf-dim{to{filter:brightness(.8)}}
/* 0–40% 从下方 40px 升起（out-expo），40–48% 停住，48–100% 放大铺满（in-out-quart） */
@keyframes uf-open{
  0%{transform:translate(var(--uf-x),calc(var(--uf-y) + 40px)) scale(var(--uf-s));animation-timing-function:cubic-bezier(.19,1,.22,1)}
  40%,48%{transform:translate(var(--uf-x),var(--uf-y)) scale(var(--uf-s))}
  48%{animation-timing-function:cubic-bezier(.76,0,.24,1)}
  100%{transform:translate(0,0) scale(1)}
}
/* 0–50% 缩成卷宗（in-out-cubic），50–72% 下落 32px 淡出（ease-in） */
@keyframes uf-close{
  0%{transform:translate(0,0) scale(1);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  50%{transform:translate(var(--uf-x),var(--uf-y)) scale(var(--uf-s));opacity:1;animation-timing-function:cubic-bezier(.55,.055,.675,.19)}
  72%,100%{transform:translate(var(--uf-x),calc(var(--uf-y) + 32px)) scale(var(--uf-s));opacity:0}
}
@keyframes uf-undim{
  0%,50%{filter:brightness(.8);animation-timing-function:cubic-bezier(.215,.61,.355,1)}
  100%{filter:brightness(1)}
}

/* ---------- C：子页之间，400ms ---------- */
html[data-vt="lateral"]{--dx:40px}
html[data-vt="lateral"][data-dir="back"]{--dx:-40px}
html[data-vt="lateral"]::view-transition-old(root){animation:var(--t1) var(--e-in) both vt-out,var(--t1) var(--e-in) both vt-left}
html[data-vt="lateral"]::view-transition-new(root){animation:var(--t2) var(--e-out) 100ms both vt-in,var(--t3) var(--e-io) both vt-right}
html[data-vt="lateral"]::view-transition-old(site-head){display:none}
html[data-vt="lateral"]::view-transition-group(site-head){animation:none}
html[data-vt="lateral"]::view-transition-new(site-head){animation:none}

/* ---------- 落点不在：只做 root 250ms 淡入淡出 ---------- */
html[data-vt="fade"]::view-transition-old(root){animation:var(--t2) var(--e-in) both vt-out}
html[data-vt="fade"]::view-transition-new(root){animation:var(--t2) var(--e-out) both vt-in}

/* ---------- 窄屏进出：不飞照片，平移 24px，250ms ---------- */
html[data-vt="slide"]{--dx:24px}
html[data-vt="slide"][data-dir="back"]{--dx:-24px}
html[data-vt="slide"]::view-transition-old(root){animation:var(--t1) var(--e-in) both vt-out,var(--t1) var(--e-in) both vt-left}
html[data-vt="slide"]::view-transition-new(root){animation:var(--t2) var(--e-out) both vt-in,var(--t2) var(--e-io) both vt-right}

/* ---------- 减少动态 ---------- */
html[data-vt="reduce"]::view-transition-old(root),html[data-vt="reduce"]::view-transition-new(root){animation-duration:150ms!important;animation-delay:0s!important}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*){animation-duration:0s!important}
  ::view-transition-old(*),::view-transition-new(*){animation-delay:0s!important}
}

@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@keyframes vt-shrink{to{scale:.985}}
@keyframes vt-grow{from{scale:.985}}
@keyframes vt-up{from{translate:0 24px}}
@keyframes vt-down{to{translate:0 16px}}
@keyframes vt-left{to{translate:calc(-1 * var(--dx)) 0}}
@keyframes vt-right{from{translate:var(--dx) 0}}
@keyframes pin-out{to{translate:0 -14px;rotate:25deg;opacity:0}}

/* ---------- 方案 B：卷宗叠在压暗的手记上（?vt=B） ---------- */
#deskScrim{display:none}
html:not([data-mode="dossier"]) .dossier{display:contents}
/* --dz-w 是卷宗宽度。手记本宽 86vw，卷宗比它窄 140px，两侧各露出约 70px 压暗的本子（1280 宽卷宗 961px，1440 宽 1098px），
   最宽 1100px。规格原值 1240px 在 1440 宽时正好把本子盖满 */
html[data-mode="dossier"]{--dz-w:min(1100px,calc(86vw - 140px))}
html[data-mode="dossier"] .dossier{position:fixed;top:16px;bottom:0;left:max(32px,calc((100vw - var(--dz-w)) / 2));right:max(32px,calc((100vw - var(--dz-w)) / 2));z-index:20;
  overflow-y:auto;overscroll-behavior:contain;background:#FBF9F4;box-shadow:0 0 0 1px #DCD5C7,0 18px 48px -12px rgba(40,30,20,.35)}
html[data-mode="dossier"] body[data-page="board"] .dossier{display:none}
html[data-mode="dossier"] body:not([data-page="board"]){overflow:hidden}
@media (min-width:768px){
  /* 进子页后手记不隐藏（加 inert，放大镜停掉），上面盖一层压暗 */
  html[data-mode="dossier"] body:not([data-page="board"]) #pgBoard{display:block!important}
  html[data-mode="dossier"] body:not([data-page="board"]) #deskScrim{display:block;position:fixed;inset:0;z-index:19;background:rgba(28,24,20,.22);cursor:pointer}
}
@media (max-width:767px){
  html[data-mode="dossier"] .dossier{inset:0;box-shadow:none}
}
/* 进：root 交叉淡化 200ms（手记原样变成压暗），卷宗从下方 40px 上来 */
html[data-mode="dossier"][data-vt="open"]::view-transition-old(root){animation:200ms var(--e-out) both vt-out}
html[data-mode="dossier"][data-vt="open"]::view-transition-new(root){animation:200ms var(--e-out) both vt-in}
html[data-mode="dossier"][data-vt="open"]::view-transition-new(dossier){animation:320ms var(--e-expo) both dz-up,200ms var(--e-out) both vt-in}
/* 回：卷宗下移 32px 淡出，root 交叉淡化，压暗退掉 */
html[data-mode="dossier"][data-vt="back"]::view-transition-old(root){animation:200ms var(--e-out) both vt-out}
html[data-mode="dossier"][data-vt="back"]::view-transition-new(root){animation:200ms var(--e-out) both vt-in}
html[data-mode="dossier"][data-vt="back"]::view-transition-old(dossier){animation:200ms var(--e-in) both dz-down,200ms var(--e-in) both vt-out}
/* 横切：root 和书眉不动，只有卷宗内容平移、淡化 */
html[data-mode="dossier"][data-vt="lateral"]::view-transition-old(root){display:none}
html[data-mode="dossier"][data-vt="lateral"]::view-transition-new(root){animation:none}
/* 卷宗组垫一层不透明纸色：新旧两页交叉淡化的那段都是半透明的，不垫的话底下压暗的手记会透出来 */
html[data-mode="dossier"][data-vt="lateral"]::view-transition-group(dossier){animation:none;background:#FBF9F4}
html[data-mode="dossier"][data-vt="lateral"]::view-transition-old(dossier){animation:var(--t1) var(--e-in) both vt-out,var(--t1) var(--e-in) both vt-left}
html[data-mode="dossier"][data-vt="lateral"]::view-transition-new(dossier){animation:var(--t2) var(--e-out) 100ms both vt-in,var(--t3) var(--e-io) both vt-right}
@keyframes dz-up{from{translate:0 40px}}
@keyframes dz-down{to{translate:0 32px}}

/* ---------- D：详情抽屉，开 320ms（内容到 480ms），关 180ms ---------- */
.sheet .stamp{transform:rotate(-6deg)}
.sheet.is-open{animation:sh-in 320ms var(--e-expo) both}
.sheet.is-open .rv{animation:rv-in 200ms var(--e-out) calc(120ms + var(--i, 0) * 40ms) both}
.sheet.is-open .stamp{animation:stamp-in 160ms var(--e-pop) 200ms both}
.sheet.is-closing{animation:sh-out 180ms var(--e-in) both}
#scrim.is-open{animation:fade-in 200ms var(--e-out) both}
#scrim.is-closing{animation:fade-out 150ms var(--e-in) both}
@keyframes sh-in{from{transform:translateX(104%) rotate(1.2deg)}}
@keyframes sh-out{to{transform:translateX(104%) rotate(1.2deg)}}
@keyframes rv-in{from{opacity:0;transform:translateY(8px)}}
@keyframes stamp-in{from{opacity:0;transform:scale(1.4) rotate(-14deg)}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}

/* ---------- 评分细则：开 250ms，关 150ms ---------- */
dialog#rules[open]{animation:dlg-in var(--t2) var(--e-out) both}
dialog#rules[open]::backdrop{animation:fade-in 200ms var(--e-out) both}
dialog#rules.is-closing{animation:dlg-out var(--t1) var(--e-in) both}
dialog#rules.is-closing::backdrop{animation:fade-out var(--t1) var(--e-in) both}
@keyframes dlg-in{from{opacity:0;transform:translateY(12px)}}
@keyframes dlg-out{to{opacity:0;transform:translateY(12px)}}

/* ---------- 手机目录：底色 150ms 铺满，各行从底边露出，200ms，错开 30ms ---------- */
dialog.toc[open]{animation:fade-in var(--t1) linear both}
dialog.toc[open] li{animation:toc-in 200ms var(--e-out) calc(var(--t1) + var(--i, 0) * 30ms) both}
dialog.toc.is-closing{animation:fade-out var(--t1) var(--e-in) both}
@keyframes toc-in{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}

/* 不支持 VT 时主区淡入由 transition.js 用 WAAPI 做；减少动态时抽屉直接出现，遮罩 150ms 淡入 */
@media (prefers-reduced-motion:reduce){
  .sheet.is-open,.sheet.is-open .rv,.sheet.is-open .stamp,.sheet.is-closing,
  dialog#rules[open],dialog#rules.is-closing,dialog.toc[open],dialog.toc[open] li,dialog.toc.is-closing{animation:none}
  #scrim.is-open{animation:fade-in var(--t1) linear both}
  #scrim.is-closing{animation:none}
}