/**
 * view-transitions.css — 跨文档（MPA）View Transitions：「控制台卡片 ⇄ 功能页」一镜到底
 *
 * 两端页面都要引入本文件：
 *   控制台  —— 卡片由 dashboard.js 生成（带 data-vt-page="<page id>"），
 *              导航时由 view-transitions.js 给**目标页对应的那一张**打上过渡名
 *   功能页  —— 页面主体元素上加 data-vt-shell="<page id>"，
 *              标题图标静态写在 h4 里，加 data-vt-icon
 *
 * 两个页面因此共享同一个 view-transition-name，导航时卡片会平滑展开成整个功能页。
 * 注意：同一时刻每个 view-transition-name 只能落在一个元素上，重名会导致过渡被跳过。
 */

/* ── 1. 开启跨文档导航过渡（同源、两端都声明才生效）─────────────── */
@view-transition {
  navigation: auto;
}

/* ── 2. 共享元素：控制台卡片 ⇄ 功能页主体 ────────────────────────── */
/* 谁是新元素由导航方向天然决定（离开控制台时卡片是旧元素，回到控制台时
   卡片是新元素），所以一个名字就够，透明度曲线只按旧 / 新给一套。 */
:root[data-vt-active] [data-vt-shell] {
  view-transition-name: lab-shell;
}

/* ── 3. 共享元素：功能页标题图标 ⇄ 控制台卡片图标 ─────────────────── */
/* 图标由 HTML 静态提供（h4 里带 data-vt-icon）。pagereveal 早于
   DOMContentLoaded，等脚本注入图标再打名字会赶不上新快照，所以名字交给 CSS。 */
.page-header [data-vt-icon] {
  display: inline-block;
}
:root[data-vt-active] .page-header [data-vt-icon] {
  view-transition-name: lab-icon;
}

/* ── 4. 顶栏单独成组，不跟着整页交叉淡入淡出 ─────────────────────── */
:root[data-vt-active] .page-header {
  view-transition-name: lab-header;
}

/* ── 4. 「正在加载…」遮罩单独成组并隐藏，白底不进过渡画面 ────────── */
:root[data-vt-active] .page-loading-notice {
  view-transition-name: lab-loader;
}
::view-transition-old(lab-loader),
::view-transition-new(lab-loader) {
  display: none;
}

/* ── 6. 动画调校 ────────────────────────────────────────────────── */
/* 位置和尺寸柔和减速并缓慢停下，不过冲；淡入淡出共用时长。 */
:root {
  --vt-duration: 480ms;
  --vt-easing: cubic-bezier(.22, 1, .36, 1);
}
::view-transition-group(lab-shell),
::view-transition-group(lab-icon) {
  animation-duration: var(--vt-duration);
  animation-timing-function: var(--vt-easing);
}

/* 图标要跨过主体和顶栏，不能被它们各自的快照盖住。 */
::view-transition-group(lab-icon) {
  z-index: 1000;
}

/* 外框继续变形，快照按自身原始宽度限制到 0.5–2 倍，高度按比例缩放。
   不用 cover：长页面的高度差不应把短卡片放大数倍。超出外框的部分裁切。 */
::view-transition-image-pair(lab-shell),
::view-transition-image-pair(lab-icon) {
  width: 100%;
  height: 100%;
  overflow: clip;
}
::view-transition-old(lab-shell),
::view-transition-new(lab-shell),
::view-transition-old(lab-icon),
::view-transition-new(lab-icon) {
  inline-size: clamp(calc(var(--vt-natural-width) * .5), 100%, calc(var(--vt-natural-width) * 2));
  block-size: auto;
  max-inline-size: none;
  max-block-size: none;
  left: 50%;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: top center;
}
::view-transition-old(lab-shell) { --vt-natural-width: var(--vt-shell-old-width); }
::view-transition-new(lab-shell) { --vt-natural-width: var(--vt-shell-new-width); }
::view-transition-old(lab-icon) { --vt-natural-width: var(--vt-icon-old-width); }
::view-transition-new(lab-icon) { --vt-natural-width: var(--vt-icon-new-width); }

::view-transition-old(lab-shell),
::view-transition-new(lab-shell) {
  /* 两层相加而不是上压着下：下面每条曲线写的百分比因此就是实际看到的透明度。
     plus-lighter 由 UA 通过 animation-name 注入，而这里的 animation 简写会
     覆盖 animation-name，所以在属性上再声明一次。两层相加的峰值正好是 1，
     不会过曝发白。 */
  mix-blend-mode: plus-lighter;
}

/* 位移仍使用柔和减速，图标透明度单独匀速交接。
   若淡入也快速减速，白色标题图标会过早覆盖蓝色卡片图标，
   在尚未到达蓝色顶栏时几乎融入浅色页面，反向也会显得突然出现。 */
::view-transition-old(lab-icon),
::view-transition-new(lab-icon) {
  mix-blend-mode: plus-lighter;
}
::view-transition-old(lab-icon) {
  animation: vt-shell-out var(--vt-duration) linear both;
}
::view-transition-new(lab-icon) {
  animation: vt-shell-in var(--vt-duration) linear both;
}

/* 互补淡入淡出，避免分段透明度带来的突变。 */
::view-transition-old(lab-shell) {
  animation: vt-shell-out var(--vt-duration) var(--vt-easing) both;
}
::view-transition-new(lab-shell) {
  animation: vt-shell-in var(--vt-duration) var(--vt-easing) both;
}
@keyframes vt-shell-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes vt-shell-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── 6. 无障碍：用户要求减少动效时，过渡退化为瞬时切换 ───────────── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}