/* ============================================
   页面过渡动画
   1) 优先使用跨文档 View Transitions（无白屏，真交叉淡入）
   2) 不支持的浏览器降级为 body 淡入 + 点击淡出
   ============================================ */

/* ---------- 跨文档 View Transitions ---------- */
@view-transition{
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root){
  animation-duration: .33s;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
  mix-blend-mode: normal;
}

::view-transition-old(root){
  animation-name: vtOut;
}
::view-transition-new(root){
  animation-name: vtIn;
}

@keyframes vtOut{
  to{
    opacity: 0;
    transform: translateY(-10px) scale(.996);
  }
}

@keyframes vtIn{
  from{
    opacity: 0;
    transform: translateY(10px) scale(.996);
  }
}

/* ---------- 降级：不支持 VT 时 ---------- */
/* 进场：轻微上移 + 淡入 */
html.no-vt body:not(.page-leave){
  animation: pageIn .32s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes pageIn{
  from{
    opacity: 0;
    transform: translateY(10px);
  }
  to{
    opacity: 1;
    transform: none;
  }
}

/* 退场：点击链接后先淡出再跳转 */
body.page-leave{
  animation: pageOut .19s ease-in both;
  pointer-events: none;
}

@keyframes pageOut{
  to{
    opacity: 0;
    transform: translateY(-8px) scale(.997);
  }
}

/* ---------- 顶部加载进度条 ---------- */
.nav-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  z-index: 9999;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg,
    var(--mint-deep, #6FCF97) 0%,
    var(--lilac-deep, #9AA8E0) 55%,
    var(--peach-deep, #FFB088) 100%);
  box-shadow: 0 0 10px rgba(111,207,151,.45);
  opacity: 0;
  pointer-events: none;
  transition: width .28s ease, opacity .25s ease;
}
.nav-progress.active{
  opacity: 1;
}
.nav-progress.done{
  width: 100% !important;
  opacity: 0;
  transition: width .18s ease, opacity .32s ease .12s;
}

/* ---------- 无障碍：尊重系统「减少动态效果」 ---------- */
@media (prefers-reduced-motion: reduce){
  html.no-vt body:not(.page-leave),
  body.page-leave{
    animation: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation: none !important;
  }
  .nav-progress{
    transition: opacity .2s ease;
  }
}


/* ============================================
   数据渲染完成后的柔和出现
   避免 JSON 加载完成后内容「啪」地弹出
   ============================================ */
@keyframes contentFadeUp{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: none; }
}

/* 页面主内容区载入后整体淡入 */
.main > *{
  animation: contentFadeUp .38s cubic-bezier(.22,.61,.36,1) both;
}
/* 依次错开，形成自上而下的轻推感 */
.main > *:nth-child(1){ animation-delay: .02s; }
.main > *:nth-child(2){ animation-delay: .06s; }
.main > *:nth-child(3){ animation-delay: .10s; }
.main > *:nth-child(4){ animation-delay: .13s; }
.main > *:nth-child(5){ animation-delay: .16s; }
.main > *:nth-child(6){ animation-delay: .18s; }
.main > *:nth-child(n+7){ animation-delay: .20s; }

/* 数据填充后的区块单独淡入（骨架屏消失、真实内容出现） */
.fade-in{
  animation: contentFadeUp .34s cubic-bezier(.22,.61,.36,1) both;
}

/* 减少动态效果时全部关闭 */
@media (prefers-reduced-motion: reduce){
  .main > *, .fade-in{ animation: none !important; }
}