/* ════════════════════════════════════════════════════════
   卡片放大进入 Splash · View Transitions v3.2（低熵体的工具箱）
   - 前进：首页卡片 → 子页 Splash 容器 共享元素过渡（卡片放大成 Splash）
   - 返回：内容容器 → 首页卡片 缩小回位（html.vt-back），Splash 不出现
   - 圆角过渡：放大/缩小时卡片圆角平滑变化（不出现直角）
   - 弹性缓动：cubic-bezier back-out（带轻微 overshoot），时长 560ms
   - Splash 保留播放；root 仅淡入淡出
   - prefers-reduced-motion 自动降级
   ════════════════════════════════════════════════════════ */

/* 启用跨文档导航过渡 */
@view-transition {
  navigation: auto;
}

/* ── root：仅轻微淡入淡出（视觉主体是共享元素的缩放） ── */
::view-transition-old(root) {
  animation: vt-fade-out 200ms ease both;
}
::view-transition-new(root) {
  animation: vt-fade-in 400ms ease both;
}

@keyframes vt-fade-out {
  to { opacity: .4; }
}
@keyframes vt-fade-in {
  from { opacity: .3; }
  to { opacity: 1; }
}

/* 返回方向：同款淡入淡出 */
html.vt-back::view-transition-old(root) {
  animation: vt-fade-out 200ms ease both;
}
html.vt-back::view-transition-new(root) {
  animation: vt-fade-in 400ms ease both;
}

/* ── 共享元素（首页卡片 ↔ 子页 Splash/内容容器） ──
   弹性缓动：cubic-bezier(.34,1.56,.64,1) = back-out，带轻微 overshoot
   时长 560ms，圆角从 1.1rem 平滑变化 */
::view-transition-group(*) {
  animation-duration: 560ms;
  animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
  animation-fill-mode: both;
}

::view-transition-image-pair(*) {
  isolation: isolate;
  overflow: hidden;
}

::view-transition-old(*),
::view-transition-new(*) {
  border-radius: 1.1rem; /* --radius-lg，与首页卡片一致 */
  animation: none;
}

/* ── 返回收缩锚点：首页左上角，对应子页返回按钮位置（不可见） ── */
.vt-back-anchor {
  position: fixed;
  top: 0.75rem;
  left: 1rem;
  width: 7rem;
  height: 2.4rem;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── 橡皮筋边界 ── */
html,
body {
  overscroll-behavior-y: contain;
}

/* ── 按下即时反馈 ── */
a[role="link"]:active,
.card-3d:active,
.toolbox-back:active,
.back-link:active,
.golden-btn:active {
  transform: scale(.97);
  transition: transform .1s ease;
}

/* ── 降级：用户偏好减少动态效果 ── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(*) {
    animation: none !important;
  }
  ::view-transition-old(*),
  ::view-transition-new(*) {
    border-radius: 0;
  }
  a[role="link"]:active,
  .card-3d:active,
  .toolbox-back:active,
  .back-link:active,
  .golden-btn:active {
    transform: none;
  }
}